extjs -- 编辑表格EditorGrid

最新推荐文章于 2016-03-12 13:25:00 发布

原创最新推荐文章于 2016-03-12 13:25:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

24 篇文章

订阅专栏

这篇博客介绍了如何使用ExtJS创建一个可编辑的表格（EditorGrid），包括设置列模型（ColumnModel）、定义数据和存储（Store）、以及加载数据到表格中。通过示例代码展示了如何为每个单元格添加编辑器，确保输入数据的有效性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function(){
       var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id',editor:new Ext.grid.GridEditor(new Ext.form.
        TextField({
         allowBlank:false
        }))},
        {header:'名称',dataIndex:'name',editor:new Ext.grid.GridEditor(new Ext.form.
        TextField({
         allowBlank:false
        }))},
        {header:'描述',dataIndex:'descn',editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
       ]);

       var data = [
     ['1','name1','descn1'],
     ['2','name2','descn2'],
     ['3','name3','descn3'],
     ['4','name4','descn4'],
     ['5','name5','descn5'],
     ['6','name6','descn6']
   ];

   var store = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader:new Ext.data.ArrayReader({},[
      {name:'id'},
      {name:'name'},
      {name:'descn'},
     ])
   });
      store.load();
       var grid = new Ext.grid.EditorGridPanel({
        renderTo:'grid',
        store:store,
        cm:cm,
        autoHeight:true
       });

      });