Adding panel to ViewPort (ExtJS)

Add Panels to ViewPort on the fly

1) Define ViewPort

viewport = Ext.create('Ext.container.Viewport', {

layout: {

type: 'border'

},

defaults: {

split: false

},

items: [{

region: 'center',

layout: 'border',

frame: false,

padding: '0 5 0 0',

border: false,

items: [{

region: 'center',

items: [

{

xtype: 'grid1'

}

]

}]

},

{

region: 'south',

frame: false,

padding: '0 5 0 0',

border: false

}

]

});

2) Add panel on the fly to defined region. In our example we are adding panel to "South" region

southRegion = viewport.getComponent(1);

southRegion .add(myPanel);

southRegion .setWidth(200);

southRegion .doLayout();