GridPanel 列名称自动更改

Question

我正在尝试将 GridPanle 添加到 window。为此，我创建了一个模型，存储然后创建了一个面板，然后将这个面板添加到 window.

面板列 Headers 遇到问题。

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

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            
}

问题出在代码首次创建弹出窗口时。弹出窗口看起来不错。但是当我关闭弹出窗口并在第二次创建弹出窗口时单击按钮时出现问题。列名称已更改。

弹出窗口 1：

弹出窗口2：

非常感谢您的帮助。

Answer 1

问题是您提供了 id to your extjs component and inside of window 您使用了配置

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

单击关闭 header 工具时要采取的 closeAction:

destroy : 从 DOM 和 destroy it and all descendant Components. The window will not be available to be redisplayed via the show 方法中删除 window。
隐藏 : hide window 通过将可见性设置为隐藏并应用负偏移。 window 将可以通过 show 方法重新显示。

注意：此行为已更改！设置确实会影响关闭方法，该方法将调用适当的 closeAction.

您可以使用 itemId.

而不是 id

在此 FIDDLE 中，我使用您的代码创建了一个演示。我希望这会 help/guide 你。

代码片段

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

GridPanel 列名称自动更改

GridPanel Columns names changing automatically

extjs

extjs-grid