1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default Dynamiclly add TabPanel to Viewport's [center] region

    Dynamiclly add TabPanel to Viewport's [center] region


    Hey guys,

    I'm developing a kind of accountant system for my dad and my own company but I'm a little stuck right now. I am using a TreePanel as a menu and thus on 'dblclick', I want to change the title of the center region and thus add a component or what ever. Now, I've already created a center region, like so:

    Code:
    }, {
        id: 'iasx-view-center',
        region: 'center',
        title: 'Test',
        margins: '5 0 0 0',
        html: 'Test'
    }, {
    Now that I've got that, you can see that I've named it iasx-view-center. Grabbing that with viewPort.getComponent('iasx-view-center') or Ext.getCmp('iasx-view-center'), this works perfectly and I am able to change the name - all teh funneh stuff. The problem however, I want to RENDER a TabPabel INSIDE this box and change/delete those as I need it. Sometimes a form, a grid, a tabpanel, panel or container. What ever you want.

    Now the question remains; HOW? I've tried the ADD function, insert, there is no kind of adopt function ... Well, I already lost about 2 hours to this problem. Am I overlooking something?

    Thanks in advance!

    /edit
    SOME of my previous attempts:

    Works perfectly
    Code:
    //Ext.getCmp('iasx-view-center').setTitle('Configuratie ยป Mijn gegevens');
    Works like charm, removes the ENTIRE center
    Code:
    //this.get('Viewport').remove('iasx-view-center');
    Did most definitly NOT work
    Code:
    /*Ext.getCmp('iasx-view-center').add(new Ext.TabPanel({
        title: 'wot',
        items: [{
            title: 'huh',
            html: 'he!'
        }]
    }));*/

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default


    Oh shoot, I missed this topic. I couldn't sworn that this didn't work, but it does!

    Solution: http://www.sencha.com/forum/showthre...port-on-th-fly

    Code:
    this.get('Viewport').getComponent('iasx-view-center').removeAll();
    
    this.get('Viewport').getComponent('iasx-view-center').add(
        new Ext.TabPanel({
            title: 'wot',
            items: [{
                title: 'wot',
                html: 'hehe'
            }]
        })
    );
    
    this.get('Viewport').doLayout();
    Perhaps there is a way to completely REPLACE a 'panel' from the ViewPort?

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default


    Hey guys,

    Sorry to keep bumping my topic, but after a couple of days of development I've bumped into another problem. I'm dynamically adding panels to the center region and so eventually also a FormPanel with a tabs. Now, using the deferredRender, this should work fine, but it doesn't do anything with this function. Can anybody explain how this can be so?

    Thanks!

  4. #4
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    You, sir, are in violation of the Ext Space Laws of 2000.

    Why are you doing all this? The correct paradigm to use in your situation is a card layout in the center (maybe a tab panel). Then when the user selects a node from the tree, you change the active item to correspond to that selection. Then you're not doing all this dynamic stuff. Is there some exterior reason for dynamically modifying everything as opposed to creating a general panel for each selection and wrapping them in a container with card layout.

    Code:
    new Ext.Viewport({
      layout: 'border',
      items: [{
        region: 'center',
        layout: 'card',
        activeItem: 0,
        items: [{
          id: 'wotPanel',
          html: "This is the wot panel",
          title: 'WoT Panel'
        }, {
          id: 'configPanel',
          html: 'This is the config panel',
          title: 'Config Panel'
        }]
      },
      {
        region: 'west',
        //tree
        ...
      }]
    });
    Wes

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default


    I was only aware of the rules from 1969. Then again, smoking pod all day isn't a good thing. :P

    The reason I do this, is every time a panel will be replaced with another. I've got like 5 grids already which need to be deleted when another is called uppon. I am not that aware of all the functions that Ext offers, but I am well on my way in my program.

    Simply put, this system is meant for administration of my accountant files (like debtors and creditors). So, every function has it's own grid. Naturally I would render them all as items in the center panel, but that means it requests about 50 stores at one time.

    If there is a native, more safe and functional function for this, please tell me so.

    Oh by the way, in the meantime I've fixed my problem by simply outputting a ID'd div in the html from the center viewport, thus rendering to that div. Also, I have a couple of extra options built in for account management. The more accounts, the more grids. For example: a mySQL table dump is ALWAYS the same, but records fetched by account ID are dependant on the number of accounts.

  6. #6
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    But why do the grids need to be deleted? The idea of a card layout is that you have an array of cards, and only present one card at a time to the user. So you could have a set of grids assosciated with one card, and when you want to show another one, you just hide it. See the deferredRender property for card layout managers.
    Wes

  7. #7
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default


    Sounds something I should look into... Could you give a simple example of implementation?

  8. #8
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    Sure. Check out what Saki's examples have.
    Wes

  9. #9
    Ext User
    Join Date
    Jun 2010
    Posts
    22
    Vote Rating
    0
    ReSpawNnL is on a distinguished road

      0  

    Default


    Alright, I've modified my script so that it uses the CardLayout, which works fine. Now the problem STILL remains, the TabPanel's deferredRender functions doesn't do anything for me.

    I dynamically ADD a component to the CardLayout when a item in the menu is clicked.
    The FormPanel encapsualtes the xtype'd 'tabpanel' with a deferredRender: false config included. Now, getting the FORMPANEL by it's ID like so:

    Code:
    alert(Ext.getCmp('iasx-form-newrelation-acc'+config.id).getForm().getValues().toSource());
    Give's me the only FORM on the activated TAB, so I need to physically CLICK every single tab to fetch ALL forms. How can I fix this? :/

    A short snip of the ITEMS inside the FormPanel:
    Code:
    items: [{
        border: false,
        deferredRender: false,
        height: 500,
        padding: 5,
        activeTab: 1,
        xtype: 'tabpanel',
        items: [{
            title: 'Relatie',
            layout: 'form',
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name',
                anchor: '100%',
                name: 'name'
            }, {
                // ... More fields here
            }]
        }, {
            // And about 4 tabs here
        }]
    ])

Similar Threads

  1. Add TabPanel to west region of viewport
    By rnankani in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Jun 2009, 7:58 AM
  2. Viewport region center retain position
    By stanleyc in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Jun 2008, 10:13 AM
  3. Viewport: further customizing the 'center' region
    By ngd in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Apr 2008, 9:17 PM
  4. ViewPort center region
    By keztrel in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 29 Nov 2007, 7:59 AM

Thread Participants: 1

Tags for this Thread