Gird编辑

1.grid可编辑条件
为了让 grid 可编辑,我们需要做四件事情。它们是:
•表格的定义由 Ex.grid.GridPanel 转化为 Ext.grid.EditorGridPanel;
• 为 grid 的配置添加 clicksToEdit——这个选项不是必须的,默认双击触发编辑;
• 为每列建立一个表单字段用来编辑;
• 通过 editor 配置把表单字段传递给 column model。

var title_edit = new Ext.form.TextField(); 
var director_edit = new Ext.form.TextField({vtype: 'name'}); 
  var tagline_edit = new Ext.form.TextField({ 
  maxLength: 45 
}); 
var grid = new Ext.grid.EditorGridPanel({ 
  renderTo: document.body, 
  frame:true, 
  title: 'Movie Database', 
  height:200, 
  width:520, 
  clickstoEdit: 1, 
  store: store, 
  columns: [ 
    {header: "Title", dataIndex: 'title',editor: title_edit}, 
    {header: "Director", dataIndex: 'director',editor: director_edit}, 
 
 
{header: "Released", dataIndex: 'released',renderer: 
Ext.util.Format.dateRenderer('m/d/Y')}, 
    {header: "Genre", dataIndex: 'genre',renderer: genre_name}, 
    {header: "Tagline", dataIndex: 'tagline',editor: tagline_edit} 
  ]  
});

2.grid字段的类型
• TextField
• NumberField
• ComboBox
• DateField
• TimeField
• CheckBox
a.日期

release_edit = new Ext.form.DateField({ 
    format: 'm/d/Y' 
});
{header: "Released", dataIndex: 'released', renderer: 
Ext.util.Format.dateRenderer('m/d/Y'), editor: release_edit}

b.文本

var title_edit = new Ext.form.TextField();
{header: "Title", dataIndex: 'title',editor:title_edit}

c.下拉框

var genre_edit = new Ext.form.ComboBox({ 
  typeAhead: true, 
  triggerAction: 'all', 
  mode: 'local', //当地的
  store: genres, //集合
  displayField:'genre', 
  valueField: 'id' 
}); 
{header: "Genre", dataIndex: 'genre', renderer: genre_name, editor: genre_edit}

3.改动列各种值

属性	说明
grid	编辑事件所发生的 grid。
record	正在编辑的记录;其他列的数据可以通过使用这个对象的“data”属性找到。
field	被编辑列的名字。
value	包含该单元格改动后的数据的字符串。
originalValue	包含该单元格原始数据的字符串。
row	被编辑的行的 index(序号)。
column	被编辑列的 index(序号)。

  listeners: {      
        afteredit: function(e){ 
            if (e.field == 'director' && e.value == 'Mel Gibson'){ 
                Ext.Msg.alert('Error','Mel Gibson movies not 
                          e.record.reject(); 
                 }else{    
                     e.record.commit();  
                 }      
       }   
 }

4.对表格的操作
a.删除,并更新本地数据
grid.getStore().remove(sel);
b.新增

和定义的grid的名称和类型一致  
var ds_model = Ext.data.Record.create([ 
  'id', 
  'coverthumb', 
  'title', 
  'director', 
  {name: 'released', type: 'date', dateFormat: 'Y‐m‐d'}, 
  'genre', 
  'tagline', 
  {name: 'price', type: 'float'}, 
  {name: 'available', type: 'bool'} 
]);
插入第一行
{ 
  text: 'Add Movie', 
  icon: 'images/table_add.png', 
  cls: 'x‐btn‐text‐icon', 
  handler: function() { 
    grid.getStore().insert( //方法
        0, //开始的位置
       new ds_model({ 
        title:'New Movie', 
        director:'', 
        genre:0, 
        tagline:'' 
      })      );      
    grid.startEditing(0,0); //第一格可编辑
  }  
} 
插入最后一行
grid.getStore().getCount()//从最后一行开始
grid.startEditing(grid.getStore().getCount()‐1,0);

猜你喜欢