You found a bug! We've classified it as EXTJS-8223 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Oct 2008
    Posts
    30
    Vote Rating
    0
    protocyber is on a distinguished road

      0  

    Default Grid Reconfigure Problem with Editor, Locking and Grouped Headers

    Grid Reconfigure Problem with Editor, Locking and Grouped Headers


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0.265-beta
    Browser versions tested against:
    • Google Chrome
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • Using Ext.grid.Panel.reconfigure(store, columns) causes cell editing error on the grid that has cell editing, locked columns and grouped headers.
    • I thnk it is caused by the grouped headers in the NEW columns. Regardless whether there is grouped header in OLD columns or not.
    • If there is no grouped header in NEW columns, the reconfigure works fine.
    Steps to reproduce the problem:
    • Using the code below, notice that after the page initially loads, cell editing works.
    • Now click the "Reconfigure Grid" button. The cell editing no longer works.
    The result that was expected:
    • Cell editing should works fine even after reconfiguration.
    The result that occurs instead:
    • Google chrome Developer Tools output: Uncaught TypeError: Object [object Object] has no method 'getEditor'
    Test Case:

    I just added a litte modification to this file "ext/examples/grid/locking-grp-summary-grp-hdrs-grid.js" to add "Reconfigure Grid" button.

    Code:
    Ext.Loader.setConfig({    enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');
    
    
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.form.field.Number',
        'Ext.form.field.Date',
        'Ext.tip.QuickTipManager',
        'Ext.ux.DataTip'
    ]);
    
    
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        idProperty: 'taskId',
        fields: [
            {name: 'projectId', type: 'int'},
            {name: 'project', type: 'string'},
            {name: 'taskId', type: 'int'},
            {name: 'description', type: 'string'},
            {name: 'estimate', type: 'float'},
            {name: 'rate', type: 'float'},
            {name: 'due', type: 'date', dateFormat:'m/d/Y'}
        ]
    });
    
    
    var data = [
        {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
        {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
        {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple<br>types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
        {projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
        {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
        {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
        {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
        {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
        {projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
        {projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
    ];
    
    
    Ext.onReady(function(){
        
        Ext.tip.QuickTipManager.init();
        
        var store = Ext.create('Ext.data.Store', {
            model: 'Task',
            data: data,
            sorters: {property: 'due', direction: 'ASC'},
            groupField: 'project'
        });
    
    
        var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });
        var showSummary = true;
        var grid = Ext.create('Ext.grid.Panel', {
            width: 800,
            height: 450,
            frame: true,
            title: 'Sponsored Projects',
            iconCls: 'icon-grid',
            renderTo: document.body,
            store: store,
            plugins: [
                cellEditing,
                {
                    ptype: 'datatip',
                    tpl: 'Click to edit {description}'
                }
            ],
            listeners: {
                beforeshowtip: function(grid, tip, data) {
                    var cellNode = tip.triggerEvent.getTarget(tip.view.getCellSelector());
                    if (cellNode) {
                        data.colName = tip.view.headerCt.getHeaderAtIndex(cellNode.cellIndex).text;
                    }
                }
            },
            selModel: {
                selType: 'cellmodel'
            },
            dockedItems: [{
                dock: 'top',
                xtype: 'toolbar',
                items: [{
                    tooltip: 'Toggle the visibility of the summary row',
                    text: 'Toggle Summary',
                    enableToggle: true,
                    pressed: true,
                    handler: function() {
                        showSummary = !showSummary;
                        var view = grid.lockedGrid.getView();
                        view.getFeature('group').toggleSummaryRow(showSummary);
                        view.refresh();
                        view = grid.normalGrid.getView();
                        view.getFeature('group').toggleSummaryRow(showSummary);
                        view.refresh();
                    }
                }, {
                    tooltip: 'Reconfigure Grid',
                    text: 'Reconfigure Grid',
                    handler: function() {
                        grid.reconfigure(grid.store, grid.columns);
                    }
                }]
            }],
            features: [{
                id: 'group',
                ftype: 'groupingsummary',
                groupHeaderTpl: '{name}',
                hideGroupedHeader: true,
                enableGroupingMenu: false
            }, {
                ftype: 'summary',
                dock: 'bottom'
            }],
            columns: [{
                text: 'Task',
                width: 300,
                locked: true,
                tdCls: 'task',
                sortable: true,
                dataIndex: 'description',
                hideable: false,
                summaryType: 'count',
                summaryRenderer: function(value, summaryData, dataIndex) {
                    return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
                },
                field: {
                    xtype: 'textfield'
                }
            }, {
                header: 'Project',
                width: 180,
                sortable: true,
                dataIndex: 'project'
            }, {
                header: 'Schedule',
                columns: [{
                    header: 'Due Date',
                    width: 125,
                    sortable: true,
                    dataIndex: 'due',
                    summaryType: 'max',
                    renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
                    field: {
                        xtype: 'datefield'
                    }
                }, {
                    header: 'Estimate',
                    width: 125,
                    sortable: true,
                    dataIndex: 'estimate',
                    summaryType: 'sum',
                    renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
                        return value + ' hours';
                    },
                    summaryRenderer: function(value, summaryData, dataIndex) {
                        return value + ' hours';
                    },
                    field: {
                        xtype: 'numberfield'
                    }
                }, {
                    header: 'Rate',
                    width: 125,
                    sortable: true,
                    renderer: Ext.util.Format.usMoney,
                    summaryRenderer: Ext.util.Format.usMoney,
                    dataIndex: 'rate',
                    summaryType: 'average',
                    field: {
                        xtype: 'numberfield'
                    }
                }, {
                    header: 'Cost',
                    width: 114,
                    flex: true,
                    sortable: false,
                    groupable: false,
                    renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
                        return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
                    },
                    summaryType: function(records){
                        var i = 0,
                            length = records.length,
                            total = 0,
                            record;
    
    
                        for (; i < length; ++i) {
                            record = records[i];
                            total += record.get('estimate') * record.get('rate');
                        }
                        return total;
                    },
                    summaryRenderer: Ext.util.Format.usMoney
                }]
            }]
        });
    });

    HELPFUL INFORMATION

    Operating System:
    • WinXP Pro

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    1
    Vote Rating
    0
    1216vmacias is on a distinguished road

      0  

    Default


    Hola!!!!
    no se si te sirva, porfa corrigeme si estoy mal, a mi me sirvió:
    Code:
    var loPnl = Ext.getCmp(loPanl);
    for (var idx = 0; idx < loPnl.getView().normalGrid.plugins.length; idx++) {
                            //loPnl.getView().normalGrid.plugins[0] = loPnl.getView().normalGrid.initPlugin(loPnl.getView().normalGrid.plugins[0]);
                            loPnl.getView().normalGrid.plugins[0].onReconfigure();
                        }
    
                        for (var idx = 0; idx < loPnl.getView().lockedGrid.plugins.length; idx++) {
                            //loPnl.getView().lockedGrid.plugins[0] = loPnl.getView().lockedGrid.initPlugin(loPnl.getView().lockedGrid.plugins[0]);
                            loPnl.getView().lockedGrid.plugins[0].onReconfigure();
                        }

  4. #4
    Sencha User clesquir's Avatar
    Join Date
    Jun 2009
    Posts
    28
    Vote Rating
    0
    clesquir is on a distinguished road

      0  

    Default


    In the meantime, I do the following to reconfigure the store:

    Code:
    var view = this.getGrid().getView(),
        store = this.getReconfiguredStore(),
        summaryFeature = view.getFeature('summary'); // I have put an id to the summary feature
    
    if (summaryFeature) {
        view.mon(store, {
            update: summaryFeature.onStoreUpdate,
            datachanged: summaryFeature.onStoreUpdate,
            scope: summaryFeature
        });
    }
    
    this.getGrid().reconfigure(store);