New BorderLayout, how to create from notes page

[mth96a]

I am trying to start playing with border layouts and can not get the example to load, i get this.el has no properties.

I have a notes page with the html header that the default page does and then i have this in the js header.


var layout = new Ext.BorderLayout(document.body, {
north: {
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true
},
center: {
titlebar: true,
autoScroll:true,
resizeTabs: true,
minTabWidth: 50,
preferredTabWidth: 150
}
});

// shorthand
var CP = Ext.ContentPanel;

layout.beginUpdate();
layout.add("north", new CP("north", "North"));
layout.add("south", new CP("south", {title: "South", closable: true}));
layout.add("west", new CP("west", {title: "West"}));
layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
layout.getRegion("center").showPanel("center1");
layout.endUpdate();

[jratcliff]

Hi mth96a,

I think that what's happening is that your code is running before the rest of the page has rendered and thus your code can't find the divs on your page that you are trying to add to the various regions of the borderlayout.

One way to fix this is to wrap all of this code into a function and then call this function during the onLoad event. Or, you can use Ext's onReady method to call your code. Either will work but the Ext.onReady will probably execute a little sooner than onLoad.

~Jack