GridPanel列名自动更改

Question

我正试图在窗口中添加一个GridPanle。为此，我创建了一个模型，存储，然后创建了一个面板，然后将这个面板添加到窗口中。

面对面板列标题的问题。

下面是我正在使用的代码。

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            
}

问题是当代码第一次创建弹出时。弹出式看上去不错。但是当我关闭弹出窗口并在第二次创建时单击一个按钮时，弹出窗口就有问题了。列名已更改。

Popup1：

​

Popup2：

​

您的帮助将不胜感激。

Answer 1

问题是，您已经将id提供给您的extjs component，并在window内部使用了配置。

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

单击“关闭标题”工具时要采取的closeAction：

• 破坏：从DOM和销毁中删除窗口，并删除它和所有子代组件。该窗口将无法通过显示方法重新显示。
• 隐藏：通过将可见性设置为隐藏并应用负偏移量来隐藏窗口。该窗口可以通过show方法重新显示。

Note：这种行为已经改变了！设置确实会影响将调用适当closeAction的close方法。

而不是使用id，而是可以使用itemId。

在这个小提琴中，我使用您的代码创建了一个演示。我希望这将对你有所帮助。

代码片段

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