如何从重复

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值。您仍然需要如上图所示，这样我们可以找出哪些列匹配到什么interval数组值与单独dataIndex CONFIGS网格列的实现。

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(',') + ']') 

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