There are four regions in extjs for border layout i.e
- West
- Center
- East
- South.
from which Center is must means in your layout u must define Center layout
----------------------------Main Panel With Border Layout--------------------------
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.panel.Panel', {
height: 650,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 200,
split: true, // enable resizing
margins: '0 5 5 5'
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true,
split: true,
id: 'west-region-container',
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
xtype: 'panel',
margins: '5 0 0 0',
width: 200,
collapsible: true,
split: true,
id: 'east-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0',
items: tab_panel
}],
renderTo: Ext.getBody()
});
}
});
var tab_panel = Ext.widget('tabpanel', {
region: 'center',
border: false,
activeTab: 1,
defaults :{
bodyPadding: 5,
autoScroll:true
},
items: [{
id:'dashbord',
title:'Dashbord',
bodyPadding: 0,
layout: 'border',
},
{
id: 'grid',
title: 'Grid & Store',
bodyPadding: 0,
layout: 'fit',
items: stock_in_grid
}
],
listeners: {
'tabchange': function(tabPanel, tab){
if(tab.id == "dashbord") {
}else if(tab.id == "grid") {
}
}
}
});
Comments
Post a Comment