Tudom, a CENTER tag és társait sokan már rég eltemették, ám néhány esetben kifejezetten hasznos. (pl. ha egy konténerben az elemeket középre akarjuk helyezni, amire eredetileg is kitalálták:)
Ext.ns('Ext.ux.layout');
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout,{
onLayout: function(ct, target) {
if(!this.innerCt) {
this.innerCt = target.createChild({tag:'center'});
}
this.renderAll(ct, this.innerCt);
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.ContainerLayout,{
onLayout: function(ct, target) {
if(!this.innerCt) {
this.innerCt = target.createChild({tag:'center'});
}
this.renderAll(ct, this.innerCt);
}
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;
Mindennek előnye más center layoutokkal szemben, hogy az elemhez nem teszünk hozzá extra osztályt, mely megoldások néha furcsa következményekkel járhatnak.
pl. Ext.Button.initButtonEl része az alábbi kód:
if(this.iconCls){
btnEl.addClass(this.iconCls);
if(!this.cls){
btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
}
}
btnEl.addClass(this.iconCls);
if(!this.cls){
btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
}
}
A belső feltétel úgy kaphat hamis értéket, hogy közben nem is számítunk rá.
A fenti layout használata meg a következő:
new Ext.Panel({
layout: ’ux.center’,
...
});
layout: ’ux.center’,
...
});
