Develop Reference

Unable to close closable tabs and to activate tabs

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 there a way to determine if drawerPanel is open or closed?

Or rather, a native method already defined in polymer source? I'm sure I could write up a function to handle the logic pretty easily, but I've done some digging and haven't come up with anything regarding an already implemented method of determining this. Just want to know if I'll have to write up something myself or not.
Edit: Just realized, even if I did write a tagalong function that tracks when the drawer is opened/closed via toggleDrawer(), it'd get thrown off when the drawer is swiped open or swiped closed, so I sure hope there is a native method for this.
Edit: Using info from the page #Justin XL linked me, I did some testing and found that general opening of closing of the drawer, via swipe, or drawer button press, fired 2 core-selected events, but closing via clicking a drawer item fired 4. I've managed to throw together a solution that should be able to determine at any point if the drawer is open or closed based on 2 vars.
drawerOpenIgnoreClose = false;
drawerOpen = false;
drawerEvent = 0;
drawer.addEventListener('core-select', function() {
drawerEvent++;
//console.log('drawerpanel event fired ' + drawerEvent);
if (drawerEvent >= 2) {
if (drawerOpenIgnoreClose) {
drawerOpenIgnoreClose = false;
console.log('drawer is closed, not from click of menu item');
} else {
drawerOpenIgnoreClose = true;
console.log('drawer is open');
}
drawerEvent = 0;
}
});
And drawerOpen is set to false every time drawerPanel.closerDrawer() is called, which is every time a menu item is clicked. I can then determine for certain if the drawer is open with
function checkDrawer() {
if (drawerOpen && drawerOpenIgnoreClose) {
console.log('drawer is definitely open');
return true;
} else if (!drawerOpen || !drawerOpenIgnoreClose) {
console.log('drawer is definitely closed');
return false;
}
}
It's yet to fail me with a button outside of the drawer and a button inside the drawer that run checkDrawer() (both return open/closed respectively), but I'll do some more testing. I don't even know if this is the simplest or even correct way of handling this but it seems to work and I'm happy.
Edit again: Managed to find an issue, if the drawer panel is swiped open, checkDrawer() will return closed. More logic will fix it I'm sure. gonna make some adjustments.

I suppose you meant core-drawer-panel.
There's a narrow attribute which tells you whether the panel is in a narrow layout or not.
Alternatively, you can subscribe to core-responsive-change event and use detail.narrow to determine.
You can read more from here.

Cannot use Bootstrap collapse functionality with Angular routing

UPDATE #2: I've implemented a button and UI Bootstrap and got the menu functioning without Angular Routing taking over, however, I can't get the menu to collapse after selecting a menu item and rerouting.
UPDATE: As per the suggestion, I've updated the above listener to this (to no effect):
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});
All of the Angular code for this app seems to be in js/compiled.min.js - if something is wrong, surely it'd start here, right?
I have inherited some work from a previous developer that has some funky code which is causing me a bit of a headache. If you visit http://www.executionists.com/#/ in Chrome and change the viewport to a mobile device, you'll see that the menu doesn't work as it does when it's in a larger viewport.
When you click the menu button Angular tries to route the page which of course results in a 404. I cannot for the life of me figure out why it's trying to route and how to prevent it. Things that I've tried.
Using UI Bootstrap in the manner listed here (under Collapse section): http://angular-ui.github.io/bootstrap/
One thing to note is that I had to put the following fix in place to fix another bug where angular routing was not allowing for browser history to function. A common problem, I have discovered. When I put the fix in place, routing and history function as desired for the entire site, however, I am suspicious of this being the cause of my mobile-friendly collapsible menu bug. The fix:
// This is required for links to work properly with the browser history
$('[ng-app]').on('click', 'a', function() {
window.location.href = $(this).attr('href');
});
I don't know what to do about this or even how to best diagnose the issue.

You are targeting all links with that listener, perhaps be more specific:
$('a:not([data-toggle="collapse"])').click(function (e) {
var url = $(e.currentTarget).attr('href') || '#';
if (!(url.charAt(0) == '#')) {
window.location.href = url;
}
});

How to autohide YUI2 Menu on blur?

I have a YAHOO.widget.Button of the type "menu". My task is simple: The menu is shown when the user clicks on the button, and is hidden when the user clicks elsewhere on the screen.
Here's my code on jsfiddle:
http://jsfiddle.net/tRssn/
What I've tried so far:
1. Setting the clicktohide property of the Menu widget to true (see above code)
and
2. Subscribe to the blur event on the Button/Menu widget and close the menu if it's visible.
Approach 1 doesn't work for some reason and approach 2 works with IE and Mozilla, but not Chrome.
Shouldn't there be an easy way to do this?
Any help appreciated!

Okay, I was able to solve this by explicitly creating a YAHOO.widget.Menu object, rendering it, and then assigning it as the menu to the YAHOO.widget.Button object.
http://jsfiddle.net/tRssn/1/
Strangely, I have to set the config for the Menu widget like this instead of at the time of the creation:
oButton.getMenu().cfg.config.clicktohide.value = true;

How to disable browser context menu on Ext.menu.Menu's items?

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.