Failed to maintain 100% width & height of structure in extjs
- by ayanonly1
HI,
i am new in extjs.
i want to build a page using extjs
____________
|HD__________|
| p1 <| p2 |
| | |--will be a viewport (will resize on window resize without any
| | | Scroll bar
| | |
| | |
| | |
|___|_____|
HD-- heading with 100 width
p1-- panel 1 which will collapse on west and split = true
p2-- panel 2 which will occupy remaining place
i build the structure but failed to maintain it 100 % even on window resize
bellow is my code
EditorUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Heading',
autoHeight: true,
autoWidth: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
title: 'Navigation',
collapsible: true,
region:'west',
width:200,
split:'true',
margins:'3 0 3 3',
cmargins:'3 3 3 3'
},
{
xtype: 'panel',
title: 'container',
region:'center',
autoHeight: true,
autoWidth: true,
split:'true',
margins:'3 0 3 3',
cmargins:'3 3 3 3'
}
]
}
];
EditorUi.superclass.initComponent.call(this);
}
});
Ext.onReady(function(){
new EditorUi();
})
thanks in advance
