PDA

View Full Version : How to use showPanel with BorderLayout



Bobafart
17 Feb 2007, 10:06 AM
Hi, I am tinkering with BorderLayout.

I would like to click a link in my center panel to cause a new panel to show in the west panel.

So if I have the following in my center panel:



Train Soldiers (#)


and then my JS is:



<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 25,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true
}
});

var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
// bogus object as a data source
propsGrid.setSource({
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
});
propsGrid.render();
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: false}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: false}));
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Overview', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Army', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center3', {title: 'Navy', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center4', {title: 'Air Force', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.endUpdate();
},

toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
},

trainTroops : function(link){

layout.getRegion('west').showPanel('west1');

}
}

}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);


I keep getting the error that "trainTroops" is not a defined function in Firebug.

Jack's "toggleWest : function(link)" is no different and it works.. I assume I am not defining my function properly but I have basically followed Jack's example using the toggleWest function and it still doesn't work.

Animal
17 Feb 2007, 10:14 AM
Read your code

Simplified a lot have



var obj = function() {
return {
trainTroops: function() {
{
}
}();


Do you understand what that does? What you have as a result of that statement, and how to access it?

Bobafart
17 Feb 2007, 11:23 AM
Read your code

Simplified a lot have



var obj = function() {
return {
trainTroops: function() {
{
}
}();


Do you understand what that does? What you have as a result of that statement, and how to access it?

thank you for simplifying it.

from reading (many) tutorials about oo js, the object returns the trainTroops function.

tryanDLS
17 Feb 2007, 11:36 AM
No, it doesn't. You now have an object called obj, which exposes a public method called traintroops. traintroops does not exist in the global namespace - you can't just reference it by name.

Even if you coded your onclick method as


onclick=obj.traintroops(this)

you'd probably still have issues. When the method runs, 'this' will point to the 'a' element, not obj - is that what you want. You won't be able to access anything in obj with 'this'.

While it's nice to be able to throw a handler on an HTML element, it's not the right way to do it. These types of issues are why we continue to tell people to not wire events in HTML - you will always have scope issues to deal with. Separate the presentation (HTML) from processing (JS) and you'll have fewer problems to deal with.

Bobafart
17 Feb 2007, 11:55 AM
thank you for the rapid response.

why then in Jack's code does he use toggleWest() as a public method when there is no toggleWest() listed in the docs for BorderLayout?

http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.BorderLayout.html


While it's nice to be able to throw a handler on an HTML element, it's not the right way to do it. These types of issues are why we continue to tell people to not wire events in HTML - you will always have scope issues to deal with. Separate the presentation (HTML) from processing (JS) and you'll have fewer problems to deal with.

I presume you would suggest adding a Listener that listens for the link to be clicked .. if it is clicked then the west pane updates.. would that be the correct way of doing it rather that wiring it into the HTML?

tryanDLS
17 Feb 2007, 12:13 PM
It's not a method of BorderLayout, it's a method of Example. Look at the code - the link is invoking Example.toggleWest(this).

Also, in this case, the 'this' ref is pointing to Example when you execute toggleWest. So in your previous example - obj.traintroops(this), 'this' will point to obj. However this is still not a great way to do it - anybody that's used to old-school JS event wiring is going to think that 'this' is the 'a' element b/c that's how it works when you code global methods.

Bobafart
17 Feb 2007, 12:16 PM
thanks, I will keep reading and learning and tinkering with Jack's examples.. I will understand this stuff one day...

Animal
17 Feb 2007, 12:22 PM
Read your code

Simplified a lot have



var obj = function() {
return {
trainTroops: function() {
{
}
}();


Do you understand what that does? What you have as a result of that statement, and how to access it?

thank you for simplifying it.

from reading (many) tutorials about oo js, the object returns the trainTroops function.

And this is the problem with using cut/past code in all your pages. You never actually get to write your own code which would help you understand things. You've been using that pattern in all your pages and you can't read what it does.

That code defines an anonymous function (it has no name between "function" and "()").

It calls it immediately - the "()" at the end is the argument list.

The object that is returned by that function's "return" statement is stored in the variable "obj".

So now, look at how that returned object is created. In javascript objects are delimited between "{" and "}" and consist of name:value pairs.

So the property "trainTroops" is set to be a function (again, anonymous - don't need another reference to that function, as "trainTroops" is going to be your reference it.

Bobafart
18 Feb 2007, 4:39 AM
And this is the problem with using cut/past code in all your pages. You never actually get to write your own code which would help you understand things.

I couldn't agree with you more. Part of the problem is that I just don't "get it" -- like oil and water JS and I don't mix. I can't write my own code from scratch because I just don't understand it enough. I post and learn from other JS forums (like codingforums.com) and read tutorials and just don't "get it".

Which is why I started an idea:
http://www.yui-ext.com/forum/viewtopic.php?t=2801&start=0&postdays=0&postorder=asc&highlight=

I hope you will contribute to it so that I can learn more...

Bobafart
18 Feb 2007, 4:47 AM
By the way is this:



var obj = function() {
return {
trainTroops: function() {
{
}
}();


what is also called Object Notation (aka JSON)?

Bobafart
18 Feb 2007, 4:56 AM
another question:


DED.Class = function() {
var fn = function(e, id, param, o) {
// process arguments here
};
return {
init : function() {
var o = DED.Class.get('el');
fn.apply(o, arguments);
},
get : function(id) {
return document.getElementById(id);
}
};
}();


why is



get : function(id) {
return document.getElementById(id);
}


considered public?? It is buried in the DED.class and it isn't in the return { } -- so how can it be a public member??

Animal
18 Feb 2007, 7:06 AM
By the way is this:



var obj = function() {
return {
trainTroops: function() {
{
}
}();


what is also called Object Notation (aka JSON)?

I wouldn't say so, I'd just say it's Javascript.

JSON is a neat name given to the concept of sending javascript object literals* (as a string) to the browser to be evaluated into an object.

So, if you received "{foo:'bar'}", from a YAHOO.util.Connect call, it would come back in o.responseText, you'd do



var myObj = eval("(" + o.responseText + ")");


And you would have, in myObj a refernec to an object that has a property called "foo" with a value of "bar".

* Google that term, it might help.

Animal
18 Feb 2007, 7:08 AM
another question:


DED.Class = function() {
var fn = function(e, id, param, o) {
// process arguments here
};
return {
init : function() {
var o = DED.Class.get('el');
fn.apply(o, arguments);
},
get : function(id) {
return document.getElementById(id);
}
};
}();


why is



get : function(id) {
return document.getElementById(id);
}


considered public?? It is buried in the DED.class and it isn't in the return { } -- so how can it be a public member??

Read the code!!! Read my explanation above. Look what's happening!

"DED.class"

What do you think that is? Do you think it is a function? READ the code carefully now.

tryanDLS
18 Feb 2007, 9:49 AM
You need to read that code a little more closely. It's returning 2 methods - init and get. They're both inside return {...}