1

我正在使用 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'
}]
});
4

1 回答 1

3

简单的答案是您必须为插入不同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值拆分为正确的列字段。

处理程序会将来自不同列的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(',') + ']')

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

于 2012-07-30T17:44:01.453 回答