ExtJS编辑器网格中的自定义编辑控件

问题描述:

出现问题,需要您的建议ExtJS编辑器网格中的自定义编辑控件

我刚开始编写一个编辑器网格。 (我将实际使用此网格作为搜索过滤器编辑器,即具有条件名称,运算符和值的列)。 现在,对于值字段,我希望对不同的行有不同的编辑控件。例如,当条件类型是字符串时,我想显示一个文本框,当它是日期时间时,我想要一个日期时间编辑器。所以事实是,我需要在编辑开始之前控制“编辑控件创建/显示”。并且它们在行之间应该是不同的。不像我找到的列是固定的例子。

为了实现这一点,你们可以请你提出我需要做的步骤吗?如果你们中的一个人能够指导我,我可以弄清楚它。

感谢和问候

其实你可以很容易地通过动态返回不同的编辑器做到这一点,根据您所在的列进行渲染。在您的ColumnModel对象中,您可以定义如下所示的内容。请注意,我得到每个记录的类型属性以确定其类型。我有一个包含我所有不同类型的编辑器的对象,并且对于渲染器也是如此,然后基于类型i为该单元格提供不同的编辑器或渲染器。

editors: { 'default': {xtype:'textfield'}, 
      texttype: {xtype:'textfield'}, 
      numbertype: {xtype:'numberfield'}, 
      combotype: {xtype:'combo'}....... etc. } 

getCellEditor: function(colIndex, rowIndex) { 
      var store = Ext.getCmp('mygrid').getStore(); 
      var field = this.getDataIndex(colIndex); 
      var rec = store.getAt(rowIndex); 
      var type = rec.get('type'); 
      if (type in this.editors) { 
       return this.editors[type]; 
      } else { 
       return this.editors['default']; 
      } 

     }, 

在你editorgrid的配置部分,你需要定义你的自定义编辑器:

{ 
    xtype: 'editorgrid', 
    id : 'mygridID', 
    stripeRows: true, 
    ... 
    ... 
    ,customEditors : { 
    //configs go here or pre-define the configs prior to this 
    'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)), 

    //configs go here or pre-define the configs prior to this 
    'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject)) 
    } 
} 
+0

谢谢您的答复。但你错过了我的问题,对于每一行我可能需要不同的编辑器控件..不像你在这里显示的。它不是列,而是行。 – Moim 2010-11-16 07:32:10

+0

对不起,我绝对误读了这个问题。我不知道如何在没有嵌套数据网格或使用多个网格的情况下完成此操作。问题是列模型需要在网格中的所有行上保持一致。 – 2010-11-16 14:44:15

使用该网格的配置 - 以便选择整行:

selType: 'rowmodel'