Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: How to use showPanel with BorderLayout

  1. #1

    Default How to use showPanel with BorderLayout

    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:

    and then my JS is:

    Code:
    	<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.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Read your code

    Simplified a lot have

    Code:
    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?

  3. #3

    Default

    Quote Originally Posted by Animal
    Read your code

    Simplified a lot have

    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    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
    Code:
    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.

  5. #5

    Default

    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?

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    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.

  7. #7

    Default

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

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Quote Originally Posted by Bobafart
    Quote Originally Posted by Animal
    Read your code

    Simplified a lot have

    Code:
    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.

  9. #9

    Default

    Quote Originally Posted by Animal
    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...

  10. #10

    Default

    By the way is this:

    Code:
    var obj = function() {
        return {
            trainTroops: function() {
            {
        }
    }();
    what is also called Object Notation (aka JSON)?

Page 1 of 2 12 LastLast

Similar Threads

  1. modal dialog and borderlayout inside a borderlayout tab!!!
    By vtswingkid in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 22 Feb 2007, 4:40 PM
  2. hidePanel / showPanel Tab missplace
    By rizakoyt in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 12 Dec 2006, 2:24 PM
  3. BorderLayout - showPanel
    By brant in forum Community Discussion
    Replies: 1
    Last Post: 28 Oct 2006, 10:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •