Dynamiclly add TabPanel to Viewport's [center] region

[ReSpawNnL]

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:

}, {
    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

//Ext.getCmp('iasx-view-center').setTitle('Configuratie » Mijn gegevens');

Works like charm, removes the ENTIRE center

//this.get('Viewport').remove('iasx-view-center');

Did most definitly NOT work

/*Ext.getCmp('iasx-view-center').add(new Ext.TabPanel({
    title: 'wot',
    items: [{
        title: 'huh',
        html: 'he!'
    }]
}));*/

[ReSpawNnL]

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

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?

[ReSpawNnL]

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!

[darthwes]

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.

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
    ...
  }]
});

[ReSpawNnL]

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.

[darthwes]

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.

[ReSpawNnL]

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

[darthwes]

Sure. Check out what Saki's examples have.

[ReSpawNnL]

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:

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:

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
    }]
])