1. #1
    Sencha User
    Join Date
    Sep 2008
    Location
    Brasil
    Posts
    21
    Vote Rating
    0
    brunoflmg is on a distinguished road

      0  

    Default how to dinamically add tab with form built in a view

    how to dinamically add tab with form built in a view


    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.
    _______
    Regards,
    Bruno Leite
    http://kinzaa.com/brunoleite

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    544
    Vote Rating
    96
    Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light

      1  

    Default


    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

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,076
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


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

    Scott.

  4. #4
    Sencha User
    Join Date
    Sep 2008
    Location
    Brasil
    Posts
    21
    Vote Rating
    0
    brunoflmg is on a distinguished road

      0  

    Default


    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...
    Last edited by brunoflmg; 26 Sep 2012 at 6:38 AM. Reason: better explanation
    _______
    Regards,
    Bruno Leite
    http://kinzaa.com/brunoleite

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,076
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    Please review the following:

    Code:
    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.

  6. #6
    Sencha User
    Join Date
    Sep 2008
    Location
    Brasil
    Posts
    21
    Vote Rating
    0
    brunoflmg is on a distinguished road

      0  

    Default


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

    _______
    Regards,
    Bruno Leite
    http://kinzaa.com/brunoleite

  7. #7
    Sencha User
    Join Date
    Sep 2008
    Location
    Brasil
    Posts
    21
    Vote Rating
    0
    brunoflmg is on a distinguished road

      0  

    Default


    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

    Code:
    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:

    Code:
    $className "Ext.tab.Panel"    
    _isLayoutRoot false    
    activeTab Object { title= "Pessoa", closable= true, layout={...}, more...}    
    alias ["widget.tabpanel"]    
    allowDomMove true    
    alternateClassName ["Ext.TabPanel"]
    [...]
    Last edited by brunoflmg; 27 Sep 2012 at 5:35 AM. Reason: gramatical corrections
    _______
    Regards,
    Bruno Leite
    http://kinzaa.com/brunoleite

  8. #8
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    544
    Vote Rating
    96
    Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light Tim Toady is a glorious beacon of light

      0  

    Default


    Perhaps your tab is actually an array....

  9. #9
    Sencha User
    Join Date
    Sep 2008
    Location
    Brasil
    Posts
    21
    Vote Rating
    0
    brunoflmg is on a distinguished road

      0  

    Default


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

    console.png
    _______
    Regards,
    Bruno Leite
    http://kinzaa.com/brunoleite

  10. #10
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,076
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You need to add to the tabPanel

    Code:
    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.

Thread Participants: 2

Tags for this Thread