I wanted to create a layout for a webapplication.. creating a BorderLayout over the document body, adding a contentPanel (wherein's either a TabPanel or other Widgets) with a toolbar.. but the toolbar simply doesn't show up :(
Am I totally wrong with that BorderLayout or where's the problem?
init : function() {
var layout = new Ext.BorderLayout(document.body, {
center: {
autoScroll: true,
initialSize: 300,
maxSize: 300,
minSize: 200
}
});
var toolbar = layout.getEl().createChild({tag:'div'});
toolbar.id = Ext.id( toolbar, 'toolbar');
var content = layout.getEl().createChild({tag:'div'});
content.id = Ext.id( content, 'content');
var tb = new Ext.Toolbar(toolbar);
tb.addButton( {text: 'testButton'});
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel( content), { toolbar: tb });
layout.endUpdate();
},
layout.getRegion('center').getEl()
You could also add a north region and put the toolbar there.
ah, therefore one div ( for the 'center' region) is already inserted in the DOM after I created a BorderLayout with just one region?
If you are just starting out with Ext development I suggest that you start with Ext 2.0. Generally things are much easier due to some key architectural changes. Ext 2.0 handles most of the DOM manipulation for you and you rarely have to worry about where a certain element is in relation to another. In 2.0 all panels support both top and bottom toolbars by specifying a tbar or bbar config option.
Therefore to create a panel with a top toolbar in 2.0:
var myPanel = new Ext.Panel({
renderTo: Ext.getBody(),
tbar: [{text: 'testButton'}],
html: 'Some sample Content'
})
As to your problem in the 1.1.1 code above, the toolbar div needs to be created in the regions div rather than the borderlayout's div. Try something like this:
var toolbar = layout.getRegion('center').getEl().createChild({ta g: 'div', id: 'toolbar'});
#If you have any other info about this subject , Please add it free.# |