CODEWITHSUNDEEP
extjsextjs-grid
Abdul
Abdul

Reputation: 1208

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.

Upvotes: 1

Views: 217

Answers (1)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

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:

  • destroy : remove the window from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
  • hide : hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.

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
        })
    }
});

Upvotes: 2

Related Questions