<title>编辑pannel</title>
<script type="text/javascript" src="ext-3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.1.1/ext-all.js"></script>
<link rel="stylesheet" href="ext-3.1.1/resources/css/ext-all.css" />
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//begin
//创建列
var cm =new Ext.grid.ColumnModel([
{header:"编号",dataIndex:"Id",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},
{header:"姓名",dataIndex:"Name",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))}//这属性指定了用户编辑时所用的编辑器
]);
//创建recode结构
var recode =Ext.data.Record.create([{name:"Id",mapping:0},{name:"Name",mapping:1}]);
//创建data
var data =[["1","张三"],["2","李四"],["3","王五"]];
//创建reader
var reader =new Ext.data.ArrayReader({},recode);
//创建一个store返回规范的recode对象
var store =new Ext.data.Store(
{
proxy:new Ext.data.MemoryProxy(data),
reader:reader,
pruneModifiedRecords :true
}
);
//加载数据
store.load();
//创建editpanel
var editpanel =new Ext.grid.EditorGridPanel({
title:"修改pannel",
height:500,
cm:cm,
store:store,
tbar:new Ext.Toolbar(["-",{text:"添加一行",handler:function(){
var initValue={Id:"",Name:""};//定义一个recode对象
var p =new recode(initValue); //根据上面创建的recode 创建一个默认值
editpanel.stopEditing();
store.insert(0,p);//在第一个位置插入
editpanel.startEditing(0,0);//指定的行/列,进行单元格内容的编辑
p.dirty=true;
p.modified=initValue;
if(store.modified.indexOf(p)==-1)
{
store.modified.push(p);
}
}},"-",{text:"删除一行",handler:function(){
//执行山出行
var sm =editpanel.getSelectionModel();//返回grid的SelectionModel
//getSelectionModel():取得选择模式
//
var cl =sm.getSelectedCell();//Ext.grid.CellSelectionModel 取得当前选择的单元格,返回一数组,其格式:[rowIndex, colIndex]
if(cl==null)
{
Ext.MessageBox.alert("您未选中任何行","您未选中任何行");
}
else
{
var recode=store.getAt(cl[0]);
store.remove(recode);
}
}}]),
renderTo:"editpanel"
});
//end
})
</script>
<div id="editpanel"></div>
</body>效果如下