PDA

View Full Version : TabPanel, how to hide a tab? I need to restore later on.



zlevardy
19 Sep 2012, 11:16 AM
hi,

I am having a tab what does not need to show unrelated users. I have not found a way to simply hide it. That's why needed to be removed. But then I am facing to an issue to restore it, with a selection event. This part is not working.

Is this possible to hide?

If not, what the problem with my event restore ?



restoreOthersTab: function() {
var othersTab = {
xtype: 'editOthersList',
itemId: 'editOthersTabPanel',
title: 'Others'
};
Ext.ComponentQuery.query('#editTabPanel')[0].add(othersTab);

//also restore select event:
Ext.ComponentQuery.query('#myEditController')[0].control({
'editOthersList': { selectionchange: Ext.ComponentQuery.query('#myEditController')[0].onOthersEditSelect }
});
},


hideOthersTab: function() {
if (Ext.ComponentQuery.query('#editOthersTabPanel')[0]!=undefined) {
Ext.ComponentQuery.query('#editTabPanel')[0].remove(1);
}
}


the event listener made on controller creation:


Ext.define('MyApp.controller.Edit', {
extend: 'Ext.app.Controller',

itemId: 'myEditController',

stores: [...],
models: [...],
views: [...],

init: function() {
this.getEditOthersStore().load();

this.control({
'editMyList': { selectionchange: this.onMyEditSelect },
'editOthersList': { selectionchange: this.onOthersEditSelect }
});



},

onMyEditSelect: function(selModel, selection) {
...
},

onOthersEditSelect: function(selModel, selection) {
...
},
...
}


thx,
Zol

zlevardy
19 Sep 2012, 11:24 AM
this is a wrong reference to controller:


Ext.ComponentQuery.query('#myEditController')

any different way to access?

thx

zlevardy
20 Sep 2012, 3:24 AM
i have expected this to hide a tab on tabPanel, but do nothing:

Ext.ComponentQuery.query('#editMyTabPanel')[0].hide()

there is another topic, where suggested to set title '', but the tab remains clickable, and confusing as shown.

No hints? :(

zlevardy
25 Sep 2012, 3:31 AM
there is a way to show/hide:

Ext.ComponentQuery.query('#editTabPanel')[0].getComponent(1).tab.hide();

The only pain comes with IE8: I do hide it, when tabpanel is not visible, then earlier tab outline shown (empty) until mouse hover over on it.

Any hint refreshing tabpanel somehow, or the tab itself?

thx

zlevardy
27 Sep 2012, 6:05 AM
on extjs3 it was tabpanel.doLayout(true);

Is there any similar for 4.1?

on IE8 this will reproduce any time you like:


tabpanel.getComponent(1).tab.show();
tabpanel.setVisible(false);
tabpanel.getComponent(1).tab.hide();
//doLayout(true) like refresh needs here
tabpanel.setVisible(true);


thx