I have a panel with a docked toolbar and an icon inside it. The panel has several items (accordion layout). I want to enable the icon only for selected items. I.e. when a valid item is active the button should be become enabled, and then be disabled if the user activates an item that the icon is not applicable for.
I tried disabled: function() { some code to find whether item is valid .. }, but that didnot work.
I also researched panel listeners to find one for item change and then use button.setDisabled(bool) but couldnot find the right event to use.
How do I achieve this?
p.s. I am using ExtJS 4.1.
When you change items in an accordion, they panel that gets activated will fire the expand event. So listen to the expand event on each panel, then call enable/disable on the appropriate buttons.
Related
I've got a tabs container with three tabs. They have select lists and checkboxes on them which have sql queries as source. Users can select entries in the lists or edit the checked boxes and save this to the database by clicking a button. This button also re-fills the select lists and checkboxes with the current data from the database after saving it.
My problem is: When a user selects an entry in a select list or edits a check box and navigates to antoher tab without clicking on the "save" button, the data stays there when navigating back to the tab. I want to assure that what is depicted in the lists and check boxes is always the current data like it is in the tables in the database.
Therefore, I tried to put an onclick event on the tabs of the tabscontainer like this one:
I didn't get it to work, becuase these elements do not have an ID and I can not set an ID for them in APEX (at least I guess so). Is there a way to do this in APEX anyway?
This is one of the tab elements:
You can put a static ID to your tab region (for example #SOME_STATIC_ID) and then select the elements with a jQuery selector:
$("#SOME_STATIC_ID a.t-Tabs-link")
You could also define an on click listener on text of the tab:
$(".t-Tabs-label:contains('Tab 1')").click(function(){alert('Doing something on click of Tab 1 !!!')});
It might not be the cleanest solution but it works.
Just in case anyone else is experiencing the same problem: I solved it by putting an custom dynamic action on the tabs container:
This fires whenever the user switches between the tabs and ehrefore worked for me :-)
For more information check this article: https://medium.com/#pierre.yotti/tabs-region-javascript-api-in-oracle-apex-37e20bc9f68f
My company has a MegaMenu on their internal web portal. One of the popup menus has a Search input field which works fine. The problem is that when someone types in the input field and the mouse pointer moves off of the megamenu it, of course, disappears. I need to keep that popup menu open/visible while the user enters the search parameters. Whatever they typed is also invisible until they mouse over the menu item again. Also I am not sure if I should look at onfocus attribute, cursor positioning or a mousemove event.
You need to opt for show/hide on click rather than toggle on hover. So that unless user does not wish to make that hide it is open. As it is convenient for users.
I understand that bootstrap allows a user to disable links within its dropdown menu component simply by adding a class="disabled" into the corresponding <li> tag.
What I'd like to do is write some javascript so that when a user selects the dropdown menu and clicks on a link within it, that link will become disabled. It's in the nature of the dropdown menu to close immediately when a valid link is selected, or when the user clicks outside of the dropdown box. Therefore when the user opens the menu on any subsequent visit, he or she should see all of their previously selected items appearing as disabled.
I've already tried to use the solutions posted in this link: disable a hyperlink using jQuery, but none of them are working for me.
Using Nagra's above javascript solution in this modified form: $('#my_link').click(function(){$(this).addClass('disabled');}); I am able to add the disabled class to each of the <li> elements whenever a user clicks on the <a> embedded within the <li> parent.
Thank you.
I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.
I need to display a mobile-phone compatible popup menu when user left-clicks a HyperLink control. A menu will contain various options for this link, so its handler had to be aware of the clicked link data (actually, each link corresponds to a nickname).
What do I need to make that work?:)
Here are some links with pop menou.
http://www.php-development.ru/javascripts/dropdown.php
http://www.dynamicdrive.com/dynamicindex1/index.html
http://www.1stwebdesigner.com/resources/38-jquery-and-css-drop-down-multi-level-menu-solutions/
I think that there are too many more to find on google.