violinista
07-06-2007, 08:16 AM
Hello, today I had very ... hm, strange situation and I want to share it with all of you.
In app which I develop with ExtJs I am using contentPanel with North, West, South and center regions. In center region I have a few tabs (which are: application modules ;)) and they're loaded and executed dinamically, via setUrl method and scripts:true config property, as in this (shortened) example:
var layout = new Ext.BorderLayout(document.body, {
north:{/*config...*/},
west:{/*config...*/},
south:{/*config...*/},
center:{/*config...*/},
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
layout.add('west', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
layout.add('south', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
//creating center (module) panels:
var module1= new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here...*/ });
module1.setUrl({ url: 'module1.js', scripts: true});
layout.add('center', module1);
var module2= new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here...*/ });
module2.setUrl({ url: 'module2.js', scripts: true});
layout.add('center', module2);
layout.endUpdate();
As you can see, I am automatically creating all app stuff, and without need to write some <div>'s here and there.
In one module, I must use three regions:that means, I have to use NestedLayoutPanel. But, I tried this:
module2.js:
var panel= myApp.getLayout().findPanel("module2");
var innerLayout= new Ext.BorderLayout(panel.el,{
north: { /*config options */ },
east: { /*config options */ },
center: { /*config options */ }
});
innerLayout.layout();
...and it worked! I produced nested layout into tabPanel without using NestedLayoutPanel! Is it some undocumented solution, or is it recommended/not recomended or is it considered bad or good practice? I was surprised that I achieved this without using NestedLayoutPanel.
layout() method is used to refresh this innerLayout; without it, it is not working properly.
Please, comment this situation and advise me - is it correct/recommended, or I have to switch to NestedLayoutPanel.
Note: this is working for me, and perfectly suit my needs.
Note2: in my main layout, I tried to produce NestedLayoutPanel first and then to load module 2, but, sadly, my NestedLayoutPanel disappeared when script used setUrl. I suppose it is default behavior.
In app which I develop with ExtJs I am using contentPanel with North, West, South and center regions. In center region I have a few tabs (which are: application modules ;)) and they're loaded and executed dinamically, via setUrl method and scripts:true config property, as in this (shortened) example:
var layout = new Ext.BorderLayout(document.body, {
north:{/*config...*/},
west:{/*config...*/},
south:{/*config...*/},
center:{/*config...*/},
});
layout.beginUpdate();
layout.add('north', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
layout.add('west', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
layout.add('south', new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here ...*/ }));
//creating center (module) panels:
var module1= new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here...*/ });
module1.setUrl({ url: 'module1.js', scripts: true});
layout.add('center', module1);
var module2= new Ext.ContentPanel(Ext.id(), {
autoCreate:true /*more config options here...*/ });
module2.setUrl({ url: 'module2.js', scripts: true});
layout.add('center', module2);
layout.endUpdate();
As you can see, I am automatically creating all app stuff, and without need to write some <div>'s here and there.
In one module, I must use three regions:that means, I have to use NestedLayoutPanel. But, I tried this:
module2.js:
var panel= myApp.getLayout().findPanel("module2");
var innerLayout= new Ext.BorderLayout(panel.el,{
north: { /*config options */ },
east: { /*config options */ },
center: { /*config options */ }
});
innerLayout.layout();
...and it worked! I produced nested layout into tabPanel without using NestedLayoutPanel! Is it some undocumented solution, or is it recommended/not recomended or is it considered bad or good practice? I was surprised that I achieved this without using NestedLayoutPanel.
layout() method is used to refresh this innerLayout; without it, it is not working properly.
Please, comment this situation and advise me - is it correct/recommended, or I have to switch to NestedLayoutPanel.
Note: this is working for me, and perfectly suit my needs.
Note2: in my main layout, I tried to produce NestedLayoutPanel first and then to load module 2, but, sadly, my NestedLayoutPanel disappeared when script used setUrl. I suppose it is default behavior.