Hi I am trying to have a menu open up when i right click on any treelist item. Based on the element I right click on, i need to show a dynamic menu with options. How can i achieve this. I am new to modern toolkit of Ext 7 and am migrating my code from EXT 5 to EXT 7. Please help.
contextmenu event on the element works. I was able to figure it out myself.
The below code helps
{
xtype: 'treelist',
reference: 'projectMenu',
highlightPath: true,
bind: {
store: '{navItems}'
},
listeners: {
'contextmenu': {
element: 'element', //bind to the underlying element property on the panel
fn: 'onContextMenu'
}
}
}
Related
I am trying to create my website in Material Design, however I found one issue with Material Select regardless whether I use MDB (Material Design for Bootstrap) or Materialize CSS framework. Both are working fine on Windows/OSX/Android , however for some reason when I open Material Select component on my iPad and click on it, there is a blinking cursor showing from the Background of the Dropdown.
Try the following code:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
I had the same issue on iOS devices, I am using select dropdown from materialisecss "http://materializecss.com/forms.html".
to fix the blinking cursor issue, I used reference code from below link and slightly modified that code.
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (check comment by "chi-bd commented on 17 Nov 2015")
jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
e.preventDefault();
}
}
});
jQuery('select').material_select(); to initialize materialise select and rest code is the fix.
the only problem was this was giving problem on desktop view so added mobile detection condition
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Note: Add this code in document ready $(document).ready(function() { ... });
that's it. I hope this will sort out your issue.
Regards, and have a nice day :)
There is an open issue on github, #StaticBR proposed an approach to solve "Dropdown Broken on iPhone (and Safari in general)" issue, link here.
According to #StaticBR,
"The Issue is that IO13 Safari propagate TouchEnd Events before the Click event is propagated.
So if you have a click listener within an drop down, it is not correctly triggerd, because the Dropwdown is getting closed by the TouchEnd event. After that the click event is at a different position or does not longer exist.
Removing the touch event listener solved this issue for me."
Apologies, the above code works but then it stops the scrolling for drop-down.
For now I am using below fix, but it shows the blinking cursor first and then it hides it. but still this is not the perfect solution, if anyone has better solution please post here :)
function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){
if (jQuery(nextObj).is(":visible")){
jQuery("input.select-dropdown").css({
"transition" : "none",
"left" : "-999999px"
});
}else{
jQuery("input.select-dropdown").css({
"left" : 0
});
}
}, 250);
jQuery(document).ready(function(){
jQuery("input.select-dropdown").on("focus", function(){
checkDropDown(jQuery(this));
});
jQuery("input.select-dropdown").on("blur", function(){
checkDropDown(jQuery(this));
});
});
I'm trying to build a simple accordion Polymer component. I have it working so when I click on an item in the list, an open class is added to the item which shows its contents.
I don't want to be able to have multiple items open at a time, so in my click function, I essentially want to say:
$(".list-item").on("click", function() {
$("list-item").removeClass("open");
$(this).addClass("open");
}
Of course this is in jQuery and not Dart...so that doesn't help me much.
What's the above equivalent in Dart?
Here's what I have working right now (just opens each clicked item, but doesn't close others in the process).
_openedChanged: function() {
if (this.opened) {
this.toggleClass('open', true);
}
else {
this.toggleClass('open', false);
}
this.setAttribute('aria-expanded', this.opened ? 'true' : 'false');
}
To remove a class from all list-item elements in Dart, you could do:
querySelectorAll('list-item').forEach((item) => item.classes.remove('open'));
I found this solution to create the values of headerText and buttonPrompt with an js function but is it even possible to use the function to create the button names like 'delete'?
$('<div>').simpledialog2({
mode: 'button',
headerText: jsFunction(),
headerClose: true,
buttons : {
'Delete': {
click: function () {
...
I need to change the names for localizing my dialogs. Can't use inlining modes because i need click functions. Even in inline mode the inline functions for 'headerText' are not working..
Thank you, think i've found the best solution for this issue..
For the 'buttons' element i've set an id like
id: 'my_button_id'
then traversed trough the dom to change the button value like this:
$("#my_button_id").find('.ui-btn-text').html(some_function);
:)
I'm using the most recent JQuery UI Tabs (1.10.2). http://jqueryui.com/tabs/
I need to be able to link to individual tabs from external pages. Maybe the more correct way to say it would be to say that I need to be able to change the initially active tab via a bookmarble link.
I know how to set the active index so that #tabs-3 is the active tab
$( "#tabs" ).tabs({ active: 5 });
But I need to know how to change the value for .tabs({ active }) with the url hash so that a link of "tabs-page.html#tabs-3" will load the third tab of "tabs-page.html" by changing .tabs({ active }) to "2" (since it is a zero-based integer).
I'm really more of an html/css designer and a novice to JQuery/JQuery UI, please and thank you for your help. I've searched and found fixes for earlier versions and alternate libraries like JQuery Tools, but nothing for JQuery 1.10.2. I've found ways to link to the section and then reset the window location, but that results in a lot of "jumpiness" as the browser switches between window locations. If there is another page with this fix please link in the comments. THANKS SO MUCH!!!
You will need to read the value of the hash within your jQuery. Some good information can be found here Getting URL hash location, and using it in jQuery
var url = "http://site.com/file.htm#3";
var hashValue = url.substring(url.indexOf('#')).replace('#',''); // '3'
Once you have this, you will be able to set the active tab on the jqueryUI Tabs
$('#tabs').tabs( "option", "active", hashValue );
You would need to do all of this when the page initially loads, so within a $(function(){ ... });
Update
Here is the full code;
<script>
$(function () {
// run the jquery ui plugin
$('#tabs').tabs();
// grab the url
var url = document.URL;
// grab the value of the hash
var hashValue = url.substring(url.indexOf('#')).replace('#', '');
// check to make sure it is a number
if (!isNaN(hashValue)) {
// set the active tab
$('#tabs').tabs("option", "active", hashValue);
}
});
</script>
I use standard code taken from this page and try to disable combobox:
$( "#cbCountry" ).combobox({ disabled: true });
But it is still enabled. What is wrong here?
Easy modification to combobox library to use:
$("#cbCountry").combobox('disable');
$("#cbCountry").combobox('enable');
In your combobox.js file add:
in _create: function() add local variable "a" (after var input, a ...).
Change input = $("<input>") to input = this.input = $("<input>").
Change a = $("<a>") to a = this.a = $("<a>").
Insert after destroy:
disable: function() {
this.input.prop('disabled',true);
this.input.autocomplete("disable");
this.a.button("disable");
},
enable: function() {
this.input.prop('disabled',false);
this.input.autocomplete("enable");
this.a.button("enable");
}
I had to disable the combo box on click of button in my web application. Thanks to the people who have commented here. I was able to figure how to disable and enable the combo box as and when required. The code is as follows.
The below code is for disabling the combo box
$("#MyComboboxId").parent().find("input.ui-autocomplete-input").autocomplete("option", "disabled", true).prop("disabled",true);
$("#MyComboboxId").parent().find("a.ui-button").button("disable");
The above JavaScript code finds the HTML elements for the ID and rest is explained in the above posts.
The below code is for enabling the combo box
$("#MyComboboxId").parent().find("input.ui-autocomplete-input").autocomplete("option", "disabled", false).prop("disabled",false);
$("#MyComboboxId").parent().find("a.ui-button").button("enable");
That code is for initializing a disabled combobox. If you want to disable an existing combobox, use this:
$("#cbCountry").combobox("option", "disabled", true);
UPDATE
Combobox is a separate jQuery UI widget, and it seems it does not implement these options. I was able to disable it by finding the text field and button inside the widget, and disabling those:
$("#cbCountry").closest(".ui-widget").find("input, button" ).prop("disabled", true)