ExtJs Grid前台分页(假分页)

Button查询按钮相关js代码

{ xtype:'button',
	text:'查询',
	height:20,
	width:50,
	style:'margin-left:90px;padding-top:10px',			
	handler:function(){
		//获得查询form表单			
		var fm = Ext.getCmp('leftForm').getForm();
		var ipGrid = Ext.getCmp('ipGrid');
		//grid.render('center');
		if(fm.isValid()){
			    fm.submit({
			    waitMsg : '正在提交查询',
			    method:'POST',
			    url:'iPQueryStatisticsAction!theLoginIPQuery.action',
			    success:function(form,action){
			    	//获得后台传到前台的字符串转化为Json对象			
			    	var result = Ext.util.JSON.decode(action.response.responseText);
			    	//获得Json对象中data数据(result为键)
			    	var datas = result.success.result;
			    	//获得grid
			    	var grid =new Ext.keqi.BuildIpGridPanel({
					id:'ip',
					title:'登录明细查询结果',
					datas:datas
				});
				var p = Ext.getCmp('center');
				p.add(grid);
				p.doLayout();
			   }.createDelegate(this)			    						  		  				
			});
		}	
	}.createDelegate(this)
}	
gridPanel相关JS代码(红色为需要特别注意的地方)

var store = new Ext.data.Store({
	id:'st',
	//this.datas为上段代码中求得的datas(获得Json对象中data数据)而且需要使用Ext.ux.data.PagingMemoryProxy需要先导入PagingMemoryProxy.js
	proxy:Ext.ux.data.PagingMemoryProxy(this.datas),
	remoteSort:true,	
	//若不是JsonReader则可能不显示数据
	reader: new Ext.data.JsonReader({
		/*totalProperty:'totalProperty',
		root:'result',
		successProperty:'success',*/
		fields:[
			{name : 'id',type:'int'},
			{name : 'loginId',type:'String'},
			{name : 'userName',type:'String'},
			{name : 'time',type:'String'}, 
			{name : 'userAddress',type:'String'}, 
			{name : 'peroidOfTime',type:'String'},
			{name : 'theLoginAddress',type:'String'}, 
			{name : 'loginTimes',type:'String'} 
		]
	})
});	
		
var cm=new Ext.grid.ColumnModel({
	columns:[
	        {header:'序号',hidden:false,width:60,dataIndex:'id'},			        
		{header:'用户ID',hidden:this.hiddenId,width:150,dataIndex:'loginId'},
		{header:'账户',hidden:this.hiddenAccount,width:100,dataIndex:'userName'},
		{header:'登录时间',hidden:this.hiddenTime,width:200,dataIndex:'time',
				renderer:function(a){
				var s=parseInt(a);
				if(isNaN(s)){
					return new Date().format("Y-m-d H:i:s");
				}else{
					return new Date(s).format("Y-m-d H:i:s");
				}						
		}},
		{header:'登录IP',hidden:this.hiddenIp,width:150,dataIndex:'userAddress'},
		{header:'时间段',hidden:this.hiddenProid,dataIndex:'peroidOfTime'},
		{header:'地市',hidden:this.hiddenCity,dataIndex:'theLoginAddress'},
		{header:'登陆次数',hidden:this.hiddenNums,dataIndex:'loginTimes'}
		]					
});
		
this.grid = new Ext.grid.GridPanel({
		id:'ipGrid',
		//enableColumnMove: false, 
		viewConfig:{
			forceFit:true
		},
		store:store,
		cm:cm, 
		bbar: new Ext.PagingToolbar({
			pageSize:15,
			store:store,
			displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
	           	emptyMsg: '没有记录',
			displayInfo:true,
			plugins : [new Ext.zz.PageSizePlugin()]
		})
	});	
		
store.load({params:{start:0,limit:15}})







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值