PDA

View Full Version : Reusing toolbar in different panels



jolitinh
17 Nov 2009, 8:59 PM
I created a tool bar that merely contains tbtext, and I'm trying to reuse it among different panels in my application; however, it only gets rendered on the first one. Here is some simple code to demonstrate what I'm talking about:


topBar = new Ext.Toolbar({
height : 25,
margins : '15',
items : [
{
xtype : 'tbtext',
text : 'HELLO'
}
]
})


testPanel = new Ext.Panel({
width : 400,
height : 400,
renderTo : Ext.getBody(),
items :[
{
title : 'panel 1' ,
html : ' Panel 1',
height : 200,
tbar : topBar
},
{
title : 'panel 2',
html : 'Panel 2',
height : 200,
tbar : topBar
}
]

})

If you run this code, you will notice that only the first panel gets the Toolbar, but not the second panel. Any ideas? Thanks in advance.

evant
17 Nov 2009, 9:51 PM
You can only use one component in one place. You should use factory function to create it:



function createToolbar(){
return new Ext.Toolbar({
height: 25,
margins: '15',
items: [{
xtype: 'tbtext',
text: 'HELLO'
}]
});

}

testPanel = new Ext.Panel({
width: 400,
height: 400,
renderTo: Ext.getBody(),
items: [{
title: 'panel 1',
html: ' Panel 1',
height: 200,
tbar: createToolbar()
}, {
title: 'panel 2',
html: 'Panel 2',
height: 200,
tbar: createToolbar()
}]

});

jolitinh
17 Nov 2009, 10:56 PM
Thanks evant. For some reason I was under the impression you could just reuse the components without having to create multiple instances of it.