PDA

View Full Version : Defining toolbar outside the tabpanel and retrieving it inside tabpanel's items Ext4



StutiAwasthi
6 Oct 2011, 11:08 PM
Hi . . .
I am trying to define the toolbar outside the tabpanel in which it is supposed to be docked at the top.
I don't know how to retrieve it inside the tabpanel's items.
Following is the way i tried inside the tab, but the toolbar doesn't appear on the tab.
items : [new Ext.toolbar.Toolbar(tb)]
please suggest the correct way.

CODE SNIPPET:

tb=Ext.create('Ext.toolbar.Toolbar', {
contentEl: 'tb',
dock: 'top',
items: [
{
xtype: 'combobox',
width: 183,
fieldLabel: 'Search Results By'
},
{
xtype: 'textfield',
width: 69
// fieldLabel: ''
},
{
xtype: 'button',
text: 'Search',
cls : "x-btn-text-icon",
handler : function() {
CDD.ManageFunction.filterGrid(grid,filterBySelect.getEl().value, searchString.getEl().value);
}
},
{
xtype: 'button',
text: 'Clear',
icon : 'images/icons/reset.gif',
handler : function() {
cancelGrid();
}
},
{
xtype: 'tbtext',
text: 'Note: Right click on Column to sort'
}
]
});

arcan9ne
7 Oct 2011, 4:32 AM
If I understand correctly, you want your toolbar displayed in the tab, correct? If so, try the following instead of items:



xtype: 'tabpanel',
tbar: tb


This toolbar will be displayed at the top of every one of your tabs.

Now if you want to retrieve the toolbar from the tabpanel to be used in one of your tabs (for whatever reason, adding items to it, etc..), give your toolbar an itemId such as:



Ext.create('Ext.toolbar.Toolbar',{
itemId: 'my_toolbar',
etc......
})
whatever_panel_I_want_to_get_the_toolbar_for.getDockedComponent('my_toolbar').

StutiAwasthi
3 Nov 2011, 1:55 AM
Thank you . . . :)