Results 1 to 6 of 6

Thread: BorderLayout - Dynamic center region changes

  1. #1

    Default BorderLayout - Dynamic center region changes

    Hi I am having some simple conceptual issues with the border layout using the center region container that Jay Garcia has wonderfully explained through screencasts and in his book, both of which I have looked over (Thanks so much for your hard work Jay, your work has been a great resource). My layout is West (my links and a details window) and Center (to display the content associated with the clicked link). In my case the content that is to be changed dynamically in the center region are all extended components. So here are my 3 vars of content:

    Code:
    var usersaddpanel = {
        xtype: 'edituserform',
        id:'usersaddpanel'
    };
    
    var usersviewtype1panel = {
        xtype: 'userlistgrid',
        type: '1',
        id:'usersviewtype1panel'
    };
    
    
    var usersviewtype2panel = {
        xtype: 'userlistgrid',
        type: '2',
        id:'usersviewtype2panel'
    };
    Now in my layout manager I am using the common tree click function:

    Code:
    treePanel.on('click', function(n){
            var sn = this.selModel.selNode || {}; // selNode is null on initial selection
            if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
            Ext.getCmp("centerRegion").removeAll();
            Ext.getCmp("centerRegion").add(n.id +'panel'); 
            Ext.getCmp("centerRegion").doLayout();
     }
        });
    The problem I am having is on the line: Ext.getCmp("centerRegion").add(n.id +'panel'). I receive an 'item is undefined' error in firebug. If I hardcode it to an id -> Ext.getCmp("centerRegion").add(usersviewtype1panel) it works for that panel. I am not exactly sure if my lazy instantiation is causing this issue whereby the object is not being created or if I am missing something in my component extension. Can anybody offer any suggestions?

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

    Default

    Use

    Code:
    {
        xtype: 'container',
        region: 'center',
        id: 'centerRegion',
        layout: {
            type: 'card',
            activeItem: 0
        }
        items: [ usersaddpanel, usersviewtype1panel, usersviewtype2panel ],
    }
    Then read up about CardLayout

  3. #3

    Default

    Thanks Animal I appreciate your quick response, I should have gotten into card Layout when I wrote the post. When I implemented the card Layout before it worked, however this is going to be a reasonable large application and with the dataset that I was testing with, I could already see a performance degradation using cards. Is there another way that this could work without hardcoding variable names?

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

    Default

    What have variable names got to do with performance degradation?

    If you want to remove and destroy cards, in order to free up memory, feel free to do so.

  5. #5

    Default

    Sorry, Animal I miscommunicated what I meant. When I said that I was referring to adding the object directly by calling the variable name. That seems to be my issue. When I use card layout I can set active with

    Code:
    Ext.getCmp('content-panel').layout.setActiveItem(n.id + 'panel');
    But when I am trying to add I cant add new components to the container. For instance, this will not work:

    Code:
    Ext.getCmp("centerRegion").add(n.id +'panel');
    Even though echoing out n.id+'panel' is the variable name. But if I put the variable name in directly it will work:

    Code:
    Ext.getCmp("centerRegion").add(usersviewtype1panel);
    I have even tried to use Ext.getCmp(n.id) within the add and still get comp is undefined. Is there something that I missed that can clear this up for me in the Help docs?

    Thanks

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

    Default

    Variable names have no bearing on anything whatsoever.

    At some point you have to instantiate a Component. Then you add it to the card Container. Simple as that.

Similar Threads

  1. No center region defined in BorderLayout
    By caio in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 5 Dec 2009, 6:41 AM
  2. moving contentPanel from center borderlayout region to west borderlayout region
    By qwerty_qwerty in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 29 May 2008, 10:27 AM
  3. replacing center region of borderlayout
    By hkatz in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 28 Nov 2007, 6:32 AM
  4. Borderlayout Center Region
    By saipradeep in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 16 Nov 2007, 10:18 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
  •