代码中有很多详细的例子可以参考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="button.css" />
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="mode.js"></script>
<script type="text/javascript" src="01gridDemo.js"></script>
</head>
<body>
<div id="fanpei">123</div>
</body>
</html>
button.css
.icon-add{
background-image:url(icons/fam/image_add.png) !important;
}
.icon-delete {
background-image:url(icons/fam/delete.gif) !important;
}
.icon-refresh {
background-image:url(icons/fam/table_refresh.png) !important;
}
.icon-look {
background-image:url(icons/fam/application_go.png) !important;
}
mode.js
//user的类
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'string',sortable:true},
{name:'age',type:'int',sortable:true},
{name:'email',type:'string',sortable:true},
],
})
//user的对象
//var user=Ext.create("user",{})
Ext.create("Ext.data.Store",{
model:'user',
storeId:'s_user',//一旦设定了storeId就可以用store.manager进行管理
proxy:{
type:'ajax',
url:'/exjs/extjs!getUserList.action',
reader:{
type:'json',
root:'topics'
},
writer:{
type:'json'
}
},
autoLoad:true,
})
01gridDemo.js
(function(){
Ext.onReady(function(){
Ext.QuickTips.init();
//创建一个grid的高级组件会用到grid的面板
var grid=Ext.create("Ext.grid.Panel",{
title:'我的窗口',//标题
frame:true,//面板渲染
forceFit:true,//列的自动填充
width:600,
height:280,
columns:[//列模式的集合
{text:'Name',//模型标题
dataIndex:'name'//对应的数据模型
},
{text:'Age',dataIndex:'age'},
{text:'Email',dataIndex:'email',
field:{//输入框式的编辑模式 必须加插件
xtype:'textfield',
allowBlank:false
}
}
],
tbar:[
{xtype:'button',text:'添加',iconCls:'icon-add'},
{xtype:'button',text:'删除',iconCls:'icon-delete',handler:button_delete},
{xtype:'button',text:'修改',iconCls:'icon-refresh'},
{xtype:'button',text:'查看',iconCls:'icon-look'},
],
dockedItems:[{
xtype:'pagingtoolbar',//分页工具栏组件
store:Ext.data.StoreManager.lookup('s_user'),
dock:'bottom',//放在下面
displayInfo:true,//是否展示信息
}],
plugins:[//插件
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit:1//单元格 点一下就可以编辑,需要设置对应列的列模式。
})
],
selType:'checkboxmodel',//选择框组件
multiSelect:true,//允许选择框多选
renderTo:Ext.get('fanpei'),
store:Ext.data.StoreManager.lookup('s_user'),
});
})
}
)();
function button_delete(o)//删除的按钮事件
{
alert(o.text);//获取该组件的text名称
//下面是第一种获得grid的方法
//var grid=o.findParentByType("gridpanel");//找到父组件的对象,获取对象来操纵这个对象
//下面是第二种获取grid的方法
var grid=o.ownerCt.ownerCt;//因为这个按钮的第一个父组件是工具条,工具条的父组件才是grid
//alert(grid.getStore().getCount());//获取这个父组件中的对象的store中数据的个数
//假如我要删除某几行数据。那么我先要获取我选择了哪些数据。
var data=grid.getSelectionModel().getSelection();
if (data.lenth==0)
{
alert(您至少要选择一条数据);
}else{
//1.得到ID的数组(name)
var st=grid.getStore();
var ids=[];
Ext.Array.each(data,function(re){
ids.push(re.get('name'));
})
//2.后台操作(delete)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
})
}
})
//3.前段操作DOM进行删除(Extjs)
};
};