Alright. The topic title might not reveal all that is going on here, so I’ll keep it short.
I am trying to create a border layout with a west, south and center region. Rendering with the default code provided by the lovely people at Sencha (formally known as ExtJS), I get only a header with the title text.
return new Ext.Panel({
renderTo: 'testcmp-container',
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
layoutConfig: {
renderHidden: true,
},
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
height: 100,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});
Pretty default, eh? Well, it is. After checking out a couple of examples, I still haven’t figured it out. It used to be a piece of cake with other apps, but perhaps MODx is hiding some styles (or missing them).
If you check this link and click on "Border" under the foldout tree "Basic Ext Layouts", you get what I am trying to do.
http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
My code renders to the testcmp-container, which is returned by my controller (return ’<div id="testcmp-container"></div>’;).
What am I missing?
