extjsextjs-grid

GridPanel Columns names changing automatically


I am trying to add a GridPanle into a window. For this i have created a model, store and then created a panel and then adding this panel into window.

Facing issue with Panel column Headers.

The below is the code i am using.

function(orderModel, ex112ServiceResponse) {
    var tablePopup = null;
    var gridPanel = null;
    var gridData = [];
    var gridStore = null;

    // Creation of data model
    Ext.define('StudentDataModel', {
        extend: 'Ext.data.Model',
        fields: [{
                name: 'reasonCode',
                mapping: 'reasonCode'
            },
            {
                name: 'reasonCodeDescription',
                mapping: 'reasonCodeDescription'
            },
            {
                name: 'refField1',
                mapping: 'refField1'
            },
            {
                name: 'orderID',
                mapping: 'orderID'
            },
            {
                name: 'orderLineID',
                mapping: 'orderLineID'
            }
        ]
    });

    // Store data

    //debugger;
    debugger;
    for (var index = 0; index < ex112ServiceResponse.objectReasonCode.length; index++) {
        gridData.push(ex112ServiceResponse.objectReasonCode[index]);
    }

    gridStore = Ext.create('Ext.data.Store', {
        model: 'StudentDataModel',
        data: gridData
    });

    gridPanel = Ext.create('Ext.grid.Panel', {
        id: 'gridId',
        layout: 'fit'
        store: gridStore,
        stripeRows: true,
        width: 800,
        enableColumnMove: true,
        enableColumnResize: true,
        autoDestroy: true,

        columns: [{
                header: "SKU/Item Number",
                dataIndex: 'refField1',
                id: 'refField1',
                //flex: .5,
                sortable: true,
                hideable: true
            }, {
                header: "Reason Code",
                dataIndex: 'reasonCode',
                id: 'reasonCode',
                //flex: .5, // property defines the amount of space this column is going to take in the grid container with respect to all. 
                sortable: true, // property to sort grid column data. 
                hideable: true // property which allows column to be hidden run time on user request.
            }, {
                header: "Description",
                dataIndex: 'reasonCodeDescription',
                id: 'reasonCodeDescription',
                //flex: 1,
                sortable: true,
                hideable: false // this column will not be available to be hidden.
            },
            {
                header: "DO :: DO Line",
                dataIndex: 'orderLineID',
                id: 'doDoLine',
                //flex: .5,
                sortable: true,
                renderer: function(value, metadata, record, rowIndex, colIndex, store) {
                    debugger;
                    var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
                    return do_DOLine;

                }
            }
        ]
    });

    tablePopup = new Ext.Window({
        title: 'Cancellation Reason Codes',
        id: 'crcWin'
        width: 800,
        closeAction: 'close',
        plain: true,
        autoDestroy: true,

        items: [gridPanel]
    });

    tablePopup.show();
    //Table Creation End            
}

The issue is when the code create a popup for the first time. Popup looks good. But when i close the popup and clicks on a button in the second time created popup has issue. Column names have been changed.

Popup1: enter image description here

Popup2: enter image description here

Your help will be highly appreciated.


Solution

  • The issue is you have provided id to your extjs component and inside of window you have used config

    //There is no close action in docs
    closeAction: 'close'//Defaults to: 'destroy'
    

    The closeAction to take when the close header tool is clicked:

    Note: This behavior has changed! setting does affect the close method which will invoke the appropriate closeAction.

    Instead of using id you can use itemId.

    In this FIDDLE, I have created a demo using your code. I hope this will help/guide you.

    CODE SNIPPET

    Ext.application({
        name: 'Fiddle',
    
        launch: function () {
            function createWindow() { // Creation of data model
                Ext.define('StudentDataModel', {
                    extend: 'Ext.data.Model',
                    fields: [{
                        name: 'reasonCode',
                        mapping: 'reasonCode'
                    }, {
                        name: 'reasonCodeDescription',
                        mapping: 'reasonCodeDescription'
                    }, {
                        name: 'refField1',
                        mapping: 'refField1'
                    }, {
                        name: 'orderID',
                        mapping: 'orderID'
                    }, {
                        name: 'orderLineID',
                        mapping: 'orderLineID'
                    }]
                });
    
                Ext.create('Ext.data.Store', {
                    storeId: 'gridStore',
                    model: 'StudentDataModel',
                    data: [{
                        reasonCode: '123',
                        reasonCodeDescription: 'test test',
                        refField1: 'it just exammple',
                        orderID: 1234,
                        orderID: 12345
                    }, {
                        reasonCode: '1231',
                        reasonCodeDescription: 'test1 test',
                        refField1: '!it just exammple',
                        orderID: 12341,
                        orderID: 123451
                    }]
                });
    
                var gridPanel = Ext.create('Ext.grid.Panel', {
                    layout: 'fit',
                    store: 'gridStore',
                    stripeRows: true,
                    enableColumnMove: true,
                    enableColumnResize: true,
                    autoDestroy: true,
                    //id: 'gridId',
                    columns: [{
                        header: "SKU/Item Number",
                        dataIndex: 'refField1',
                        //id: 'refField1',
                        flex: 1,
                        sortable: true,
                        hideable: true
                    }, {
                        header: "Reason Code",
                        dataIndex: 'reasonCode',
                        // id: 'reasonCode',
                        flex: 1,
                        sortable: true, // property to sort grid column data.
                        hideable: true // property which allows column to be hidden run time on user request.
                    }, {
                        header: "Description",
                        dataIndex: 'reasonCodeDescription',
                        // id: 'reasonCodeDescription',
                        flex: 1,
                        sortable: true,
                        hideable: false // this column will not be available to be hidden.
                    }, {
                        header: "DO :: DO Line",
                        dataIndex: 'orderLineID',
                        //id: 'doDoLine',
                        flex: 1,
                        sortable: true,
                        renderer: function (value, metadata, record, rowIndex, colIndex, store) {
                            var do_DOLine = record.raw.orderID + " :: " + record.raw.orderLineID;
                            return do_DOLine;
    
                        }
                    }]
                });
    
                var tablePopup = new Ext.Window({
                    title: 'Cancellation Reason Codes',
                    width: window.innerWidth,
                    //id: 'crcWin',
                    plain: true,
                    modal: true,
                    autoDestroy: true,
                    closeAction: 'destroy', //If you want to use hide then you need to be show same window instead of new create
                    // closeAction: 'close', //https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.window.Window-cfg-closeAction
                    items: [gridPanel]
                });
    
                tablePopup.show();
            }
    
            Ext.create('Ext.button.Button', {
    
                text: 'Create window',
    
                renderTo: Ext.getBody(),
    
                handler: createWindow
            })
        }
    });