如何防止网格列重复相同的数据

Question

我正在使用ExtJS开发一个应用程序，在我的一个模型中我有一个数组类型的字段，如何在网格中设置dataIndex以便在编辑一个单元格时数据不重复？

我的代码如下所示。

{
        xtype: 'button',
        icon : Webapp.icon('add1.png'),
        iconAlign : 'top',
        handler : function() {  
            var gridView = Ext.ComponentQuery.query('gridpanel')[1];
            grid = gridView.headerCt;
            if(grid.getGridColumns().length >= 1){
                var column = Ext.create('Ext.grid.column.Column', { dataIndex: 'interval', text : contador, 
                    editor: {xtype: 'textfield', flex: 0.5, editable: true}});
                grid.insert(gridView.columns.length, column);
                gridView.getView().refresh();
                var botao = Ext.getCmp('buttonRemoverColuna');
                botao.setDisabled(false);
            }
            contador++;
        }
    }


Ext.define('model', {
extend : 'Ext.data.Model',
fields : [ {
    name : 'id',
    type : 'long'
}, {
    name : 'name',
    type : 'string'
}, {
    name: 'interval',
    type: 'array'
}]
});

Answer 1

简单的答案是，您必须为每个新列添加一个不同的dataIndex配置。

现在每个人都获得dataIndex: 'interval'。

这意味着如果您在商店的interval字段中为该记录添加了一个值，那么连接到interval字段的每一列都会显示该值。

一种简单的方法是将处理程序更改为：

handler : function() {  
    var gridView = Ext.ComponentQuery.query('gridpanel')[1],
        grid = gridView.headerCt,
        columnCount = grid.getGridColumns().length;

    if (columnCount >= 1){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + columnCount, 
                text: contador, 
                editor: {xtype: 'textfield', flex: 0.5, editable: true}
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

具体来说，处理程序中的以下配置将为其增加dataIndex，即interval1，interval2，interval3，interval4等。什么都不知道你的服务器端设置，所以我不知道它是否适合你：

dataIndex: 'interval' + columnCount, 

修改

假设您没有定义自定义array数据类型，您的interval字段数据类型实际上将默认为string。使用网格列的renderer配置很容易实现您想要的内容，我稍后会发布一个示例，但您也可以将数据类型更改回string。

示例：

基本思想是向列配置添加渲染器，通过将实际interval字段值拆分为数组，将在添加的列中显示各个interval值。如上所示，您仍然需要使用单独的dataIndex配置实现网格列，以便我们可以确定哪些列与interval数组值匹配。

handler : function() {  
    var grid = Ext.ComponentQuery.query('gridpanel')[1],
        header = grid.headerCt,
        intervalIndex = header.getGridColumns().length - 1;

    if (intervalIndex >= 0){
        var column = Ext.create('Ext.grid.column.Column', { 
                dataIndex: 'interval' + intervalIndex, 
                text: contador, 
                editor: {
                    xtype: 'textfield', 
                    intervalIndex: intervalIndex,
                    flex: 0.5, 
                    editable: true
                },

                // this will make the values display properly when not editing
                renderer: function(value, meta, record) {
                    var intervals = record.get('interval').split(',');
                    return intervals[intervalIndex];
                }
            });

        grid.insert(gridView.columns.length, column);
        gridView.getView().refresh();
        var botao = Ext.getCmp('buttonRemoverColuna');
        botao.setDisabled(false);
    }
    contador++;
}

网格上还需要beforeedit和edit个事件侦听器。

当开始行编辑时，beforeedit处理程序会将interval值拆分为正确的列字段。

当{em>完成行编辑时，edit处理程序会将来自不同列的更新字段值加入到单个字符串中并将其应用于真实的interval字段。

Ext.create('Ext.grid.Panel', {
    // your other grid configs...
    listeners: {

        // this will make the values display properly when you start a row edit
        beforeedit: function(plugin, edit) {
            plugin.editor.items.each(function(field) {
                var idx = field.intervalIndex;
                if (idx) {
                    var value = edit.record.get('interval').split(',')[idx];
                    Ext.defer(function() {
                        field.setValue(value);
                    }, 10);
                }
            });
        },

        // update the value of the real "interval" field when done editing
        edit: function(plugin, edit) {
            var intervalArray = [],
                var regex = /interval\d/;

            Ext.Object.each(edit.newValues, function(key, value) {
                if (regex.test(key)) {
                    intervalArray.push(value);
                }
            });

            // sets the interval value into a comma seperated value string
            edit.record.set('interval', intervalArray.join(','));
        }
    }
});

使用上述edit监听器，您的模型interval字段的值将使用添加的列中的值更新为CSV字符串，例如：'value1,value2,value3,etc'。

解析服务器端的字符串取决于您。但在大多数编程语言中，都有stringValue.split(",")类型的函数，它将CSV字符串转换为实数数组。

如果您希望interval值更像“类似数组”，您也可以将其包装在括号中：

edit.record.set('interval', '[' + intervalArray.join(',') + ']')

我不知道这是否有助于您的解析。