java程序员菜鸟进阶(十一)Extjs4常用功能(三)——列表grid的使用(带综合查询,分页)


      在开发中,显示数据库表中的列表功能是很常用的功能,一般列表都会带有综合查询和分页功能,在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时把这综合查询参数动态添加到storeurl中。添加到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,所以在最后要从新给gridpagebar绑定数据源


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值