Sikerült ma néhány órányi felesleges munkát adni magamnak.
Eddig nem is néztem, mint kiderült a Viewport-nak nem lehet TopToolbar-t adni... sebaj, a megoldás egyszerű:
new Ext.Viewport({
layout: 'fit',
items: {
tbar: [{text:'Gomb'},{text:'Másik gomb'},{text:'Harmadik'}],
layout: 'border',
items: [
{region:'west', width:100, split:true},
{region:'east', width:100, split:true},
{region:'north', height:100, split:true},
{region:'south', height:100, split:true},
{region:'center'}
]
}
});
layout: 'fit',
items: {
tbar: [{text:'Gomb'},{text:'Másik gomb'},{text:'Harmadik'}],
layout: 'border',
items: [
{region:'west', width:100, split:true},
{region:'east', width:100, split:true},
{region:'north', height:100, split:true},
{region:'south', height:100, split:true},
{region:'center'}
]
}
});
És máris olyan, mintha a viewportnak lenne felső toolbar-ja. Csakhogy...
Csakhogy nem konkrétan ez a megoldás kellet nekem, hanem egy általános elemhez kellett utólag hozzátennem mindezt, olyan elemhez, melyhez dinamikusan adjuk hozzá az elemeit... A megoldás kb. létrehozzuk a panelt, a viewporthoz hozzárendeljük ezt a panelt, majd új elem hozzáadásakor a panelhez adjuk az elemeket.
Ez is egyszerű:
initComponent: function() {
...
this.panel = new Ext.Panel(this.initialConfig);
this.items = this.panel;
this.on('beforeadd', function(container, component, insert) {
this.panel.insert(insert, component);
return false;
});
...
...
this.panel = new Ext.Panel(this.initialConfig);
this.items = this.panel;
this.on('beforeadd', function(container, component, insert) {
this.panel.insert(insert, component);
return false;
});
...
Majd több órányi debug után rájöttem, hogy a panelt nem kell a panelhez adni...
this.on('beforeadd', function(container, component, insert) {
if (this.panel == component) { return true; }
this.panel.insert(insert, component);
return false;
});
if (this.panel == component) { return true; }
this.panel.insert(insert, component);
return false;
});
Mindezek ellenére azért szeretjük még az ExtJS-t. :)
