how to dinamically add tab with form built in a view

[brunoflmg]

Hello guys, I'm new to Extjs.


I have two views:
- List
- Edit (form to insert / edit data)


And I have a form created in view and when I pressing a button on the toolbar of a grid I need this form to open in a new tab in my TabPanel which is in viewport.


I know I can do it by popular CRUD which opens a modal window that contains the form to insert and edit my registry. However the requirement is that the form should be displayed in a new tab.


I have the following code in my insert button of the grid (the code is in my controller):


click: function () {
var viewport = Ext.getCmp ('viewPortPrincipal');
viewport.down ('#tabCenter'.) add ({
title: record.get ('text') | | 'Screen System'
closable: true,
layout: 'fit',
autoDestroy: true,
items: {
how can I render my form from my view here?????
}
}). show ();
}

Executing this code I have the following error: viewport is undefined.


Thank you.

[Tim Toady]

Ext.getCmp returns the component with the id that you pass as the parameter. If it is undefined, you probably don't have it set on your viewport. Honestly though, you should avoid using static id's and Ext.getCmp. It sounds like you are using MVC, in which case I would recommend using refs.
http://docs.sencha.com/ext-js/4-1/#!...oller-cfg-refs

[scottmartin]

See if this will help:
http://jsfiddle.net/Gx9ft/

Scott.

[brunoflmg]

Really helpfull Scott. (come to Brazil and I'll pay you a beer)

But my real difficult is...

1. How to get the viewport object, and
2. How to get the tabPanel object, and
3. How to add a tab in this tabPanel (famous #tabCenter) with my form defined in a view

I have a grid displayed in an opened tab. This grid has a toolbar with insert and edit buttons. The event of these buttons was fired by my controller and will open a new tab and call my form (defined in my view) and add then to this new tab.



This new version 4 has a MVC that is more complex to me.

Thanks again...

[scottmartin]

Please review the following:

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            itemId: 'mytab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});

var viewport = Ext.ComponentQuery.query('viewport'); // only 1 viewport in app
var tab = Ext.ComponentQuery.query('viewport > panel');

console.log(viewport);
console.log(tab);

Scott.

[brunoflmg]

It's works man... thanks a lot!

[brunoflmg]

Hello Scott,

I tested your code in JSFIDDLE and I had the object correctly. But... once the screen is rendered... if I use the code below I get the object properly, as I mentioned in the previous answer. However when making a call to a function add the Ext triggers the following exception:


TypeError: tab.add is not a function

var tab = Ext.ComponentQuery.query('viewport > panel');
console.log(tab);


newTab = tab.add({
      title: 'Test',
      html: 'test test test'
}).show();


 tab.setActiveTab(newTab);

In firebug I see that the component query returns the correct object. In its properties you can see even the title of the current tab open (activeTab property).


So ... why an exception was triggered by nonexistent function if the returned object is valid and has this function (according to the documentation)?

Object description from console.log:

$className "Ext.tab.Panel"    
_isLayoutRoot false    
activeTab Object { title= "Pessoa", closable= true, layout={...}, more...}    
alias ["widget.tabpanel"]    
allowDomMove true    
alternateClassName ["Ext.TabPanel"]
[...]

[Tim Toady]

Perhaps your tab is actually an array....

[brunoflmg]

The Firebug says that is a object. From console.log(tab):

console.png

[scottmartin]

You need to add to the tabPanel

var viewport = Ext.ComponentQuery.query('viewport'); // only 1 viewport in app
var tab = Ext.ComponentQuery.query('viewport > panel');
var tabPanel = Ext.ComponentQuery.query('viewport > tabpanel');

console.log(viewport);
console.log(tab);
console.log(tabPanel);
​

Scott.