?
//column model
var eidtorGridColumnModel = new Ext.grid.ColumnModel([
{
header:'编号',dataIndex:'id',editor : new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank: false
}))
},
{header:'姓名',dataIndex:'name',editor : new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: false
}))
},
{
header:'描述',dataIndex:'desc',editor : new Ext.grid.GridEditor(new Ext.form.TextField({
allowBlank: false
}))
}
]);
/**
* 本想直接new 一个Record,一看API发现这句话
* Record ( [ Object data ], [ Object id ] )
* 此构造函数不应该用来创建Record对象。 作为替代,使用create 创建一个Ext.data.Record的子类
*/
var MyRecord = Ext.data.Record.create([
{name:'id',type:'Number'},
{name:'name',type:'String'},
{name:'name',type:'String'}
]);
var editorGridStore = new Ext.data.JsonStore(
{
fields : [
'id','name','desc'
],
data : data2
}
);
//new一个可编辑的表格
var editorGrid = new Ext.grid.EditorGridPanel(
{
id:'eg',
renderTo: 'editorGrid',
cm : eidtorGridColumnModel,
autoHeight:true,
store : editorGridStore,//这里如果在内部new JsonStore的话,在事件中就无法引用到这个store了
tbar : new Ext.Toolbar(
[
'-',
{
text:'添加',
handler : function(){
var newRow = new MyRecord(
{
id:'',
name:'',
desc:''
}
);
editorGrid.stopEditing();
editorGridStore.insert(0,newRow),
editorGrid.startEditing(0,0);
}
},
'-',
{
text:'删除',
handler:function(){
var sm = editorGrid.getSelectionModel();
/**
* AbstractSelectionModel类有两个子类CellSelectionModel, RowSelectionModel-->CheckboxSelectionModel
* 对于EditorGridPanel获取的应该是CellSelectionModel的对象,那么就可以调用它的
* getSelectedCell()来获取选中的格子的数组的位置
*/
var cell = sm.getSelectedCell();//这个是获取选中的格子在数组中的位置,如:[0,1],以数组的形式表示
var record = editorGridStore.getAt(cell[0]);//这里是选择了store中的第cell所在的行的record
/**
* 这个record相当于store中的一条数据,store内有一个名为data的MixCollection,它用来存放reader解析来的数据,
* 因此可以用它来得到具体某一行的数据,如store.getAt(0)会得到第一行的record,record.get('name')可以得到相应
* 名称的值,而对store进行添加或者删除操作都会反映到html界面中来
*/
editorGridStore.remove(record);
}
},
'-',
{
text:'保存',
handler : function(){
/**
* 对于做了修改的行,store.modified这个数组里记录下了修改行的信息
* record.json记录了原始数据,如果当前Record是通过 ArrayReader 或者一个JsonReader 创建时才存在
* record.data记录了修改后的数据
* record.fields存放的是列的信息(用MixCollection存的),可以取到列信息
*
* 发现个问题(不知道是我还没有深入学习还是因为是个BUG):
* 一旦你修改了某个格子里面的数据,modified这个数组里面就会添加一条record,
* 如第一行数据为:1,sky,human
* 现在改成:2,sky,humn
* modified里抽对应的record为:json-->1,sky,human data-->2,sky,human
* 我这个时候将2重新变为1,照理说这个时候modified应该清空,而ext却没做任何处理,
* modifed里面json与data都成了1,sky,human,这个时候如果进行保存操作的话会出现什么问题?
*/
var record = editorGrid.getStore().modified[0];
alert(record.get('name'));
}
}
]
)
}
);
store进行操作时会触发相应的事件,我猜测在事件中会对调用这个store的组件进行重绘