PDA

View Full Version : Sugegstion :: New syntax for BorderLayout declaration



manugoel2003
6 Feb 2007, 2:39 AM
Hi all... I have an idea.... instead of doing this


layout.add('north', new YAHOO.ext.ContentPanel('north'));
layout.add('east', new YAHOO.ext.ContentPanel('east'));
layout.add('center', new YAHOO.ext.ContentPanel('center'));
layout.add('west', new YAHOO.ext.ContentPanel('west'));
layout.add('south', new YAHOO.ext.ContentPanel('south'));

How abt doing it like this


layout.add({
'north': new YAHOO.ext.ContentPanel('north'),
'east': new YAHOO.ext.ContentPanel('east'),
'center': new YAHOO.ext.ContentPanel('center'),
'west': new YAHOO.ext.ContentPanel('west'),
'south': new YAHOO.ext.ContentPanel('south')
});

I see 2 benefits
1. The code is much more readable and maintainable
2. There is only one call to the add method

A nested BorderLayout can then be created simply like this


layout.add({
'north': new YAHOO.ext.ContentPanel('north'),
'east': new YAHOO.ext.ContentPanel('east'),
'center': new YAHOO.ext.ContentPanel('center'),
'west': new YAHOO.ext.ContentPanel('west'),
'south': new YAHOO.ext.NestedLayoutPanel({
'east': new YAHOO.ext.ContentPanel('innereast'),
'west': new YAHOO.ext.ContentPanel('innerwest')
})
});

or maybe we can do away with NestedLayoutPanel altogether and use ContentPanel for that as well.... and maybe we can think of an alternate way to create ContentPanels instead of making so many calls and making the code confusing..... maybe something like this....


layout.add({
'north': {id: 'north', title: 'North Region'},
'east': {id: 'east'},
'center': {id: 'center'},
'west': {id: 'west'},
'south': {
'east': {id: 'innerEast'},
'center': {id: 'innerCenter'}
}
});

There can be one problem though, while adding gridPanel, treePanel or any other future panel, it might become difficult to identify the panel type.... however, I am sure it can be tackled too.....

What do u ppl think??.... it might not be such a good idea, but I am sure it is not completely crap :D

Animal
6 Feb 2007, 3:51 AM
A nested BorderLayout can then be created simply like this


layout.add({
'north': new YAHOO.ext.ContentPanel('north'),
'east': new YAHOO.ext.ContentPanel('east'),
'center': new YAHOO.ext.ContentPanel('center'),
'west': new YAHOO.ext.ContentPanel('west'),
'south': new YAHOO.ext.NestedLayoutPanel({
'east': new YAHOO.ext.ContentPanel('innereast'),
'west': new YAHOO.ext.ContentPanel('innerwest')
})
});


That looks like a really good idea to me.

kalebwalton
6 Feb 2007, 6:03 AM
I second that motion.

Webnet
6 Feb 2007, 7:38 PM
I third that notion..... waiting on jack's response...

SteveEisner
7 Feb 2007, 6:46 PM
I like the simplicity of multiple adds; not sure you can get away with eliminating the BorderLayout definition that goes with that NestedLayout reference?

jack.slocum
8 Feb 2007, 12:48 AM
There's a new shortcut already in the build. It's not quite as simple as yours, but yours doesn't expose config options, which are critical.

NestedLayouts will always have to be defined.

It's being used in the selector benchmarking app. Here's what the code looks like:


var layout = Ext.BorderLayout.create({
center: {
panels: [
new Ext.GridPanel(grid, 'View Test Results'), {
el: 'test-data',
fitToFrame: true,
autoScroll: true,
title: 'View Test Elements',
background:true
}, {
el: 'app-code',
fitToFrame: true,
autoScroll: true,
title: 'View JS Source',
background:true,
url: 'selectors.js.html',
loadOnce: true
}, {
el: 'bench-mgr',
fitToFrame: true,
autoScroll: true,
title: 'View BenchMgr class',
background:true,
url: 'BenchMgr.js.html',
loadOnce: true
}],
autoScroll:false,
alwaysShowTabs:true,
tabPosition:'top',
title: 'CSS Selector and Basic XPath Testing and Benchmarks',
margins: {top:5,left:5,right:5,bottom:5}
}
});

Internally it puts in the update calls for you. It accepts a few shortcuts as well, such as a simple string id for a basic panel (instead of declaring the content panel object), 'el' attribute + CP config and you can include standard panels as well.

manugoel2003
8 Feb 2007, 1:53 AM
[Ed. - I had already composed this looooong post when I saw Jack's reply. So I didnt feel like not posting it :)]

good point.... the BorderLayout definition completely skipped my mind.... so how abt this... I want a layout like this
http://img222.imageshack.us/img222/2261/sampleht3.jpg

Traditional way
HTML (I have skipped the obvious part of file inclusions etc)


<div id="compose" class="ylayout-inactive-content">
<div id="compose_top" class="ylayout-inactive-content"></div>
<div id="compose_bottom" class="ylayout-inactive-content"></div>
</div>
<div id="eastpanel" class="ylayout-inactive-content">
<div id="clientHistory" class="ylayout-inactive-content">
<div id="clientHistory_top" class="ylayout-inactive-content"></div>
<div id="clientHistory_bottom" class="ylayout-inactive-content"></div>
</div>
<div id="clientProfile" class="ylayout-inactive-content">
<div id="clientProfile_top" class="ylayout-inactive-content"></div>
<div id="clientProfile_bottom" class="ylayout-inactive-content"></div>
</div>
</div>

JS


e11compose = function(){

/*------------------
Layout variables
------------------*/
var layout, composeLayout, clientHistoryLayout, clientProfileLayout, answerBookLayout;

return {
init : function(){
getEl("loading").hide();

layout = new YAHOO.ext.BorderLayout(document.body, {
center: {
split: true,
titlebar: false
},
east: {
split: true,
initialSize: 200,
titlebar: true,
collapsible: true,
animate: true
}
});

composeLayout = new YAHOO.ext.BorderLayout("compose", {
north: {
split: false,
titlebar: false,
initialSize: 215
},
center: {
split: false,
titlebar: false
}
});

clientHistoryLayout = new YAHOO.ext.BorderLayout("clientHistory", {
center: {
split: true,
titlebar: false
},
south: {
initialSize: 300,
split: true,
titlebar: true,
collapsible: true,
animate: true
}
});

clientProfileLayout = new YAHOO.ext.BorderLayout("clientProfile", {
center: {
split: true,
titlebar: false
},
south: {
initialSize: 300,
split: true,
titlebar: true,
collapsible: true,
animate: true
}
});

var CP = YAHOO.ext.ContentPanel;
var NLP = YAHOO.ext.NestedLayoutPanel;

layout.beginUpdate();
composeLayout.add('north', new CP('compose_top', 'Compose'));
composeLayout.add('center', new CP('compose_bottom'));
layout.add('center', new NLP(composeLayout));

clientHistoryLayout.add('center', new CP('clientHistory_top'));
clientHistoryLayout.add('south', new CP('clientHistory_bottom'));
layout.add('east', new NLP(clientHistoryLayout, {title: 'Client History'}));

clientProfileLayout.add('center', new CP('clientProfile_top'));
clientProfileLayout.add('south', new CP('clientProfile_bottom'));
layout.add('east', new NLP(clientProfileLayout, {title: 'Client Profile'}));

layout.getRegion("east").getTabs().activate(0);
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(e11compose.init, e11compose, true);

And the JS with the new syntax


e11compose = function(){

/*------------------
Layout variables
------------------*/
var layout, composeLayout, clientHistoryLayout, clientProfileLayout, answerBookLayout;

return {
init : function(){
getEl("loading").hide();

layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
center: {
split: true,
titlebar: false,
layout : {
id: "compose",
north: {
id: "compose_top",
split: false,
titlebar: false,
initialSize: 215
},
center: {
id: "compose_bottom",
split: false,
titlebar: false
}
}
},
east: {
split: true,
initialSize: 200,
titlebar: true,
collapsible: true,
animate: true,
layout: [{
id: "clientHistory",
title: "Client History",
center: {
id: "clientHistory_top",
split: true,
titlebar: false
},
south: {
id: "clientHistory_bottom",
title: "Ticket Details",
initialSize: 300,
split: true,
titlebar: true,
collapsible: true,
animate: true
}
},{
id: "clientProfile",
title: "Client Profile",
center: {
id: "clientProfile_top",
split: true,
titlebar: false
},
south: {
id: "clientProfile_bottom",
title: "Assets",
initialSize: 300,
split: true,
titlebar: true,
collapsible: true,
animate: true
}
}]
}
});
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(e11compose.init, e11compose, true);

As you can see, there is not much reduction in LOCs.... but the code is much more readable now, extremely simple and there is only one call to create a layout and rest is handled internally...... One problem that I see in this approach is not being able to store different layout objects in variables, but that can be gotten rid of if we can have an alternate way of accessing layout hierarchy....

[Ed. And Jack, I have included the config options as well in this method]

manugoel2003
11 Feb 2007, 1:16 AM
Jack, I see that our methods are almost identical.... what I am calling "layout", you are calling it "Panels".... what I am calling "id", you are calling it "el".... so whichever method you use, it does not matter... I am sure there would be complications when you say that NestedLayouts have to be defined, but I guess it would be much simpler to define them in one go..... would that be possible?? not necessarily in 0.40 though ;)... u can take ur time

manugoel2003
28 Mar 2007, 1:38 PM
Hi Jack,

After a long absence, I am back into the interactive mode..... I had a thorough look at Ext 1.0 today.... it sure has turned out to be very interesting now, with forms and the new grid etc (the new architecture of the grid was a bit confusing though)

Anyways, I am reopening this thread coz I want to know what has been finalised in this regard.... looking at the code it seemed to me that it is the same as you mentioned above.... has anything changed?

BTW, congratulations on Ext 1.0 in advance..... its already a big hit :)