研究Ext有一段时间了,对Ext表格的学习心得写出来和大家一起分享。
1.表格的建立
建立表格基本上分3步骤:
(1)数据获取
(2)定义表头,即就是定义表格的列名,宽度,是否可以排序等
(3)绑定数据和表头
表格的一些其他特征也是在这些步骤当中实现的,我们以一个列子来说明表格的建立哈
var com_id;
var com_table_field = new Ext.data.Record.create([{//定义数据的字段
name:"com_id"
},{
name:"com_num"
},{
name:"com_name"
},{
name:"com_pren"
},{
name:"com_tel"
},{
name:"com_memo"
}]);
var com_table_store = new Ext.data.Store({//从后台获取数据
proxy:new Ext.data.HttpProxy({
url:"companytableAction.do"
})
,reader:new Ext.data.JsonReader({
totalProperty:"totalProperty"
,root:"root"
}
,com_table_field
)
});
var com_table_cm = new Ext.grid.ColumnModel([//建立表头,即列的属性
new Ext.grid.RowNumberer()//编号
,new Ext.grid.CheckboxSelectionModel()//可选择框
,{
header:"主键"//列名
,dataIndex:"com_id"//和com_table_field定义的相对应
,width:50//定义了列宽
,disabled:false//不能编辑
,hideable:false //隐藏列下拉框中选择项里面该项的内容
,hidden:true//隐藏列
},{
header:"编号"
,dataIndex:"com_num"
,width:50
,sortable:true
},{
header:"公司名称"
,dataIndex:"com_name"
,width:150
,sortable:true//排序
},{
header:"系统负责人"
,dataIndex:"com_pren"
,width:100
},{
header:"联系电话"
,dataIndex:"com_tel"
,width:100
},{
header:"备注"
,dataIndex:"com_memo"
,width:150
}
]);
var com_grid = new Ext.grid.GridPanel({//数据绑定
ds:com_table_store//数据
,cm:com_table_cm//表头
,width:600//表格的宽度
,height:300//表格的高度
,enableHdMenu:true//列表头的下拉框,true为显示,falsh为不显示
,loadMask:{
msg:"正在加载数据,请稍候..."
}//数据加载时候显示
,trackMouseOver:true//鼠标滑过时的高亮效果
,tbar: new Ext.Toolbar({//表格上方的按钮
items:[{
text:"添加"
},{
text:"修改"
},{
text:"删除所选"
,handler:function(e){
var com_rows = com_grid.getSelectionModel().getSelections();//获取你选择的行
if(com_rows.length==0){
Ext.MessageBox.alert("警告","请选择要删除数据!");
}else{
Ext.MessageBox.confirm("警告","确定删除以选数据?",function(ret){
if(ret=="yes"){
var com_id_del = new Array(com_rows.length);
for(var i=0;i<com_rows.length;i++){
com_id_del[i]=com_rows[i].get("com_id");
}
Ext.get(document.body).mask("请稍候,请求提交中....","x-plain");
var com_id_str = com_id_del;
Ext.Ajax.request({
//Ext.getBody.mask("请稍候,数据提交中....","x-mask-loading");
url:"dcomAction.do?p_com_id="+com_id_str+""//提交要删除数据的主键
,success:function(response, options){
var obj = Ext.util.JSON.decode(response.responseText);
Ext.MessageBox.alert("警告",obj.Mag);
for(var i=0;i<obj.result;i++){
com_table_store.remove(com_rows[i]);
}
Ext.get(document.body).unmask();
}
,failure:function(){
Ext.get(document.body).unmask();
Ext.MessageBox.alert("警告","删除失败");
}
})
}
})
}
}
}]
})
,bbar: new Ext.PagingToolbar({
pageSize:10
,store:com_table_store
,displayInfo:true
,displayMsg:"显示第 {0} 条到 {1} 条记录,一共 {2} 条"
,emptyMsg:"没有数据"
})
});