How to use showPanel with BorderLayout

[Bobafart]

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]

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]

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]

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]

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-ex...derLayout.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]

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]

thanks, I will keep reading and learning and tinkering with Jack's examples.. I will understand this stuff one day...

[Animal]

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]

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/viewtop...asc&highlight=

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

[Bobafart]

By the way is this:

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

what is also called Object Notation (aka JSON)?