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.
Related
I found 2 similar questions ont stackoverflow, but it didn't help.
I'm using VueJS and semantic-ui modal.
According to my structure of code, each time i call the "show modal" method, a new modal is added to the source page with the same id :
<div id="myModal ...>
So finally the content of this modal is wrong and not expected because the changes are in the last modal (conflict id). But anyway duplicating the modal code is wrong.
So i made a jsfiddle to be clear : https://jsfiddle.net/3ut5d9uu/5/
To reproduce the bug :
click on "open modal", you see the name "a"
click on "change name", open modal, the name has changed (just appending "x"), this is ok. You can repeat if you want.
click on "change page", you go to page 2, click again to go to page 1
"change name" has now no effect in the modal content.
Help to debug : i can see in my developement browser that each time "openModal" is called, a full code is added at the end at the DOM and never removed :
<div class="ui dimmer modals page inverted transition hidden">
<div id="myModal"...
So we have several same ids "myModal".
But i could'nt fix that.
Thanks for your help.
As mentioned in the comment, there's a conflict between vue and jquery
Vue uses a shadow dom that adds and removes items as needed
jQuery relies on the item remaining in the DOM the entire time.
this conflict happens when you go from one page to another.
While I would strongly recommend removing jquery, in favour of something like https://github.com/almino/semantic-ui-vue2, there is a way to handle this.
here is the working fiddle
https://jsfiddle.net/3ut5d9uu/6/
this is done through a couple key things,
maintaining scope of dome by tracking it within vue. Here we assign reference to the jQuery modal object to a vuew data object
,mounted: function () {
this.modalDom = $('#myModal').modal({ inverted: true, closable: false });
}
you will also need to add modalDom to data
let dataPage1 = {
name: 'a',
modalDom: null
};
and then use that to show/hide modal
openModal: function() {
this.modalDom.modal('show');
},
closeModal: function() {
this.modalDom.modal('hide');
},
voilà, Bob = yourUncle;
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
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.