1. #1
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24
    Vote Rating
    0
    Jehu is on a distinguished road

      0  

    Default Insert new item to a panel from 'outside'...

    Insert new item to a panel from 'outside'...


    Why does this not work?

    Code:
    var cockpit = Ext.getCmp('cockpit'); // This is a Panel in a TabPanel
    var sidebar = Ext.create('Ext.panel.Panel',{
        region: 'east',
        width: '200px',
        html: '<h1>TEST</h1>',
        collapsible: true
    });
    cockpit.add(sidebar);
    I see the new Item in Firebug as second item in region 'east' (after 'center'), but it will not be rendered.

    What am I doing wrong?

  2. #2
    Sencha User
    Join Date
    Apr 2010
    Location
    Berlin
    Posts
    19
    Vote Rating
    0
    vollchraZ is on a distinguished road

      0  

    Default


    Hi Jehu,

    if your panel "cockpit" is already rendered, you have to call cockpit.doLayout() after adding.

  3. #3
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24
    Vote Rating
    0
    Jehu is on a distinguished road

      0  

    Default


    Thank you, but panel still does not appear.

    Code:
    var cockpit = Ext.getCmp('cockpit'); // This is a Panel in a TabPanel
    var sidebar = Ext.create('Ext.panel.Panel',{
        region: 'east',
        width: '200px',
        html: '<h1>TEST</h1>',
        collapsible: true
    });
    cockpit.add(sidebar);
    cockpit.doLayout(); // so?
    Ext.getCmp('cockpit').doLayout(); // or so?

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Location
    Berlin
    Posts
    19
    Vote Rating
    0
    vollchraZ is on a distinguished road

      0  

    Default


    Both. :-)

  5. #5
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24
    Vote Rating
    0
    Jehu is on a distinguished road

      0  

    Default


    So sorry,
    i've startet now with a blank new html with ExtJS4 pre5 and do this:

    Code:
    var cockpit = Ext.create('Ext.panel.Panel',{
      id:'cockpit',
      layout:'border',
      title:'TEST',
      renderTo:Ext.getBody(),
      width:'600px',
      height:'300px',
      items: [{
        xtype: 'panel',
        id:'center',
        html: 'center',
        region: 'center'
      },{
        xtype: 'panel',
        id:'south',
        html: 'south',
        region: 'south'
      }]
    });
    
    var sidebar = Ext.create('Ext.panel.Panel',{
        region: 'east',
        width: '200px',
        html: 'east',
        id:'sidebar',
        collapsible: true
    });
    
    cockpit.add(sidebar);
    Ext.getCmp('center').doLayout();
    Ext.getCmp('cockpit').doLayout();
    Ext.getCmp('sidebar').doLayout();
    Sidebar won't come up.

  6. #6
    Sencha User
    Join Date
    Apr 2010
    Location
    Berlin
    Posts
    19
    Vote Rating
    0
    vollchraZ is on a distinguished road

      0  

    Default


    You're right.
    The problem is in the Ext.layout.container.Border. It initializes the regions only once on creation.
    Code:
    onLayout: function() {
            var me = this;
            if (!me.borderLayoutInitialized) {
                me.initializeBorderLayout(); //this method renders the regions and sets borderLayoutInitialized to true
            }
            ...
    }
    Another option is that you can add your sidebar as a docked item to your center region.
    Code:
    var sidebar = Ext.create("Ext.panel.Panel", {
      dock: 'right',
      ...
    });
    
    Ext.getCmp('center').addDocked(sidebar);
    greetings vollchraZ

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,018
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    BorderLayout has never been able to add items after initialization. I'm not sure why it was designed this way but it has.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User Jehu's Avatar
    Join Date
    Feb 2011
    Posts
    24
    Vote Rating
    0
    Jehu is on a distinguished road

      0  

    Default


    Thank you all.
    At the API Docs i've found the information too now (see "Notes")...
    The hint there is to create a dummy panel inside and replace the content later. That's the way i go, because i need a collapsible panel, not a dock.

Similar Threads

  1. How do you insert an item into a store?
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 22 Oct 2010, 12:28 PM
  2. Insert item to Grid Store and let the row fade in
    By grandfatha in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 9 Oct 2009, 4:54 AM
  3. How to insert an item(button) between...
    By Joey Kwon in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 16 Jul 2009, 5:34 PM
  4. Insert item comboBox
    By Perfect Lion in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 11 Oct 2007, 10:21 PM

Thread Participants: 2