3.1 表格的特性简介
>.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能;
>.表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,其xtype为grid;
>.表格控件必须包含列(columns)定义信息,并指定表格的数据存储器(Ext.data.Store);
3.2 制作一个简单的表格
>1.列的定义是一个JSON数组,它是整个表格的列模型,应该首先创建;
var columns = [
{header:'编号',dataIndex:'id'},
//每一行数据元素描述表格的一列信息; 包含首部显示文本(header),列对应的记录集字段(dataIndex);
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
];
>2.定义表格中要显示的数据;
var data = [
['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3']
]
>3.创建一个数据存储对象;表格必须配置的属性;负责把各种各样的原始数据(如二维数组,JSON,XML等)转换成Ext.data.Record类型的对象;
var store = new Ext.data.ArrayStore({
data:data,
fields:[
//这里定义的3个名称与columns的dataIndex相对应;将data数据与columns列模型链接;
{name:'id'},
//{name:'id',mapping:1}, //可以设置mapping来设置列的排序;
{name:'name'},
{name:'descn'}
]
});
store.load(); //初始化数据;
//store对应两个部分:proxy(指获取数据的方式)和render(指如何解析这一堆数据);
>4.创建表格
var grid = new Ext.grid.GridPanel({
autoHeight:true,
renderTo:'grid', //指示Ext将表格渲染到什么地方;
store:store,
columns:columns
})
3.3 表格常用功能
3.3.1 部分属性功能
>1.enableColumnMove 拖放移动列;
>2.enableColumnResize 改变列宽;
>3.stripeRows 斑马线效果;
>4.loadMask 显示"Loading..."
3.3.2 自主决定每列的宽度
//每列默认是100px;
>1.自定义列宽
var columns = [
{header:'编号',dataIndex:'id',width:200}
]
>2.forceFit
var grid = new Ext.grid.GiidPanel({
renderTo:'grid',
forceFit:true //让每列自适应填满表格;
});
3.3.3 sortable表格列排序
var columns = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true}
])
//Ascending:正序; Descending:倒序;
3.3.4 中文排序
3.3.5 显示日期类型数据
//Ext可以从后台取得日期类型的数据,交给表格进行格式化;
var columns = [{header:'日期',dataIndex:'date',renderer:Ext.util.Format.dateRenderer('Y-m-d')}];
//renderer的属性值就是Ext提供的日期格式化方法;
var data = [['1','name1','descn1','1970-01-15T02:58:04']]
var store = new Ext.data.ArrayStore({
data:data,
fields:[{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}]
//type属性告诉ExtJS解析数据时按日期类型处理;
//dateFormat:将数据中的字符串格式转换成日期格式;
});
3.4 表格渲染
>1.修改文字颜色样式和添加图片;
function renderSex(value){
if(value == 'male'){
return "<span style='color:red; font-weight:bold'>红男</span><img src="user_male.png" />";
}else{
return "<span style='color:green, font-weight:bold'>绿女</span><img src="user_female.png" />";
};
//在返回value之前,拼装上相应的HTML和CSS即可;
};
var columns = [{header:'性别',dataIndex:'sex',renderer:renderSex}];
//renderer的值是一个自定义函数;
>2.其他可用参数
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
var str = value+cellmeta+record+rowIndex+columnIndex+store;
return str;
}
//value:将要显示到单元格的值;
//cellmeta:单元格的属性,主要有id和CSS;
//record:所在行的数据对象;
//rowIndex:所在行行号;
//columnIndex:所在列列号;
//store:构造表格传递的ds;
3.5 给表格的行和列设置颜色
<style>.yellow-row{ background-color: #FBF8BF !important; }</style>
Ext.onReady(function(){
var data = [['boy',0,'#fbf8bf']]; //表格数据;
var store = new Ext.data.ArraySotre({ //数据存储对象;
data:data, //引入表格数据; 并将数据转换成Ext.data.Record类型的对象;
fields:[ //与columns参数对应;
{name:'name',type:'string'},
{name:'sex',type:'int'},
{name:'color',type:'string'}
]
});
store.load(); //初始化数据;
var grid = new Ext.grid.GridPanel({
store:store, //引入record数据对象;
columns:[ //创建列模型;
{header:'name',dataIndex:'name'},
{header:'sex',dataIndex:'sex'}
],
renderTo:'grid',
viewConfig:{
enableRowBody:true,
getRowClass:function(record,rowIndex,p,ds){
var cls = 'white-row'; //默认是白色;
switch(record.data.color){ //先查找record对象即store,再查找data属性,再查找到color在data里对应的值;
case '#fbf8bf': //匹配值,设置class名;
cls = "yellow-row"
break;
}
return cls;
}
}
});
});
3.6 自动显示行号和复选框
3.6.1 自动显示行号
var columns = [
new Ext.grid.RowNmuberer(),
//在列模型中加入RowNumberer对象,
{header:'姓名',dataIndex:'name'}
]
>.删除行/刷新表格
Ext.get('remove').on('click',function(){
store.remove(store.getAt(0)); //删除第一条数据;
grid.view.refresh(); //刷新视图重新加载store，并重新渲染模板的数据;
})
3.6.2 复选框
var sm = new Ext.selection.CheckboxModel({checkOnly:true});
//CheckboxModel会在每行数据前添加一个复选框;
//checkOnly属性表示是否可以通过选中行进行选取,还是必须选中复选框选取;
var grid = new Ext.grid.GridPanel({
...,
selModel:sm
//selModel在总体上控制用户对表格的选择功能;
})
3.7 选择模型
>1.RowModel(行选择模型)
//在定义Ext.grid.GridPanel时,默认使用RowModel--行选择模型;
var grid = new Ext.grid.GridPanel({
...,
sm:new Ext.grid.RowModel({singleSelect:true}) //设置只能选中一行;
})
>2.CellModel(单元格选择模型)
//在EditorGrid里默认使用CellModel;
>3.选中行信息显示
grid.on('itemclick',function(){
//表格绑定单机事件;
var selected = grid.getSelectionModel().selected; //gSM():返回正在使用的选择模型 selected:所有当前已选择的记录的混合集合
for(var i=0; i<selected.getCount(); i++){
var record = selected.get(i);
Ext.Msg.alert('提示',record.get("id")+","+record.get("name")+","+record.get("descn"));
}
})
3.8 表格视图--Ext.grid.GridView
//表格控件都遵循MVC模型
//Ext.data.Store:可看做模型(Model);
//Ext.grid.GridPanel:设置的各种监听器可看做控制器(Controller);
//Ext.grid.GridView:对应的就是视图(View);
//通常情况下不需要自行创建Ext.grid.GridView的实例,Ext.grid.GridPanel会自动生成对应的实例,使用默认的样式将表格显示到页面上;
//若希望操作Ext.grid.GridView的属性时,可以通过Ext.grid.GridPanel的getView()函数来获取当前表格使用的视图实例;
//与GridView相关的操作都集中在视图的显示功能部分;grid.getView()必须在创建Ext.grid.GridPanel之后调用,它只能获得Ext.grid.GridPanel中创建好的GridView实例;
//可以使用Ext.grid.GridPanel的viewConfig参数,在创建GridView时设置一些初始参数;
var grid = new Ext.grid.GridPanel({ //控制器Controller;
store:new Ext.data.ArrayStore({ //模型Model;
data:data,
fields:meta,
autoLoad:true
}),
columns:meta,
renderTo:'grid', //GridPanel自动创建对应的实例,即视图View;
width:450,
height:80,
viewConfig:{ //为创建的GridView设置初始参数;
columnsText:'显示的列', //中文显示;
scrollOffset:30, //滚动条的宽度,默认是20px;
sortAscText:'升序',
sortDescText:'降序',
forceFit:true //自适应列宽;
}
});
3.9 表格分页
3.9.1 为表格添加分页工具条
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
autoHeight:true,
store:store,
columns:columns,
bbar:new Ext.PagingToolvar({
pageSize:10, //每页显示几条数据;
store:store,
displayInfo:true, //是否显示数据信息;
displayMsg:'显示第{0}条到{1}条记录,一共{2}条',
//用来显示有数据时的提示信息;
emptyMsg:'没有记录' //没有记录时显示的信息;
})
});
store.load(); //必须在构造表格以后执行,否则分页工具条将不起作用;
//将分页工具条和store相关联,从而实现与表格共享数据模型;
3.9.2 通过后台脚本获得分页数据
var columns = [{header:'编号',dataIndex:'id'}]
var store = new Ext.data.Store({
//Store:仓库/存储;它封装了一个客户端缓存,用于存储Model对象;Store通过一个代理Proxy来加载数据,并提供函数来排序/过滤以及查询内部所包含的model实例;
//而Ext.data.ArrayStore是一个小巧的帮助类,更方便的从一个数组的数据来创建Ext.data.Store;
proxy:{ //换掉proxy,不再到内存中查找,而是通过HTTP获得想要的数据;
type:'ajax', //表示使用Ajax向后台请求数据;
url:'xxx.jsp', //请求地址;
reader:{ //不再是解析简单的数组,而是后台传过来的JsonReader,
type:'json', //所以reader设置type为json;
totalProperty:'totalProperty',//对应JSP中的代码,数据的总数;
root:'root', //JSP中的数据数组;
idProperty:'id'
}
},
fields:[
{name:'id'},
{name:'name'},
{name:'descn'}
]
});
var grid = new Ext.grid.GridPanel({...(分页代码)});
store.load({params:{start:0,limit:10}}); //在初始化时通过传递对应的分页参数去获取希望得到的数据;
3.9.3 分页工具条在表格顶部
var grid = new Ext.grid.GridPanel({
...
tbar:new Ext.PagingToolvar({...}) //tbar:顶部工具条;bbar:底部工具条;
});
3.9.4 Ext前台分页
//需要引用PagingMemoryProxy.js,从本地数组读取数据,实现内存分页;
3.10 后台排序
//把排序信息提交到后台,由后台排序信息组装到SQL里;然后再由后台将处理好的数据返回给前台;
var store = new Ext.data.Store({
proxy:{...},
fields:[...],
remoteSort:true //是否允许远程排序,默认值是false;
//向后台提交两个参数:sort(要排序的字段)和dir(升序或降序);
});
3.11 多重排序
//对"Rating"和"Salary"两列进行排序;
store.sort([{
property:'rating',
direction:'DESC'
},{
property:'salary',
direction:'ASC'
}]);
3.12 可编辑表格控件--EditorGrid
3.12.1 制作一个EditorGrid;
var columns = [{header:'编号',dataIndex:'id',
editor:{allowBlank:false}}] //表格不能为空;
//为每列添加了TextField插件;
var grid = new Ext.grid.GridPanel({
columns:columns,
store:store,
selType:'cellmodel', //设置选择模型为单元格模型;默认是:rowmodel;行模型;
plugins:[
Ext.create('Ext.grid.plugin.CellEditing',{ //启用CellEditing插件;
clidksToEdit:1 //设置单击激活编辑器; 默认双击;
})
]
});
3.12.2 添加一行数据
var grid = new Ext.grid.GridPanel({
autoHeight:true,
renderTo:'grid',
store:store,
columns:columns,
selType:'cellmodel',
plugins:[
Ext.create('Ext.grid.plugin.CellEditing',{
clicksToEdit:1
})
],
tbar:['-',{ //创建顶部工具条; '-':在页面显示'|';
text:'添加一行', //按钮显示值;
handler:function(){ //定义按钮按下时执行的函数;
var p = {
id:'',name:'',descn:''//新添加的行对应的列属性;
};
store.insert(0,p); //在第一行的上面添加一个新行;
}
},'-',{
text:'删除一行',
handler:function(){
Ext.Msg.confirm('信息','确定要删除?',function(btn){
//弹出确认窗口;
if(btn == 'yes'){ //用户选中"yes";
var sm = grid.getSelectionModel(); //定位选中单元格对象;
var record = sm.getSelection()[0]; //单元格对应的行模型;
store.remove(record); //删除对应行;
}
})
};
},'-']
});
3.12.3 保存修改结果
接上..,'=',{
text:'保存', //添加保存按钮;
handler:function(){
var m = store.getModifiedRecrods().slice(0);
//从Store(数据存储对象)获得所有record(表格行对象);
var jsonArray = [];
Ext.each(m,function(item){
//遍历m数组,并对其中每个元素调用fn函数;
jsonArray.push(item.data);
});
Ext.Ajax.request({
method:'POST',
url:'xxx.jsp',
success:function(response){
Ext.Msg.alert("信息",response.responseText,function(){
store.reload();
})
},
failure:function(){
Ext.Msg.alert("错误","与后台连接出现问题");
},
params:'data='+encodeURIComponent(Ext.encode(jsonArray))
});
}
}
3.12.4 限制输入数据的类型
var comboData = [
[0,'新版ext教程'],
[1,'ext在线支持'],
[2,'ext扩展']
];
//数据部分单独抽离出来,为了在editor和renderer里保持数据同步;
var columns = [{
header:'数字列',
dataIndex:'number',
editor:new Ext.form.NumberField({
allowBlank:false, //不为空;
allowNegative:false, //不为负数;
maxValue:10 //最长10位;
})
},{
header:'选择列',
dataIndex:'combo',
editor:new Ext.form.ComboBox({
//传统的<input>和<select>域的综合;用户可以*的在域中键入;
store:new Ext.data.SimpleStore({
fields:['value','text'], //绑定模型的字段;
data:comboData //读写数据comboData;
}),
emptyText:'请选择',
mode:'local',
triggerAction:'all', //触发器被点击时的操作;
valueField:'value', //相关的数据值绑定到ComboBox;
displayField:'text',
editable:false //只读模式;
}),
renderer:function(value){ //渲染函数;
return comboData[value][1];//返回comboData数组里的text值;
}
},{
header:'日期列',
dataIndex:'data',
editor:new Ext.form.DateField({
//提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项;
format:'Y-m-d', //日期格式;
minValue:'2007-12-14', //日期最小值;
disabledDays:[0,6], //禁止选择的日期;
disabledDaysText:'只能选择工作日'
}),
renderer:function(value){
return Ext.Date.format(value,'Y-m-d');
//返回格式化的日期字符串;
}
},{
header:'判断列',
dataIndex:'check',
editor:new Ext.form.Checkbox({
allowBlank:false
}),
renderer:function(value){
return value ? '是' : '否';
}
}];
3.13 表格属性控件--PropertyGrid
3.13.1 简介
//PropertyGrid(属性表格)扩展自EditGrid,可以直接编辑右边的内容;
var grid = new Ext.grid.PropertyGrid({
title:'属性表格', //表格标题;
autoHeight:true, //自适应高度;
width:300,
renderTo:'grid',
viewConfig:{ //初始化设置表格属性;
forceFit:true //表格列自适应;
},
source:{ //JSON数据,指定了表格里的key和value;
"名字":"不说", //string对应TextField编辑器;
"创建时间":new Date(Date.parse('12/15/2014')), //date对应DateField编辑器;
"是否有效":false, //bool对应ComboBox编辑器(下拉列表);
"版本号":.02, //number对应NumberField编辑器;
}
});
3.13.2 只读表格
//PropertyGrid没有直接关闭编辑功能的属性;可以通过Ext的事件监听器实现;
grid.on("beforeedit",function(e){
e.cancel = true;
return false;
});
3.14 分组表格控件--GroupingGrid
var meta = [
{header:'index',dataIndex:'id',name:'id'}
{header:'sex',dataIndex:'sex',name:'sex'}
{header:'name',dataIndex:'name',name:'name'}
{header:'descn',dataIndex:'descn',name:'descn'}
]
var data = [
['1','male','name1','descn1']
['2','female','neme2','descn2']
]
var grid = new Ext.grid.GridPanel({
store:new Ext.data.ArrayStore({ //数据存储器;
fields:meta,
data:data,
groupField:'sex', //需要分组的域;分组行;
sortInfo:{field:'id',direction:'ASC'} //排序列;
}),
columns:meat,
features:[{ftype:'grouping'}], //分组设置;!!!
renderTo:'grid',
autoHeight:true
});
Ext.get('expand').on('click',function(){
grid.view.features[0].expandAll(); //展开所有分组;
});
Ext.get('collapse').on('click',function(){
grid.view.features[0].collapseAll();//折叠所有分组;
});
Ext.get('one').on('click',function(){ //先判断再操作;
var feature = grid.view.features[0];//获得feature的实例;
if(feature.isExpanded('female')){
feature.expand('female');
feature.collapse('female');
}else{
feature.collapse('female');
feature.expand('female');
}
});
3.15 可拖拽的表格
3.15.1 拖放改变表格的大小
var rz = new Ext.Resizable(grid.getE1(),{ //放在render之后;
wrap:true, //在构造Resizable()函数时,自动在指定id的外边包裹一层div
minHeight:100,
pinned:true, //可拖拽提示,一直显示在表格下边;
handles:'s' //下边可拖拽;
});
rz.on('resize',function(resizer,width,height,event){
grid.setHeight(height);
//在拖拽完成之后,调用setHeight()方法修改自己的大小;
})
3.15.2 在同一个表格里拖放
var grid = new Ext.grid.GridPanel({
renderTo:'grid',store:store,coluns:columns,
viewConfig:{
plugins:{ //提供了插件的注册表,通过ptype助记码来编入索引;
ptype:'gridviewdragdrop'
}
}
});
3.15.3 表格之间的拖放
//两个表格都设置了gridviewdragdrop插件,即可互相拖放;
var grid1 = new Ext.grid.GridPanel({
..
viewConfig:{
plugins:{ptype:'gridviewdragdrop'}
}
});
var grid2 = new Ext.grid.GridPanel({
..
viewConfig:{
plugins:{ptype:'gridviewdragdrop'}
}
});
3.16 表格与右键菜单
var contextmenu = new Ext.menu.Menu({
id:'theContextMenu',
items:[{
text:'查看详情',
handler:function(){..}//右键函数;
}]
});
grid.on('itemcontextmeun',function(view,record,item,index,e){
e.preventDefault(); //e:事件对象; 禁止浏览器默认右键菜单;
contextmenu.showAt(e.getXY()); //显示自定义右键菜单;
});
3.17 基于表格的扩展插件
3.17.1 行编辑器
columns:[{
header:'Email',
dataIndex:'email',
width:160,
editor:{
xtype:'textfield', //替代全类型创建对象;
allowBlank:false,
vtype:'email'
}
}]
plugins:[rowEditing], //行编辑器控件;
3.17.2 进度条分页组件
3.17.3 缓冲式表格视图
3.17.4 分组表头
var grid = Ext.create('Ext.grid.Panel',{
columnLines:true,
columns:[{
text:'Company',
flex:1,
sortable:false,
dataIndex:'company'
},{
text:'Stock Price',
columns:[{
text:'Price',
renderer:'usMoney',
dataIndex:'price'
},{
text:'Change',
renderer:change,
dataIndex:'change'
}]
}]
});
3.17.5 锁定列