概述:表格面板类Ext.grid.Panel 两个别名xtype:(gridpanel,grid)
重要的配置参数
columns:Array列模式(Ext.grid.column.Columnxtype:gridcolumn)
重要配置参数:
text:String 列的标题 默认是""
dataIndex:String 和Model的列一一对应
sortable:true 可以整理,可以进行分类的
field:可编辑字段配置
重要方法:
getStore 得到这个store的集合
重要属性
ownerCt 获取父类的组件对象
title:String表格的标题
renderTo:Mixed 把表格渲染到什么地方
width:Nunber 宽
height:Number 高
frame:Boolean 是否填充渲染这个Panel
forceFit:true 设定表格的列是否自动填充
store:stroe 数据集合
tbar:[] 头部工具栏
dockedItems:'checkboxmodel' Object/Array 表格停靠在上下左右的工具条
multiSelect:true 允许多选
plugins插件
代码实现:
首先需要定一个Model类和stroe数据集,用的是内存代理机制,也可以使用Ajax请求后台。
//定义个User类
Ext.define("user",{
extend:"Ext.data.Model",
fields:[
{name:"name",type:"string",srotable:true},
{name:"age",type:"int",srotable:true},
{name:"email",type:"string",srotable:true}
]
});
//使用内存代理机制,定义数据数组
varuserData=[
{name:"张帅鹏",age:21,email:"marico_zhang@163.com"},
{name:"王",age:21,email:"marico@163.com"},
{name:"宋",age:21,email:"zhang@163.com"},
{name:"李",age:21,email:"marico_zhang@163.com"},
{name:"陈",age:21,email:"zhang@163.com"},
{name:"乔",age:21,email:"marico_zhang@163.com"}
];
//创建一个数据集stroe
Ext.create("Ext.data.Store",{
model:"user",
storeId:"s_user",//可以用StroeManager进行管理
proxy:{
type:"memory",
data:userData
},
autoLoad:true
});
然后创建gird组件来实现功能
实现了数据显示、记录多选、工具按钮事件、前台可编辑等功能,
(function(){
Ext.onReady(function(){
//初始化Ext组件
Ext.QuickTips.init();
//创建表格时候要用 表格的面板
vargrid=Ext.create("Ext.grid.Panel",{
title:"GridDemo", //标题
frame:true, //面板渲染
//forceFit:true,//设置是否自动填充
width:600,
height:280,
columns:[ //列模式 并设置前台编辑
{text:"Name",dataIndex:"name",width:100},
{text:"Age",dataIndex:"age",width:100},
{text:"Email",dataIndex:"email",width:350,
field:{
xtype:"textfield",
allowBlank:false
}
}
],
tbar:[ //上方工具栏
{xtype:"button",text:"添加",iconCls:"table_add"},
{xtype:"button",text:"删除",iconCls:"table_delete",
handler:function(o){ //参数为button这个组件对象
//得到这个grid表格对象
//vargrid=o.findParentByType("gridpanel"); //使用方法得到
vargrid=o.ownerCt.ownerCt;//使用属性得到
//Ext.Msg.alert("数据统计:","共"+grid.getStore().getCount()+"条数据信息");
//得到选中的数据集合
vardata=grid.getSelectionModel().getSelection();
if(data.length==0){
Ext.Msg.alert("提示","你最少要选择一条数据");
}else{
//1.先得到ID的数据(name) 也就是DB中的主键
varst=grid.getStore();
varids=[];
Ext.Array.each(data,function(record){
ids.push(record.get("name"));
});
//2.后台操作(delete)
// Ext.Ajax.request({
// url:"",
// params:{ids:ids.join(",")},
// method:"POST",
// timeout:2000,
// success:function(response,opts){
// //请求成功,再删除前台数据
// Ext.Array.each(data,function(record){
// ids.push(record.get("name"));
// });
// }
// });
//3.前端操作DOM进行删除(ExtJs) 也就是同步一下信息
Ext.Array.each(data,function(record){
st.remove(record);
});
}
}},
{xtype:"button",text:"修改",iconCls:"table_edit"},
{xtype:"button",text:"查看",iconCls:"table_comm"}
],
dockedItems:[{
xtype:"pagingtoolbar",
store:Ext.data.StoreManager.lookup("s_user"),
dock:"bottom",//指定在那个位置
displayInfo:true //设置显示
}],
selType:"checkboxmodel", //设置选择模式,设置成多选框的模式
multiSelect:true, //设置成多选
renderTo:"griddemo",//渲染到div中
store:Ext.data.StoreManager.lookup("s_user"),//指定数据集
//设置前台编辑,首先在列模式中指定,然后使用插件机制来添加插件
plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit:1
})
]
});
});
})();