PDA

View Full Version : Tool bar button hiding issues.



aaman
21 Aug 2014, 5:29 AM
Hello I am working on a functionality in which i have to show/ hide buttons inside the toolbar in a tab panel.

I see that for some tabs , the button shows isVisible() is false and hidden : true, still the button is visible.

This is how i am iterating through all the items in that tab and hiding a button:

Ext.Array.each(component.query('.textfield, .checkbox, .button,), function(item){
if (item.xtype == 'button') {
if (!item.hidden) {
item.hidden = true;
}
........
Following is a sample toolbar i am using to hold buttons:

xtype: 'toolbar',
border: 0,
layout: 'hbox',
height: 50,
items:[
{
xtype: 'button',
cls: ...
itemId: ....
frame: false,
text: ''TEST BUTTON'
}]


Thx

Aaman

Scott-1
21 Aug 2014, 8:40 AM
Not sure setting hidden triggers anything try setVisible(false)

aaman
21 Aug 2014, 9:18 AM
Thanks for reply Scott.
Tried using setVisible too, but no luck !
Ext.Array.each(component.query('.textfield, .checkbox, .button, .checkcolumn'), function(item){
if (item.xtype == 'button') {
if (item.isVisible()) {
item.setVisible(false);
}
..........

Scott-1
21 Aug 2014, 12:15 PM
Worked for me

Ext.define('Test.view.HidToolBar', { extend: 'Ext.toolbar.Toolbar',
width : 500,
alias: 'widget.hidToolBar',
itemId: 'hidToolBar',
id: 'hidToolBar',
items: [
{
// xtype: 'button', // default for Toolbars
text: 'Button',
handler : function(button, eOpt){
button.up().items.each(function(item){
if (item.xtype != 'button'){
item.setVisible(!item.isVisible());
}
});
}
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
// begin using the right-justified button container
'->', // same as { xtype: 'tbfill' }
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
},
// add a vertical separator bar between toolbar items
'-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
{ xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
'text 2',
{ xtype: 'tbspacer', width: 50 }, // add a 50px space
'text 3'
]
});