java程序员菜鸟进阶(十一)Extjs4常用功能(三)——列表grid的使用(带综合查询,分页)
2013-06-21 10:39
696 查看
在开发中,显示数据库表中的列表功能是很常用的功能,一般列表都会带有综合查询和分页功能,在extjs4中为我们提供了强大的列表grid功能,在此记录一下,算是做个备忘
首先创建一个数据源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了。下面看一下具体实例:
这里还要注意的一点事,在每次提交综合查询的时候都会创建一个新的store,所以在最后要从新给grid和pagebar绑定数据源
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常用功能(一)――extjs开发环境的配置和表单的使用
- java程序员菜鸟进阶(十二)Extjs4常用功能(四)tab面板的使用
- java程序员菜鸟进阶(十一) Extjs4常用功能(二)ExtJs xtype属性值一览表
- java程序员菜鸟进阶(十)Extjs4常用功能(一)——extjs开发环境的配置和表单的使用
- Java程序员从笨鸟到菜鸟之(六十九)细谈Hibernate(十七)Hibernate实现分页和综合查询详解
- Java程序员从笨鸟到菜鸟之(六十九)细谈Hibernate(十七)Hibernate实现分页和综合查询详解
- 使用Ext中的Grid,Form,Dialog来实现列表,创建,更新,删除,查找和分页功能
- java程序员菜鸟进阶(三)oracle基础详解(三)常用的SQL PLUS命令详解
- 使用Ext的Grid,Form,Dialog来实现分页列表,创建,修改,删除功能
- java程序员菜鸟进阶(十六)linux基础入门(四)linux下VIM文本编辑器使用
- java程序员菜鸟进阶(三)oracle基础详解(三)常用的SQL PLUS命令详解
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- Extjs分页使用java实现数据库数据查询
- java程序员菜鸟进阶(四)oracle基础详解(四)oracle开启和关闭服务程序――解决安装oracle占用大量内存
- java学习心得——添加列表查询功能
- Extjs中grid前端分页使用PagingMemoryProxy【二】
- ExtJS 4 grid 带参数 查询 分页 store beforeload 解决办法
- Java程序员从笨鸟到菜鸟之(六十)细谈Hibernate(十一)hibernate复合主键映射
- 将模版列功能改造成博客内容列表, 并使完成分页 (使用分页模板完成,显示上一页,下一页,第一页,最后一页,和当前第x页,共y页 。)
- java 使用ElasticSearch完成百万级数据查询附近的人功能