Question

我有一个简单的网格面板，需要支持编辑。在视觉上，它似乎工作正常，但一旦我尝试获取数据存储中的所有用户，就好像所有编辑都被忽略。

以下是代码：

var myData = 
[        
];

var store = Ext.create('Ext.data.ArrayStore', 
                        {
                            model: 'User',
                            data: myData
                        });

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: 
    [
        {
            id: 'email',
            header: 'User email',
            dataIndex: 'email',
            flex: 1,
            field: 
            {
                allowBlank: false
            }
        },           
        {
            xtype: 'checkcolumn',
            header: 'IsManager',
            dataIndex: 'isManager',
            width: 55
        },
        {
            xtype: 'checkcolumn',
            header: 'IsContractor',
            dataIndex: 'isContractor',
            width: 55
        }
    ],
    selModel: {
        selType: 'cellmodel'
    },        
    frame: false,
     listeners : 
     {
        delay: 1, // time for render
        validateedit: function(editor, e)
        {
            //console.log(e.value);
            //console.log(e.originalValue);
            e.cancel = true;
            e.record.data[e.field] = e.value;
        }
     },
    tbar: 
    [
        {
            text: 'Add User',
            handler : function()
            {
                // Create a record instance through the ModelManager
                var r = Ext.ModelManager.create(
                {
                    email: '',
                    isManager: true,
                    isContractor: false
                }, 
                'User');

                store.insert(store.data.length, r);
                cellEditing.startEditByPosition({row: store.data.length, column: 0});
            }
        },
        {
            text: 'Remove selected user',
            handler : function()
            {
                var selection = grid.getView().getSelectionModel().getSelection();

                if(selection)
                    store.remove(selection); // all selections
            }
        }
    ],
    plugins: [cellEditing]
});

我使用的是Extjs 4.2

即使调用store.commitChanges（）也没什么区别。如果我没有调用它并通过商店，我可以看到记录上有脏标志，但修改后的值与初始值相同！奇怪的是，如果我在validateedit函数中放置断点，我可以看到值存在。但是，一旦完成所有编辑和添加，当我浏览store.data.items时，所有行看起来都是一样的（= Add.ModelManager.create在Add user中输出的内容）。我已经尝试在商店中将autoSave，autoSync和autoLoad设置为true，但它没有任何区别。

编辑：

以下是用户模型：

Ext.define('User', 
    {
        extend: 'Ext.data.Model',
        fields: [            
            {name: 'email', type: 'string'},            
            {name: 'isManager', type: 'bool'},
            {name: 'isContractor', type: 'bool'},            
        ]
    });

Answer 1

我不认为e.record.data[e.field] = e.value;正在更改商店中的值，根据文档它只是一个util对象。如果您确实想要修改商店，则应使用以下内容：

 validateedit: function(editor, e)
 {
        store.getbyId("Your object Id property").set(e.field, e.value);
 }

但您的模型需要'Id'或'IdProperty'

Ext.grid.Panel编辑被忽略

1 个答案: