1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    luisfb is on a distinguished road

      0  

    Default Problem with grid in tabpanel - urgent please!

    Problem with grid in tabpanel - urgent please!


    My problem is that when I open a grid in a tab and close it, when I will open it again the layout crashes as you can see in image 2.

    So this is the normal view of my app when I open the Granjas grid first time:
    one_grid.png

    Now in the following image, you can see what happens after I close the tab and try to open it again:

    two_grid.png

    *** VERY IMPORTANT: ***
    This bug doesn't happens in ext 4.0.
    It happens only in 4.1 and 4.1.1.
    ***
    I had no problems with extjs3 tabs and grids, but now with extjs4 I am having headaches.

    ***Correction: The bellow viewport code doesnt works in any extjs4 versions, but this one:
    Code:
    tabs = Ext.getCmp('tabpanel_principal');
           tab = tabs.add(new Carregamentos.view.GranjasGrid());
          tabs.setActiveTab(tab);
    works with extjs4.0 throwing the following exception: Uncaught TypeError: Cannot read property 'id' of undefinedext-all-debug-w-comments.js:119778
    and it doesnt loads the store items


    I appreciate your help. Thank you.
    Here is my viewport code:

    Code:
    Ext.define('Carregamentos.view.Viewport', {
        extend: 'Ext.container.Viewport',
        requires: [
            'Carregamentos.view.PrincipalGrid'
            ,'Carregamentos.view.GranjasWin'
            ,'Carregamentos.view.GranjasGrid'
        ],
        renderTo: Ext.getBody(),
        layout: {
            type: 'border'
        },
        
        showGranjasGrid: function(){ 
           var Tabpanel = Ext.getCmp('tabpanel_principal');
            var tab = Ext.getCmp('idgridgranjas');
            if(undefined!=tab) { Tabpanel.setActiveTab(tab); return; }
            var obj = Tabpanel.add({
                title:'Granjas',
                xtype:'granjasgrid',
                id: 'idgridgranjas',
                closable: true,
                autoScroll:true
            });
            Tabpanel.setActiveTab(obj);
        },
       
        initComponent: function() {
            var me = this;
            Ext.applyIf(me, {
                items: [
                    {
                       region: 'north',
                       padding : '0 10 0 10',
                                xtype: 'toolbar',
                                id: 'toolbar_id',
                                border : false,
                                frame : false,
                                height: 50,
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'Cadastros',
                                        menu: {
                                            xtype: 'menu',
                                            width: 120,
                                            items: [
                                                {
                                                    xtype: 'menuitem',
                                                    icon: 'icone.png',
                                                    text: 'Granjas',
                                                    listeners:{
                                                        
                                                    }
                                                },
                                                {
                                                    xtype: 'menuitem',
                                                    text: 'Menu Item',
                                                    listeners:{
                                                        click: this.showGranjasGrid
                                                    }
                                                },
                                                {
                                                    xtype: 'menuitem',
                                                    text: 'Menu Item',
                                                    menu: {
                                                        xtype: 'menu',
                                                        width: 120,
                                                        items: [
                                                            {
                                                                xtype: 'menuitem',
                                                                text: 'Granjas'
                                                            },
                                                            {
                                                                xtype: 'menuitem',
                                                                text: 'Menu Item'
                                                            },
                                                            {
                                                                xtype: 'menuitem',
                                                                text: 'Menu Item'
                                                            }
                                                        ]
                                                    }
                                                },
                                                {
                                                    xtype: 'menuitem',
                                                    text: 'Menu Item'
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        xtype: 'button',
                                        text: 'Formulário',
                                        listeners: {
                                            click: {
                                                fn: me.onButtonClick1,
                                                scope: me
                                            }
                                        }
                                    },
                                    
                                    {
                                    xtype : "tbtext",
                                    id: 'user_nome_id',
                                    text: 'Usuário:&nbsp;&nbsp;&nbsp;&nbsp;<b>Luis</b>'
                            }]
                       
                    },
                    {
                        xtype: 'tabpanel',
                        region: 'center',
                        id: 'tabpanel_principal',
                        frame: false,
                        layout: {
                            type: 'fit'
                        },
                        bodyBorder: false,
                        collapsed: false,
                        collapsible: false,
                        overlapHeader: false,
                        activeTab: 0,
                        plain: true,
                        items: [
                            {
                                xtype: 'xprincipal',
                                id: 'principal_id'
                            }
                        ]
                    }
                ]
            });
            me.callParent(arguments);
        }
    });
    My store code:

    Code:
    
    Ext.define('Carregamentos.store.Granjas', {
        extend: 'Ext.data.Store',
        requires: [
            'Carregamentos.model.Granjas'
        ],
        constructor: function(cfg) {
            var me = this;
            cfg = cfg || {};
           
            me.callParent([Ext.apply({
                autoLoad: true,
                autoSync: true,
                storeId: 'GranjasStore',
                model: 'Carregamentos.model.Granjas',
                pageSize: 3,
                proxy: {
                    type: 'ajax',
                    api: {            create: 'php/controller/proxy.php?action=save',
                read:   'php/controller/proxy.php?action=select',
                update: 'php/controller/proxy.php?action=save',
                destroy:'php/controller/proxy.php?action=delete'
            },
                    extraParams: {
                        controller: 'Granjas'
                    },
                    reader: {
                        type: 'json',
                        idProperty: 'id',
                        root: 'data',
                        successProperty: 'success',
                        totalProperty: 'total'
                    },
                    writer: {
                        type: 'json'
                    }
                }
            }, cfg)]); 
       
        }
    });
    Last edited by luisfb; 2 Sep 2012 at 7:54 PM. Reason: urgent

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    luisfb is on a distinguished road

      0  

    Default I really need your help please

    I really need your help please


    It is for an urgent project, and I can't solve it by myself.
    Help me if you can.
    Thank you.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    5
    Vote Rating
    0
    luisfb is on a distinguished road

      0  

    Default


    up

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    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


    When you close a tab all items are destroyed.

    Please see the following example:
    http://www.sencha.com/forum/showthread.php?214648

    Scott,

Thread Participants: 1

Tags for this Thread