ExtjsDemo--gridpannel 调用绑定本地data同时删除行案例
注同样的方式在ext-3.0下会报typeError 换成ext-3.1就可以了。具体为什么3.0不行。暂时还没看ext3.0源码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grid</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" />
<script type="text/javascript">
Ext.onReady(function(){
//创建checkbox
var sm =new Ext.grid.CheckboxSelectionModel();
//创建gridview列
var cl=new Ext.grid.ColumnModel([
//创建数据列
new Ext.grid.RowNumberer(),
sm,
{header:"编号",dataIndex:"Id",sortable:true},
{header:"姓名",dataIndex:"name",sortable:true}
]);
//列创建完毕 列包括排序，列编号，checkbox
//创建存储到grid的数据表store
var data=[["1","张三",25],["2","李四",24],["3","王五",33],["4","赵六",18]];
//规定recode数据的规则name是绑定列的标记，mapping表示其映射到数据中的那个位置。
var recode=Ext.data.Record.create([{name:"Id",mapping:0},
{name:"name",mapping:0}]);
//以data的第一个字段为主键
var reader=new Ext.data.ArrayReader({id:0},recode);
//创建一个store 其数据通过proxy获取。由reader解析为标准的recode对象
var store=new Ext.data.Store(
{
proxy:new Ext.data.MemoryProxy(data),
reader:reader
}
);
//
// store数据要加载
store.load();
var gpanel=new Ext.grid.GridPanel(
{
title:"显示数据",
cm:cl,//列对象
sm:sm,//checkbox对象
height:500,
viewConfig:{forceFit:true},//满行显示
store:store,
renderTo:"gpanel"
}
);
//删除gridpanel行
Ext.get("del").on("click",function(){
store.remove(store.getAt(1));
gpanel.view.refresh();
});
})
</script>
</head>
<body>
<div id="gpanel"></div>
<input type="button" value="删除行" id="del" />
</body>
</html>