PDA

View Full Version : .disable() component in vbox layout?



drian
7 May 2011, 9:06 AM
Is it me or there's a a weird thing happening when i disable an item that's inside a vbox layout?

I have 2 grids inside a vbox layout, both with flex: 1 = they are 50% of the total height. I'm trying to disable them both, but when i do this, the lower grid simply disappears /:).

Am i missing something? thanks

code from ext designer:


MyPanelUi = Ext.extend(Ext.Panel, {
title: 'Proprietar',
flex: 1,
margins: '0 10 0 0',
layout: 'vbox',
initComponent: function() {
this.layoutConfig = {
align: 'stretch'
};
this.items = [
{
xtype: 'grid',
title: 'My Grid',
flex: 1,
margins: '0 0 5 0',
disabled: true,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
],
view: new Ext.grid.GridView({

})
},
{
xtype: 'grid',
title: 'My Grid',
flex: 1,
disabled: true,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100
}
],
view: new Ext.grid.GridView({

})
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});

drian
9 May 2011, 8:26 AM
no one? :(

i've narrowed it down to an even simpler situation:

Have a vbox or hbox layout inside a panel. Have 2 child panels inside it. Now if i set the 1st child panel as disabled, all is ok...but when i set the 2nd one as disabled... it's simply not shown.

Extending the test case, it seems that when in a vbox or hbox layout, IF a child is set to disabled, the following disabled items will not display.

test code: - simply put it inside ext designer and see that panel 2 isn't showing



MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
layout: 'hbox',
initComponent: function() {
this.layoutConfig = {
align: 'stretch'
};
this.items = [
{
xtype: 'panel',
title: 'panel 1',
flex: 1,
disabled: true
},
{
xtype: 'panel',
title: 'panel 2',
flex: 1,
disabled: true,
html: 'asdasdsad'
},
{
xtype: 'panel',
title: 'panel 3',
flex: 1
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});


I simply cannot see what i'm doing wrong. Is this how it's supposed to be?

drian
27 Jul 2011, 12:48 AM
I'm resurrecting this thread as I still cannot find a proper solution to this issue. Can any one give me a solution or point me into the right direction? thanks!