I am working on an app that has 5 panels on top of each other. I want to use the layout:'border'
so that I can take advantage of split:true
config. Imagine a table with 5 rows each re-sizable and representing a panel.
Example:
frame: false,
width: 700,
border: false,
height: 600,
stateful: false,
layout: 'fit',
items:
{
layout: 'border',
items:
[
{
region: 'north',
split: true,
minWidth: 350,
border: false,
frame: false,
layout: 'fit',
title:'NNNNN',
margins: '0 0 0 0',
items: []
},
{
region: 'center',
split: true,
minWidth: 350,
border: false,
frame: false,
layout: 'fit',
title:'AAAAA',
margins: '0 0 0 0',
items:
{
layout: 'border',
items:
[
{
region: 'north',
.......
},
{
region: 'center',
.......
},
{
region: 'south',
..........
}
]
}
},
{
region: 'south',
split: true,
minWidth: 350,
border: false,
frame: false,
layout: 'fit',
title:'CCCCCCCC',
margins: '0 0 0 0',
items: []
}
]
}
I was also thinking about using Resizer
but I have another problem here. This is the class I was using in ExtJs 3.4 and it was working:
Ext.define('myapp.ResizablePanel',
{
extend : 'Ext.panel.Panel',
alias : 'widget.reszpanel',
handles : 's',
resizePanel: function()
{
this.syncSize();
this.updateLayout();
if (this.layout)
this.doLayout(true, true);
},
onRender:function()
{
this.callParent(arguments);
this.resizer = new Ext.Resizable
({
el: this.getEl(),
handles: this.handles,
minHeight: 120,
maxHeight: 20000
}).on("resize", this.resizePanel.bind(this));
}
});
This was helpful, instead of xtype: 'panel'
, I was using xtype: 'reszpanel'
and everything was working fine until I updated the code to ExtJS 4.2. Now this.syncSize()
function does not exist in Components and I do not know which newer function does this. That is way tried to implement using border layout.
The problem is that when I have only one north, east, west, south, and center, everything is fine. But when I try to nest layouts, the code breaks. Any help? Thanks