为了让 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);