1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    1
    PaulyWolly is on a distinguished road

      0  

    Default Unanswered: Grid in tabpanel has cellEdit plugin, causes 'event is undefined' when close new tab

    Unanswered: Grid in tabpanel has cellEdit plugin, causes 'event is undefined' when close new tab


    I have a grid in a tabpanel. I click a row in the grid and a new tab opens with details for the clicked item. The newly created tabs also have grids in them, with the cellEditing plugin. The details on the new tab opened can be edited and then sent back to the server through CRUD routines. I am using the cellEditing plugin, and it seems to be working fine to edit the cell, but when I close the tab after performing edits I get an error "event is undefined". Why might this be occurring?

    Is there a way to edit a cell in a grid without using the cellEditing plugin? ...or maybe a way to fix the plugin to get it to work? I am using the plugin in the Ext.apply section of my initComponent for the grid.

    I am using ext-all-debug.js and the error looks to be coming from an area where a function call is for 'removeListener', from line 13367 in ext-all-debg.js I do not believe I have any listeners on the page, so why is this error coming up on tab close?

  2. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Vote Rating
    9
    Answers
    13
    dedoz will become famous soon enough

      0  

    Default


    post some code & extjs version, prolly ur error is not coming from the plugin

  3. #3
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    1
    PaulyWolly is on a distinguished road

      0  

    Default


    Quote Originally Posted by dedoz View Post
    post some code & extjs version, prolly ur error is not coming from the plugin
    Ext version is 4.0.7

    Here is my code:
    Code:
    Ext.onReady(function() {
       
        Ext.define('TableListModel', {
            extend: 'Ext.data.Model',
            fields: ['tbllID', 'tbllTABLENAME']
        });
            
        var tableListData = [
            [
                "83", "TABLE_A1"
            ], [
                "84", "TABLE_A1B"
            ], [
                "85", "TABLE_A2"
            ], [
                "86", "TABLE_A3"
            ], [
                "87", "TABLE_A4"
            ], [
                "88", "TABLE_A5"
            ]
        ];
            
        Ext.define('TargetListModel', {
            extend: 'Ext.data.Model',
            fields: ['targlID', 'targlTARGETNAME', 'targlFAMILYNAME', 'targlTABLENAME', 'targlTARGETLABEL']
        });
        
        var targetListData = [
            [
                "3",
                "C_8200A_R2X_T_DC",
                "2G",
                "TABLE_A1",
                "8200A Rel2X [Thin DC]"
            ],[
                "4",
                "C_6610_SUPPORTED",
                "2G",
                "TABLE_A1",
                "6610 [Supported]"
            ],[
                "5",
                "C_7X30_8X60_F_BMP",
                "2G",
                "TABLE_A1",
                "7x30\/8x55\/8x60 [Full BMP]"
            ],[
                "9",
                "C_6295_6155_F_BREW",
                "2G",
                "TABLE_A1",
                "6295,6200,6695,6600,6175,6185,6195,6165,6155 [Full BREW]"
            ],[
                "13",
                "C_8250_8650A_F_LNX",
                "2G",
                "TABLE_A1",
                "8250\/8650\/8650A [Full Linux]"
            ]
        ];
        
    
        Ext.define('TargetViewModel', {
            extend: 'Ext.data.Model',
            fields: ['tvID', 'tvTARGETNAME', 'tvFAMILYNAME', 'tvTABLENAME', 'tvTARGETLABEL']
        });
        
        var targetViewData = [
            [
                "3",
                "C_8200A_R2X_T_DC",
                "2G",
                "TABLE_A1",
                "8200A Rel2X [Thin DC]"
            ],[
                "4",
                "C_6610_SUPPORTED",
                "2G",
                "TABLE_A1",
                "6610 [Supported]"
            ],[
                "5",
                "C_7X30_8X60_F_BMP",
                "2G",
                "TABLE_A1",
                "7x30\/8x55\/8x60 [Full BMP]"
            ],[
                "9",
                "C_6295_6155_F_BREW",
                "2G",
                "TABLE_A1",
                "6295,6200,6695,6600,6175,6185,6195,6165,6155 [Full BREW]"
            ],[
                "13",
                "C_8250_8650A_F_LNX",
                "2G",
                "TABLE_A1",
                "8250\/8650\/8650A [Full Linux]"
            ]
        ];
    
        Ext.define('GGtargetViewStore', {
            extend  : 'Ext.data.Store',
            proxy	: {
                type	: 'ajax',
                url         : targetViewData,
                reader	: {
                    type: 'json',
                    root: 'data'
                }
            },
            autoDestroy	: true,
            model: 'TargetViewModel',
            autoLoad    : false
        });
        
        // combo defines
        // Combo for family drop-down
        var familyCombo = Ext.create( Ext.form.ComboBox, ({
            triggerAction: 'all',
            fieldLabel: 'Family',
            labelWidth: 75,
            queryMode: 'local',
            style: 'margin : 5px 0 5px 2px',
            store: Ext.create( Ext.data.ArrayStore, ({
                fields: [
                    'myId',
                    'displayText'
                ],
                data: [
                    ['2G', 1],
                    ['3G', 2],
                    ['LTE', 3]
                ]
            })),
            displayField: 'myId',
            valueField: 'myId'
        }));
        familyCombo.on('select', function (field, record, index) {
            familyName = field.value;
        }, this);
    
        // Combo for table drop-down
        var tableCombo = Ext.create( Ext.form.ComboBox, ({
            triggerAction: 'all',
            queryMode: 'local',
            fieldLabel: 'Table',
            labelWidth: 75,
            store: Ext.create( Ext.data.ArrayStore, ({
                fields: [
                    'ID',
                    'TABLENAME'
                ],
                data: tableListData
            })),
            style: 'margin : 5px 0 5px 2px',
            valueField: 'TABLENAME',
            displayField: 'TABLENAME',
            familyName: this.familyName
        }));
        tableCombo.on('select', function (field, record, index) {
    
            var tableName = field.value;
            
            // create a new tab and show all targets selected        
            //var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
            var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
                item = ct.add(Ext.create( TargetList, ({
                    title: tableName + ' - Targets Listing', //title on new tab created
                    tname: tableName,
                    fId: familyName,
                    closable: false,
                    layout: 'fit',
                    scope: this
                })));
    
                ct.setActiveTab(item);
        }, this);
        
        
        
        var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });
        
        //TargetList Grid definitionimore
        var GGTargetsView = Ext.define('GGTargetsView', {
    
            extend: 'Ext.grid.Panel',
            alias: 'widget.ggtargetsview',
    
            itemId: 'GGTaObject',
            initComponent: function () {
    
                Ext.apply(this, {
    
                    border: 0,
                    frame: false,
                    layout: 'fit',
                    selType: 'cellmodel',
                    plugins: [
                        Ext.create('Ext.grid.plugin.CellEditing', {
                            clicksToEdit: 1
                        })
                    ],
                    store: Ext.create( Ext.data.ArrayStore,({
                        model: 'TargetViewModel',
                        data: targetViewData
                    })),
                    columns: [{
                        dataIndex: 'ID',
                        header: 'ID',
                        width: 50,
    
                    },
                    {
                        dataIndex: 'tvTARGETNAME',
                        header: 'Target Name',
                        width: 200,
    
                    },
                    {
                        dataIndex: 'tvFAMILYNAME',
                        header: 'Family Name',
                        width: 100,
    
                    },
                    {
                        dataIndex: 'tvTABLENAME',
                        header: 'Table name',
                        width: 100
                    },
                    {
                        dataIndex: 'tvTARGETLABEL',
                        header: 'Target Label',
                        width: 150,
                        editor: { // this field ONLY has the editor
                            allowBlank: false
                        }
                    }],
                    viewConfig: {
                        stripeRows: true
                    } 
    
                }); // eo Apply
    
                this.callParent(arguments);
            }
        });
        
    
        //TargetList Grid definition
        var TargetList = Ext.define('TargetList', {
    
            extend: 'Ext.grid.Panel',
            alias: 'widget.targetlist',
    
            itemId: 'TaObject',
            initComponent: function () {
    
                Ext.apply(this, {
    
                    border: 0,
                    frame: false,
                    layout: 'fit',
                    idProperty: true,
                    store: Ext.create( Ext.data.ArrayStore,({
                        model: 'TargetListModel',
                        data: targetListData
                    })),
                    columns: [
                        {
                            header: 'ID',
                            dataIndex: 'targlID',
                            width: 50
                        },
                        {
                            header: 'Target Name (TargetList)',
                            dataIndex: 'targlTARGETLABEL',
                            width: 400
                        },
                        {
                            header: 'Family Name',
                            dataIndex: 'targlFAMILYNAME',
                            width: 100
                        }
                    ],
                    viewConfig: {
                        itemId: 'view',
                        listeners: {
                            scope: this,
                            itemdblclick: this.onDblClick
                        }
                    } 
    
                }); // eo Apply
    
                this.callParent(arguments);
            },
    
            onDblClick: function (grid, index) {
    
                var rowNode = this.view.getNode(index),
                record = this.view.getRecord(rowNode);
                this.createTargetGridView(record.get('targlID'), record.get('targlTARGETNAME'), record.get('targlTABLENAME'), record.get('targlFAMILYNAME'));
            },
    
            createTargetGridView: function (id, targName, tablName, famName){
                console.log('fId: ' + id + ', targ_name: ' + targName + ', tableName: ' + tablName + ', famName: ' + famName);
    
                //TargetView created on Target record click from TargetList
                if (famName === '2G') {
                    
                    // create a new tab and show all targets selected		
                    var ct = Ext.getCmp('my-main-content').getComponent('tabContainer2G'),
                        item = ct.add(Ext.create( GGTargetsView, ({
                            title: targName + ' - Targets View Listing', //title on new tab created
                            /*store: Ext.create( Ext.data.ArrayStore, ({
                                //id: id,
                                model: 'TargetViewModel',
                                data: targetViewData,
                                scope: this
                            })),
                            */
                            closable: true
                        })));
    
                    ct.setActiveTab(item);
                    console.log(item);
                    
                }
    
            }
        });
        
        Ext.define('APIlayout', {
    
            extend: 'Ext.panel.Panel',
            alias: 'widget.apilayout',
    
            initComponent: function() {
    
                Ext.apply(this, {
                    width: 350,
                    layout: 'border',
                    id: 'my-main-content',
                    defaults: {
                        collapsible: true,
                        split: true,
                        bodyStyle: 'padding:1px'
                    },
                    items: [
                    {
                        title: 'Choose content',
                        region:'west',
                        margins: '5 0 5 5',
                        cmargins: '5 5 5 5',
                        style: 'padding: 0px 0px 0px 0px',
                        width:250,
                        minSize: 200,
                        items: [familyCombo, tableCombo]
    
                    },
                    {
                        collapsible: false,
                        region: 'center',
                        id: 'my-tabpanel',
                        xtype: 'tabpanel',
                        style: 'padding:5px 5px 5px 0px',
                        itemId: 'tabContainer2G'
                        
                    }],
                    viewConfig: {
                        itemId: 'view',
                        listeners: {
                            scope: this
                        }
                    }
                });
                this.callParent(arguments);
            }
        });
    
        var viewport = Ext.create('Ext.Viewport', {
            layout: {
                type: 'border',
                padding: 20
            },
            defaults: {
                border: false
            },
            items: [{
                region: 'center',
                xtype: 'apilayout',
                frame: false,
                plain: true
            }]
        });
        
    });
    Last edited by PaulyWolly; 11 Feb 2012 at 8:23 PM. Reason: Changed code to run locally

  4. #4
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    1
    PaulyWolly is on a distinguished road

      0  

    Default What happened? - now that i uploaded the code does no one have an answer?

    What happened? - now that i uploaded the code does no one have an answer?


    Please respond

Thread Participants: 1

Tags for this Thread