ExtJS中表格控件的使用属性设置和数据的获取.docx
- 文档编号:24261437
- 上传时间:2023-05-25
- 格式:DOCX
- 页数:19
- 大小:20.11KB
ExtJS中表格控件的使用属性设置和数据的获取.docx
《ExtJS中表格控件的使用属性设置和数据的获取.docx》由会员分享,可在线阅读,更多相关《ExtJS中表格控件的使用属性设置和数据的获取.docx(19页珍藏版)》请在冰豆网上搜索。
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;i varrecord=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;i varrecord=m[i]; varfields=record.fields.keys; for(varj=0;j varname=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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- ExtJS 表格 控件 使用 属性 设置 数据 获取
![提示](https://static.bdocx.com/images/bang_tan.gif)