ExtJS上的单元格编辑

Question

I am trying to make my grid.Panel cells editable with one click. I have following code that doesn't work. I followed this this link and implemented in my program but still clicking doesn't enable editing. I also tried RowEditing but it didn't work either. There is no problem getting info from database.

 Ext.define('CategoryNumberGrid', { extend: 'Ext.grid.Panel', selType: 'cellmodel', pageSize: 25, defineColumns:function(){ this.columns=[ { header: 'Code', dataIndex: 'code', renderer: Ext.util.Format.htmlEncode },{ header: 'Description', dataIndex: 'descr', renderer: Ext.util.Format.htmlEncode }]; }, model: 'CategoryNumberModel', initComponent:function(){ this.defineColumns(); var config = { autoLoad: true, autoSync: true, remoteFilter: true, remoteSort: true, proxy: getProxy("CategoryNumberModel"), model: 'CategoryNumberModel', sorters:[ { property:'code', direction:'ASC' }], pageSize: this.pageSize }; this.Store = Ext.create('Ext.data.Store', config); this.editing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit:1}); this.plugins=[this.editing]; this.callParent(); } }); 

Answer 1

• Your sample is not complete (not runnable) as per the question guidelines.
• JavaScript is case-sensitive. this.Store won't help a grid to find its data.
• Your columns are lacking the editor config .

I have corrected the issues: https://fiddle.sencha.com/#fiddle/1f41

For future questions, please consider making a working fiddle that exhibits the problem.