java程序员菜鸟进阶(十一)Extjs4常用功能(三)——列表grid的使用(带综合查询,分页)
来源:互联网 发布:手机淘宝改评价 编辑:程序博客网 时间:2024/06/05 23:05
在开发中,显示数据库表中的列表功能是很常用的功能,一般列表都会带有综合查询和分页功能,在extjs4中为我们提供了强大的列表grid功能,在此记录一下,算是做个备忘
var mystore = Ext.create('Ext.data.Store',{fields : [ 'id', 'occurDate',"occurPlace","charger","content","inputUserName","institutionName"],//分页大小 pageSize: 10,proxy : {type : 'ajax',url : 'CenterBankTrendAction!CenterBankTrendList',reader : {type : 'json',root : 'trendList',totalProperty : 'total'}},autoLoad : true})var mygrid = Ext.create('Ext.grid.Panel', { tbar:[ {xtype:'button',icon:'../images/add.png',text:'添加动态',handler:function(){win.show();}} ],title : '人行动态',renderTo : Ext.getBody(),//layout:{type:'vbox',align:'left'},frame : true,store :mystore ,columns : [ new Ext.grid.RowNumberer(), //{//xtype: 'actioncolumn',//header:"删除",//width:50,//icon : '../images/delete3.png',//handler: function(grid, rowIndex, colIndex){// Ext.MessageBox.confirm("确认",'是否确认删除?',function(btn){// if('yes' == btn){// var store = mygrid.getStore();// var value = store.getAt(rowIndex);// var trendId = value.get('id');//window.location.href="CenterBankTrendAction!deleteTrend?trend.id="+trendId;// } // })// }//handler is closed//},{xtype: 'actioncolumn',header:"详情",width:40,icon : '../images/edit.png',handler: function(grid, rowIndex) { var id= grid.getStore().getAt(rowIndex).get('id'); editWinShow(id); }//handler is closed},{header : "时间",width : 100,dataIndex : 'occurDate',}, {header : "地点",width : 150,dataIndex : 'occurPlace',//sortable : true}, {header : "动态内容",width : 160,dataIndex : 'content',}, {header : "对应xx",width : 160,dataIndex : 'institutionName',},{header : "负责人",width : 80,dataIndex : 'charger',} ] , //分页开始 dockedItems: [ { xtype: 'pagingtoolbar', store: mystore, // same store GridPanel is using dock: 'bottom', //分页 位置 emptyMsg: '没有数据', displayInfo: true, displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ', beforePageText: '第', afterPageText: '页/共{0}页' }],//分页结束});
首先创建一个数据源store,一般加载数据源都是用ajax的方式,也有其他的方式,大家可以去查看一下帮助文档。Store中:
url指定的是去哪加载数据源,
reader算是一个加载器,
type指定加载的数据类型,这里我用的是json数据类型。
root指定加载数据源的变量名
totalProperty指定记录数据总数的变量名
autoLoad指定是否自动加载
创建完数据源后,然后就要去定义一个grid,一般在grid里面加一个tbar来放综合查询的一些控件。
Store指定数据源,这里指定我们在上面写的mysrore
renderTo指定把这个grid渲染到页面的哪一部分
Columns指定grid中都有哪些列
dataIndex指定这一列的所要显示的数据name
dockedItems指的的下面的停靠栏所要显示的内容,这里是显示的分页部分
在一些actioncolumn中,handler指定点击该行的按钮时所要执行的功能。
在这里,有一点要说明的是一个综合查询,上面的例子没有综合查询,只是给出一个简单的grid实例,下面我说说这里的综合查询怎么实现。
由于grid的数据源大部分是ajax加载数据实现的,所以在如果我们提交综合查询时直接把查询参数传到后台的话,那我们在ajax加载数据源的时候无法得到正确的结果,所以,我们可以换个思路,在构架store时把这综合查询参数动态添加到store的url中。添加到url后,然后再让store去加载数据源。也就是说在我们点击综合查询的提交按钮时,我们去加载数据源,这样直接在提交按钮触发事件时调用我们定义的创建store方法就OK了。下面看一下具体实例:
tbar:[ yearsCombx, financeInstitutionCombx,//这里是连个下拉列表,在后面会降到 { xtype:'button', icon:'../images/accept.png', text:'查看', handler:function(){ var year = yearsCombx.getValue()==null?0:yearsCombx.getValue(); var institutionId =financeInstitutionCombx.getValue(); freshStore(year,institutionId); } } ],function freshStore(year,institutionId){if(institutionId==null)institutionId=''; mystore = Ext.create('Ext.data.Store',{fields : [ 'reportInstitution','byAssistInstitution','assistDate','assistContent','result','reportYear','reportUsername'],//分页大小 pageSize: 10,proxy : {type : 'ajax',url : "AssistJudicialCaseAction!assistJudicialList?search.institutionId="+institutionId+"&&search.year="+year,reader : {type : 'json',root : 'freezeAccountList',totalProperty : 'total'}},autoLoad : true})mygrid.reconfigure(mystore, cm);mygrid.getDockedComponent('pageBar').bind(mystore);//重新绑定分页}
这里还要注意的一点事,在每次提交综合查询的时候都会创建一个新的store,所以在最后要从新给grid和pagebar绑定数据源
- java程序员菜鸟进阶(十一)Extjs4常用功能(三)——列表grid的使用(带综合查询,分页)
- java程序员菜鸟进阶(十一) Extjs4常用功能(二)ExtJs xtype属性值一览表
- java程序员菜鸟进阶(十二)Extjs4常用功能(四)tab面板的使用
- java程序员菜鸟进阶(十)Extjs4常用功能(一)——extjs开发环境的配置和表单的使用
- java程序员菜鸟进阶(三)oracle基础详解(三)常用的SQL PLUS命令详解
- Java程序员从笨鸟到菜鸟之(六十九)细谈Hibernate(十七)Hibernate实现分页和综合查询详解
- extjs4做的grid,带分页,搜索
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid)
- ExtJS4 Grid 带参数的查询
- extjs学习笔记(三)-----实现grid表格查询分页功能能
- 菜鸟学Java(十)——分页查询
- Extjs4---grid+servlet分页查询
- Extjs grid带分页的查询
- java程序员菜鸟进阶(十五)linux基础入门(三)linux用户和组管理
- Java程序员从笨鸟到菜鸟之(十一)多线程讲解
- Java程序员从笨鸟到菜鸟之(十一)多线程讲解
- Java程序员从笨鸟到菜鸟之(十一)多线程讲解
- Android LCD(一):LCD基本原理篇
- uploadify,swfupload等flash上传session丢失问题,无法接收到表单
- 你问我答:U盘的CPU全部占满的处理办法——mfxp.com
- 【问题】Android模拟器一直运行却打不开的
- C++析构函数的定义和使用
- java程序员菜鸟进阶(十一)Extjs4常用功能(三)——列表grid的使用(带综合查询,分页)
- SIGHAN评测回顾-1-(2003-2005)
- error C1189:#error:This file requires _WIN32_WINNT to be #defined at least to 0x0403
- 开始
- Oracle学习总结
- java 文件路径
- php扩展的用到的一些宏
- mysql :left join语句优化
- 安装Aptana插件到eclipse