Assume I have a menu (Ext.menu.Menu) with some items. When menu is shown user cat right-click on it's item and browser context menu will be shown (with elements like "Save link as...").
How can I disable that browser context menu? Globally in all Ext.menuMenu instances if possible.
possibly solved
Works for single menu instance:
contextMenu.on('render', function (menu) {
menu.getEl().on('contextmenu', Ext.emptyFn, null, {preventDefault: true});
});
For all instances you could do it this way:
Ext.override(Ext.menu.Menu, {
render : function(){
Ext.menu.Menu.superclass.render.call(this);
this.el.on("contextmenu", Ext.emptyFn, this, {preventDefault: true});
}
});
You may also want to do something similar for toolbars if needed.
Related
I made a fiddle which demonstrates these issues. The first issue is that it is impossible to close closable tabs in a TabBar. The code is as simple as:
Ext.create("Ext.tab.Bar",{
renderTo: "one",
items:[{"text":"One","closable":true},{"text":"Two","closable":true}]
});
Documentation says, that
closable : Boolean bindable
True to make the Tab closable and display the close icon
So, this property is not only about this close icon, but also about this behaviour to be closed.
The second issue I face is that it is impossible to activate tabs added to a tabpanel through a tabbar. The code is also very simple:
Ext.create("Ext.tab.Panel",{
renderTo: "two",
id: "test2",
items:[{"title":"One","closable":true},{"title":"Two","closable":true}],
listeners: {
render: function () {
this.getTabBar().add({"text":"Three"});
}
}
});
Just try to activate this last tab and you will fail. And if you set active property on this tab, then you won't be able to deactivate this tab. So, how can we fix all this?
TabBar is used internally by a Ext.tab.Panel and typically should not
need to be created manually.
The tabbar's implementation relies on the fact that it is a part of a tabpanel. If we dig in it's source, we will see that in the "closeTab" method implementation it checks if there is an underlying card to close:
if (tabPanel && card) {...
Related to the second behavior, if you will check out the "doActivateTab" method implementation, also in the tabbar source code, this is what you will see:
doActivateTab: function(tab) {
var tabPanel = this.tabPanel;
if (tabPanel) {
// TabPanel will call setActiveTab of the TabBar
if (!tab.disabled) {
tabPanel.setActiveTab(tab.card);
}
} else {
this.setActiveTab(tab);
}
}
So if there is no tabpanel, it will just activate the tab, if there is, it will call the tabpanel's "setActiveTab", that if it doesn't find a card attached to the tab-to-be-activated, activates the previous tab.
You should not add directly to the tabbar, instead add to the tabpanel:
this.add({"title":"Three"});
Here's a working fiddle. Seems like setactivetab needs to be after render.
Is it possible to activate a tab using javascript in Material Design Lite?
I want to activate a tab using the links inside mdl-layout__drawer?
Is there a function for that?
No problem. I assume you want everything in the drawer to mirror your tabs. If you want to only have certain items activate tabs and not all, just adjust the last line in the sample code, maybe add a "drawer-tab-clicker" class if you want to single out which links activate tabs and which don't. I wanted them all, so the sample below does all the drawer links.
You should give your drawer links the same exact href hashes as the tab you want to activate, then do some magic jQuery ...
function opentab() {
var draweritem = this;
var target = $(draweritem).attr('href');
$('.mdl-layout__obfuscator').click();
$('a[href='+target+'].mdl-layout__tab span').click();
return false;
}
$(".mdl-layout__drawer a").on('click',opentab);
This grabs the drawer item you just clicked on, reads the href it's pointing to, then clicks the "obfuscator" to close the drawer and then finds the layout tab based on that href. It then clicks on the span inside the link (yeah, not the link itself).
Works for me!
Currently toggling tabs programatically isn't supported.
You would need to reverse how tabs are toggled and implement your own function to handle the same logic.
I'm not sure if this is the right place to ask. I have site I'm working with that uses EXTjs and the tabpanel functionality. I'm creating the tab in the following form.
tabWrapper = Ext.create('Ext.panel.Panel', {
layout: 'fit',
tools: tools,
id: tabConfig.itemId+'-wrapper',
title: tabConfig.title,
hidden: tabConfig.hidden,
hideMode: 'offsets',
closable: tabConfig.closable,
Please notice the closable tag. When set to enable/true it creates an x button to close the tab. This button however is closing whatever tab is active instead of the tab it is attached to. Is this a known glitch or is there something in my code that does this?
I suspect it is because of non-unique ids. Using ids in Ext is a very bad practice that almost always leads to problems. Remove id config option (not only from this tab) and try again.
Also, do not overnest - you do not need to wrap a component in a panel for adding it to tab panel.
I am setting up a small shop using simpleCart.js and Bootstrap 3.
For displaying the cart I was hoping to use an off-canvas panel that I have enabled using the Jasny-bootstrap add-on. Everything works fine but when I eliminate elements from the cart the off-canvas panel closes. This way the user his unable to modify content in the cart without having to reopen the panel after each click. How can I keep the panel open until the user chooses to close it?
Here is an FIDDLE demonstrating the issue
From looking at this snippet from (link straight to code) simpleCart.js - line 337-353, am I right in assuming that once you remove an item it reloads the cart and therefore it causes the panel to close? If this is the case, then how would a version of this code look like to fix my problem?
// empty the cart
empty: function () {
// remove each item individually so we see the remove events
var newItems = {};
simpleCart.each(function (item) {
// send a param of true to make sure it doesn't
// update after every removal
// keep the item if the function returns false,
// because we know it has been prevented
// from being removed
if (item.remove(true) === false) {
newItems[item.id()] = item
}
});
sc_items = newItems;
simpleCart.update();
},
Thank you in advance :)
The option autohide controls if the navbar should be closed when a user clicks outside of it. Setting it to false, means it stays open until the user clicks on the 'CLOSE PANEL HERE' link.
See the fiddle
Note that normally the navmenu doesn't close when clicked on a link inside of it. I'm not sure why this is happening in your case.
How do I remove the focus of any tab on a tabPanel in Sencha Touch? I am opening up a different dialog that does not have a tab in the tabPanel, and I want to represent that so that the user doesn't get confused. How do I do this? Calling views.tabPanel.setActiveItem(-1) and views.tabPanel.setActiveItem(null) don't work. Any ideas?
I think , for tabpanel, it is also require one and only one tab active.
Not sure. I'm also a newbie to js and sencha touch.
FYI, for Sencha Touch 2 I've implemented the following. Note however, that it is a workaround, so take it with a grain of salt.
In my app.js
...
setActiveTab: function(idOfTabToActiveOrNull) {
var tb = Ext.Viewport.getDockedComponent('your-tabbar-id');
if (tb && !idOfTabToActiveOrNull) {
var at = an.getActiveTab();
if (at) { at.setActive(false); }
// Note that this only changes style, but the tab is still "active" in the tabbar
} else if (an) {
tb.setActiveTab(idOfTabToActiveOrNull);
tb.getActiveTab().setActive(true); // just to be sure it's marked
}
},
...
Use it like this:
YourApp.app.setActiveTab(null); // remove styles for active tab
YourApp.app.setActiveTab('id-of-other-tab'); // change to different tab