LYM -- 放浪形骸,踏歌雾霭;君心可晴,且歌且行

ExtJS列表中根据行记录来控制单元格是否可以编辑

ExtJS中,对Grid列表进行编辑,可以通过加入ExtJS列表插件来实现(在grid->columns->column增加editor属性),控制列表中的哪些字段可以编辑比较容易实现。不过根据点击记录的内容来控制是否可以编辑,就稍微复杂一些了,下面简单介绍一下。

1 说明

Use beforeedit event:

grid.on('beforeedit', function(editor, e) {
  if (e.colIdx === 0 && e.record.get('status') == 4)
    return false;
});

UPDATE

The solution above is not working for rowEditor. However you can make needed field to be disabled on beforeedit. To do that you should be able to access rowediting plugin. Assign pluginId to plugin:

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1,
        pluginId: 'rowEditing'
    })
],

Now just disable needed field if some conditions are met:

grid.on('beforeedit', function(e) {
    if (e.record.get('status') == 4)
        grid.getPlugin('rowEditing').editor.form.findField('neededColumnDataIndex').disable();
    else
        grid.getPlugin('rowEditing').editor.form.findField('neededColumnDataIndex').enable();
});

Here is demo (try to edit first row).

2 demo

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data: [
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
        {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
    ]
});

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

grid.on('beforeedit', function(e) {
    if (e.record.get('phone') == "555-111-1224")
        grid.getPlugin('rowEditing').editor.form.findField('name').disable();
    else
        grid.getPlugin('rowEditing').editor.form.findField('name').enable();
});

参考

http://stackoverflow.com/questions/7679364/extjs-4-rowediting-disable-edit-on-one-column-based-on-record

Copyright ©2013-2015 LYM Power by Github. Base on Jekyll-Bootstrap.