ext gridpanel plugin rowediting编辑保存

Ext.grid.plugin.RowEditing,可编辑的grid

(2012-05-28 14:48:44)

转载▼

标签： 杂谈

项目里有个grid字段不多,想改成可编辑的表格形式进行修改操作,相比较选择信息后点击编辑按钮有更好的用户体验.查找api,先是找到了Ext.grid.plugin.CellEditing,使用后效果如下

从字面意思可以看出是单个cell单元格的编辑,只是修改了数据值,并不能保存.后来又找到了Ext.grid.plugin.RowEditing.效果如下,基本满足要求.

核心代码如下:

  var newStroeList=Ext.create('Ext.grid.Panel',

  {

      store: newStroeList,

      selModel: newStroeList,

      height : 400,

      columns:[

            {header: '关联类型', dataIndex: 'relatedType',align:'center',flex:1, editor: {

                 xtype:'textfield'

             }}

          ],

          plugins: [

                    Ext.create('Ext.grid.plugin.RowEditing', {

                        clicksToEdit: 2

                    })

                ],

      listeners: {

  'edit':function(obj){

  Ext.Ajax.request({请求保存代码}

    });

页面效果如下

代码中,红色加粗部分就是将一个普通的grid添加为可编辑的grid, clicksToEdit: 2 

这里是表示双击,相当于doubleClick,如果设置为1的话就是点击,相当于onClick,默认值为2,到需要改变值的column里为其添加一个 editor: { xtype:'textfield' } 的属性,xtype根据实际需要选取.写到这里,就可以有编辑效果了,但是点击保存按钮毫无作用,就得为这个grid添加一个listener事件,如黑色加粗代码,完成后,可实现正确的简介操作

.