ExtJS中表格控件的使用属性设置和数据的获取.docx
《ExtJS中表格控件的使用属性设置和数据的获取.docx》由会员分享,可在线阅读,更多相关《ExtJS中表格控件的使用属性设置和数据的获取.docx(16页珍藏版)》请在冰豆网上搜索。
![ExtJS中表格控件的使用属性设置和数据的获取.docx](https://file1.bdocx.com/fileroot1/2023-1/28/828cb41c-101b-4434-97c1-63aa8f57fdce/828cb41c-101b-4434-97c1-63aa8f57fdce1.gif)
ExtJS中表格控件的使用属性设置和数据的获取
ExtJS中表格控件的使用,属性设置和数据的获取
ExtJS中表格的特性简介
表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid
表格的列信息由Ext.grid.ColumnModel定义
表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可具体分为如下几种:
JsonStore,SimpleStore,GroupingStore…
一个表格的基本编写过程:
1、创建表格列模型
varcm=newExt.grid.ColumnModel({
{header:
'角色',dataIndex:
'role'},
{header:
'等级',dataIndex:
'grade'},
{header:
'创建日期',dataIndex:
'createDate',type:
'date',renderer:
Ext.util.Format.dateRenderer('Y年m月d日')}//创建日期类型的数据
});
2、创建数据数组
vardata=[
['士兵','7','2011-07-2412:
34:
56'],
['将军','10','2011-07-2412:
34:
56'],
];
3、创建一个数据存储对象store,包含两部分:
proxy,获取数据的方式;reader,解析数据的方式
ArrayReader的mapping用来设置列的排列顺序
varstore=newExt.data.Store({
proxy:
newExt.data.MemoryProxy(data),
reader:
newExt.data.ArrayReader({},[
{name:
'role',mapping:
1},
{name:
'grade',mapping:
0}
{name:
'createDate',mapping:
2,type:
'date',dateFormat:
'Y-m-dH:
i:
s'}//创建日期列和显示格式
])
});
store.load();
4、创建GridPanel,装配ColumnModel和store
vargrid=newExt.grid.GridPanel({
renderTo:
'grid',
store:
store,
cm:
cm
});
另外获取远程数据可以使用ScriptTagProxy,如下所示
varstore=newExt.data.Store({
proxy:
newExt.data.ScriptTagProxy({
url:
'http:
//...'}),
reader:
newExt.data.ArrayReader({},[
{name:
'role',mapping:
1},
{name:
'grade',mapping:
0}
]),
sortInfo:
{field:
"role",direction:
"ASC"}//设置默认排序列,ASC/DESC
});
表格的常用属性功能
vargrid=newExt.grid.GridPanel({
enableColumnMove:
false,//禁止拖放列
enableColumnResize:
false,//禁止改变列的宽度
stripeRows:
true,//斑马线效果
loadMask:
true,//读取数据时的遮罩和提示功能
renderTo:
'grid',
store:
store
cm:
cm
});
varcm=newExt.grid.ColumnModel({
{header:
'角色',dataIndex:
'role',width:
90,sortable:
true},//width设置列宽度,默认为100px,sortable设置排序功能
{id:
'grade',header:
'等级',dataIndex:
'grade',width:
40}
});
vargrid=newExt.grid.GridPanel({
renderTo:
'grid',
store:
store,
cm:
cm
viewConfig:
{//让每列自动填充满表格
forceFit:
true
}
autoExpandColumn:
'grade'//自动延伸列,列的id在ColumnModel中定义
});
渲染表格,为表格设置特殊样式
只需要在cm里面增加一个renderer属性,添加一个自定义函数来渲染传进来(由EXT自动传递)的参数的样式即可,即在返回value之前拼装上相应的HTML和CSS或者JS响应事件。
functionrenderSex(value){
if(value=='male'){
return"blue;'>男";
}else{
return"red;'>女";
}
}
varcm=newExt.grid.ColumnModel([
{header:
'id',dataIndex:
'id'},
{header:
'name',dataIndex:
'name'},
{header:
'sex',dataIndex:
'sex',renderer:
renderSex},
]);
vardata=[
['1','Jason','male'],
['2','Kate','female']
];
varstore=newExt.data.Store({
proxy:
newExt.data.MemoryProxy(data),
reader:
newExt.data.ArrayReader({},[
{name:
'id'},
{name:
'name'},
{name:
'sex'}
])
});
store.load();
vargrid=newExt.grid.GridPanel({
autoHeight:
true,
renderTo:
'grid',
store:
store,
cm:
cm
});
自动显示行号,只要在创建cm时创建一个RowNumberer就可以了
varcm=newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),//显示行号
{header:
'id',dataIndex:
'id'},
{header:
'name',dataIndex:
'name'},
{header:
'sex',dataIndex:
'sex',renderer:
renderSex},
]);
删除列
store.remove(store.getAt(i));
刷新表格
grid.view.refresh();
为表格添加复选框
需要使用CheckboxSelectionModel
SelectionModelsm在使用时要放到cm和表格中
varsm=newExt.grid.CheckboxSelectionModel();
varcm=newExt.grid.ColumnModel([
newExt.grid.RowNumberer(),
sm,
{header:
'编号',dataIndex:
'id'},
{header:
'名称',dataIndex:
'name'}
]);
vardata=[
['1','name1'],
['2','name2']
];
varstore=newExt.data.Store({
proxy:
newExt.data.MemoryProxy(data),
reader:
newExt.data.ArrayReader({},[
{name:
'id'},
{name:
'name'}
])
});
store.load();
vargrid=newExt.grid.GridPanel({
autoHeight:
true,
renderTo:
'grid',
store:
store,
cm:
cm,
sm:
sm
});
通过RowSelectionModel设置只选择一行
vargrid=newExt.grid.GridPanel({
autoHeight:
true,
renderTo:
'grid',
store:
store,
cm:
cm,
sm:
newExt.grid.RowSelectionModel({singleSelect:
true})
});
使用选择模型获取数据
grid.on('click',function(){
varselections=grid.getSelectionModel().getSelections();
for(vari=0;ivarrecord=selections[i];
Ext.Msg.alert(record.get("id"));
}
});
表格视图
从MVC的思想来看表格控件:
*Ext.data.Store可看做模型
*Ext.grid.GridPanel可看做控制器
*Ext.grid.GridView可看做视图
*一般GridView由GridPanell自动生成,如果想设置GridView的属性时,可以通过Ext.grid.GridPanel的getView()获得视图实例
Ext.get('button1').on('click',function(){
grid.getView().scrollToTop();
grid.getView().focusCell(0,0);
varcell=grid.getView().getCell(0,0);
cell.style.backgroundColor='red';
});
使用GridPanel的viewConfig在创建表格时设置GridView的初始化参数
vargrid=newExt.grid.GridPanel({
height:
100,
width:
400,
renderTo:
'grid',
store:
newExt.data.Store({
autoLoad:
true,
proxy:
newExt.data.MemoryProxy(data),
reader:
newExt.data.ArrayReader({},meta)
}),
columns:
meta,
viewConfig:
{
columnsText:
'显示的列',//设置下拉菜单提示文字
scrollOffset:
30,//设置右侧滚动条的预留宽度
sortAscText:
'升序',//设置下拉菜单提示文字
sortDescText:
'降序',//设置下拉菜单提示文字
forceFit:
true//自动延展每列的长度
}
});
为表格添加分页工具条
*可以使用GridPanel的bbar属性,并创建Ext.PagingToolbar分页工具条对象
*注意,如果配置了分页工具条,store.load()就必须在构造表格以后执行。
vargrid=newExt.grid.GridPanel({
renderTo:
'grid',
autoHeight:
true,
store:
store,
cm:
cm,
bbar:
newExt.PagingToolbar({
pageSize:
10,//每页显示10条数据
store:
store,
displayInfo:
true,//显示数据信息
displayMsg:
'显示第{0}条到{1}条记录,一共{2}条',
emptyMsg:
"没有记录"//没有数据时显示的信息
})
});
store.load();
从后台脚本获取分页数据
使用HttpProxy传递请求,获取服务器的JSON数据,交给JsonReader解析
varcm=newExt.grid.ColumnModel([
{header:
'编号',dataIndex:
'id'},
{header:
'名称',dataIndex:
'name'}
]);
varstore=newExt.data.Store({
proxy:
newExt.data.HttpProxy({url:
'page.jsp'}),
reader:
newExt.data.JsonReader({
totalProperty:
'totalProperty',
root:
'root'
},[
{name:
'id'},
{name:
'name'}
])
});
vargrid=newExt.grid.GridPanel({
renderTo:
'grid',
autoHeight:
true,//数据传回来之前高度未知,所以要使用自适应高度
store:
store,
cm:
cm,
bbar:
newExt.PagingToolbar({
pageSize:
10,
store:
store,
displayInfo:
true,
displayMsg:
'显示第{0}条到{1}条记录/共{2}条',
emptyMsg:
"没有记录"
})
});
store.load({params:
{start:
0,limit:
10}});
如果想让分页工具条显示在表格的顶部,可以使用GridPanel的tbar属性设置添加工具条
让ExtJS在对返回的数据进行分页
*需要在页面中引入examples/locale目录下的PagingMemoryProxy.js文件
*再使用PagingMemoryProxy设置代理
varstore=newExt.data.Store({
proxy:
newExt.data.PagingMemoryProxy(data),
reader:
newExt.data.ArrayReader({},[
{name:
'id'},
{name:
'name'},
{name:
'descn'}
])
});
//在创建GridPanel之后调用
store.load({params:
{start:
0,limit:
3}});
可编辑表格控件EditorGrid的使用
制作一个简单的EditorGrid的步骤
1、定义列ColumnModel,在里面添加editor属性
varcm=newExt.grid.ColumnModel([{
header:
'编号',
dataIndex:
'id',
editor:
newExt.grid.GridEditor(
newExt.form.TextField({
allowBlank:
false//不允许在TextField中输入空值
})
)
},{
header:
'名称',
dataIndex:
'name',
editor:
newExt.grid.GridEditor(
newExt.form.TextField({
allowBlank:
false
})
)
}]);
2、准备一个数组
vardata=[
['1','Jason'],
['2','Jay']
];
3、创建Ext.data.Store,设置内存代理,设置ArrayReader解析数组
varstore=newExt.data.Store({
proxy:
newExt.data.MemoryProxy(data),
reader:
newExt.data.ArrayReader({},[
{name:
'id'},
{name:
'name'}
])
});
4、加载数据,创建EditorGridPanel
store.load();
vargrid=newExt.grid.EditorGridPanel({
autoHeight:
true,
renderTo:
'grid',
store:
store,
cm:
cm
});
为可编辑表格添加和删除数据
1、使用Record的create方法创建一个记录集MyRecord,MyRecord相当于一个类
varMyRecord=Ext.data.Record.create([
{name:
'id',type:
'string'},
{name:
'name',type:
'string'}
]);
store.load();
2、创建EditorGridPanel面板,在属性tbar中创建Ext.Toolbar
vargrid=newExt.grid.EditorGridPanel({
autoHeight:
true,
renderTo:
'grid',
store:
store,
cm:
cm,
tbar:
newExt.Toolbar(['-',{//-表示菜单分隔符
text:
'添加一行',
handler:
function(){
varp=newMyRecord({
id:
'',
name:
''
});
grid.stopEditing();//关闭表格的编辑状态
store.insert(0,p);//创建的Record插入store的第一行
grid.startEditing(0,0);//激活第一行第一列的编辑状态
}
},'-',{
text:
'删除一行',
handler:
function(){
Ext.Msg.confirm('信息','确定要删除?
',function(btn){
if(btn=='yes'){
varsm=grid.getSelectionModel();//获取表格的选择模型
varcell=sm.getSelectedCell();//获取选中的单元格
varrecord=store.getAt(cell[0]);//通过行号得到store这一行对应的Record
store.remove(record);//移除数据
}
});
}
},'-'])
});
为可编辑表格保存修改的结果
在上面例子的基础之上,添加一个保存按钮
text:
'保存',
handler:
function(){
varm=store.modified.slice(0);//获得store中修改过得数据
for(vari=0;ivarrecord=m[i];
varfields=record.fields.keys;
for(varj=0;jvarname=fields[j];
varvalue=record.data[name];
varcolIndex=cm.findColumnIndex(name);
varrowIndex=store.indexOfId(record.id);
vareditor=cm.getCellEditor(colIndex).field;
if(!
editor.validateValue(value)){
Ext.Msg.alert('提示','请检查输入的数据是否正确!
',function(){
grid.startEditing(rowIndex,colIndex);
});
return;
}
}
}
varjsonArray=[];
Ext.each(m,function(item){
jsonArray.push(item.data);//把修改过得数据放到jsonArray中
});
Ext.lib.Ajax.request(//使用Ajax请求提交给后台
'POST',
'save_data.jsp',
{success:
function(response){//返回成功
Ext.Msg.alert('信息',response.responseText,function(){
store.reload();
});
},failure:
function(){//返回失败
Ext.Msg.alert("错误","服务器保存数据出错!
");
}},
'data='+encodeURIComponent(Ext.encode(jsonArray))
);
}
另外store可以设置属性pruneModifiedRecords:
true。
这样,每次remove或load操作时store会自动清除modified标记,可以避免出现下次提交时还会把上次那些modified信息都带上的现象。
限制表格输入的数据类型
NumberField
{
header:
'ID',
dataIndex:
'id',
editor:
newExt.grid.GridEditor(newExt.form.NumberField({//NumberField限制只能输入数字
allowBlank:
false,
allowNegative:
false,//不能输入减号
maxValue:
10
}))
}
ComboBox
varcomboData=[
['0','Java'],
['1','Android']
];
{
header:
'ComboBox',
dataIndex:
'combo',
editor:
newExt.grid.GridEditor(newExt.form.ComboBox({
st