【问题标题】:ExtJs(4.2.0) Editable Grid with xtype : button columnExtJs(4.2.0) 带有 xtype 的可编辑网格:按钮列
【发布时间】:2015-09-23 04:09:45
【问题描述】:

下面是一段可执行代码,在网格编辑器中有一个按钮。我需要按钮出现在编辑器中,但是我不需要更新按钮的任何值。编辑器的更新功能似乎不再起作用。知道我可能缺少什么吗?

Ext.create('Ext.data.Store', {
    storeId:'EmployeeData',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"aaa", "email":"aaa@emp.com", "phone":"987654321"},
        {"name":"bbb", "email":"bbb@emp.com", "phone":"987654321"},
        {"name":"ccc", "email":"ccc@emp.com", "phone":"987654321"},
        {"name":"ddd", "email":"ddd@emp.com", "phone":"987654321"}
    ]});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Employee',
    store: Ext.data.StoreManager.lookup('EmployeeData'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false
            }
        },
        {header: 'Phone', dataIndex: 'phone'},
        {header: 'button', dataIndex:'',editor:{xtype:'button',editable: false}}
    ],
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1,
            pluginId: 'rowEditing'
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

【问题讨论】:

  • 看起来该代码应该生成一个 4 行 4 列的网格。你期待什么?
  • 如果你碰巧阅读了描述,它说因为有一列 xtype 按钮,所以编辑器不起作用。
  • 你可以在小提琴中运行它。由于 xtype 按钮列,编辑器无法工作。
  • 可能有另一种方法可以执行您希望此按钮执行的操作...您能解释一下单击按钮会做什么吗?您可以使用自定义的RowEditingButtons 插件来添加您的自定义按钮...
  • 所以在点击按钮时,我会弹出一个弹出窗口,其中包含另一个网格中的一组数字,点击这些数字中的任何一个,打开的编辑器中的某些列应该会发生变化。

标签: javascript extjs extjs4.2 extjs-grid


【解决方案1】:

编辑器对每个x-field都使用getValue()函数,按钮控件没有getValue()函数,因此抛出异常,更新记录失败。

如果可以满足您的目的,也许您可​​以使用ActionColumn。您可以像使用按钮一样附加处理函数。

【讨论】:

    【解决方案2】:

    这有点晚了,但我遇到了同样的问题。

    您可以添加getValue 方法以使更新操作正常运行。

    editor: {
        xtype: 'button',
        getValue: function() {
            return true;
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-09-25
      • 2017-07-10
      • 2013-05-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多