Failed to maintain 100% width & height of structure in extjs

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

|          |             |

|          |         &nb开发者_如何学运维sp;   |

|          |             |

|____________|_______________|

---

• 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

CODE SNIPPET

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();
})

---

How can I implement this?

Please help me.

---

It looks like what you really want is a BorderLayout? Also, when you are using Ext layouts, do not use autoHeight -- that means "let the browser determine the height based on content" -- not what you want. Also, there is no need to override initComponent just to supply default configs. Try this instead (not tested):

EditorUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    items: [{
        xtype: 'panel',
        region: 'north',
        height: 100,                
        title: 'Heading',
    },{
        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',
        margins:'3 0 3 3',
        cmargins:'3 3 3 3'
    }];
});

Ext.onReady(function(){
    new EditorUi();
});