open Ext.BorderLayout from/in desktop.createWindow

[gotcha]

I am trying to open a borderlayout in a window using the below code. Want to add additional features to the various other objects like accordion to east pane, etc... to the individual panes.


Example.PanelWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'panel',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('PanelWindow');
// var iframe = Ext.DomHelper.append(document.body,
// {tag: 'iframe', frameBorder: 0, src: src.url, height: '100%'});
// Using the above as an example
var sFrame = new Ext.BorderLayout(document.body,{
west: {
autoScroll:true,
split:true,
initialSize: 240,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
autoScroll:true,
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
autoScroll:true,
tabPosition: 'top',
split:true,
initialSize: 200,
minSize: 100,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
split:true,
titlebar: true,
autoScroll:true,
closeOnTab: true,
animate: true
}
});

if(!win){
win = desktop.createWindow({
id: 'PanelWindow',
title:src.text,
width:770,
height:480,
x:10,
y:10,
iconCls: 'icon-grid',
cls:'x-panel-blue',
frame: true,
shim:true,
animCollapse:true,
constrainHeader:true,
layout: 'fit',
position:'relative' ,
items: [sFrame]
});
}
win.show();
}
});


Example.SearchMenu = Ext.extend(Example.PanelWindow, {
init : function(){
this.launcher = {
text: 'Search',
iconCls:'',
menu : {
items:[{
text: 'Panel',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});
I get the error 'Error: The object doesn't support this property or method'.

What am I doing wrong here? Is there a better way to do this?

[gotcha]

Ok, I was able to get this working by re-arranging some of the code as shown below -


Example.PanelWindow = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'panel',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},

createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('PanelWindow');
if(!win){
win = desktop.createWindow({
id: 'PanelWindow',
title:src.text,
width:770,
height:480,
x:10,
y:10,
iconCls: 'icon-grid',
cls:'x-panel-blue',
frame: true,
shim:true,
animCollapse:true,
constrainHeader:true,
position:'relative'
});

var sFrame = new Ext.BorderLayout(win.body,{
west: {
autoScroll:true,
split:true,
initialSize: 240,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
autoScroll:true,
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
autoScroll:true,
tabPosition: 'top',
split:true,
initialSize: 200,
minSize: 100,
titlebar: true,
collapsible: true,
animate: true
},
center: {
autoScroll:true,
split:true,
titlebar: true,
autoScroll:true,
closeOnTab: true,
animate: true
}
});

sFrame.beginUpdate();
sFrame.add('west', acc);
// sFrame.add('center', grid); --> How to make this work?
sFrame.endUpdate();

}
win.show();
}
});


Example.SearchMenu = Ext.extend(Example.PanelWindow, {
init : function(){
this.launcher = {
text: 'Search',
iconCls:'',
menu : {
items:[{
text: 'Panel',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});

But, I am see one problem - the accordion is not sitting flush within the 'west' region. There seems to be some gap between the accordion and the 'west' region. Any ideas on how to solve this?

I am also wonderinf how to add a grid to the 'center' region. Any ideas?

What am I doing wrong here? Is there a better way to do this?[/QUOTE]