`
猜不透
  • 浏览: 132271 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs 4.2 分页,根据查询条件分页

阅读更多



 

 

  extjs 4.2 分页和根据查询条件分页 废话不多说直接上代码:

 

 

Ext.onReady(getPageList);

function  getPageList(){
	//取得屏幕高度
	var BodyH = document.documentElement.clientHeight;
	var store;
	//model
	Ext.define('Bussiness', {
	     extend: 'Ext.data.Model',
	     fields: [
	         {name: 'docCode', 	type:'string'},
	         {name: 'serialNumber', type: 'string'},
	         {name: 'busiType',     type: 'string'},
	         {name: 'formId',	type: 'int'},
	         {name: 'docDate',  	type: 'string'},
	         {name: 'channelId',	type: 'string'},
	         {name: 'sdorgId',  	type: 'string'},
	         {name: 'aeraId',   	type: 'string'},
	         {name: 'comboCode', 	type: 'string'},
	         {name: 'packageId', 	type: 'string'},
	         {name: 'seriesNumber', type: 'string'},
	         {name: 'docStatus',    type: 'int'}
	     ]
	 });
	//jsonStore
	  store =Ext.create('Ext.data.Store',{			
			  model: 'Bussiness',
			  pageSize:10,
		      proxy:{
		      type: 'ajax',
		      	url:'bussinessInfo_list.action',
		      	reader:{
		      		type:'json',
		      		totalProperty:'recordCount', //总记录数 
   					root:'recordList'			 //json数据
   				}			   
		      }
 		}); 
	    //点击下一页时传递搜索框值到后台
	    store.on('beforeload', function (store, options) {  
	    	var keyWord=Ext.getCmp('KeyWord').getValue();
        	var new_params = { searchText:keyWord };  
        	Ext.apply(store.proxy.extraParams, new_params);  
        });  
 		var grid=Ext.create('Ext.grid.GridPanel', {
		    //title: '业务信息',
		    store: store,
		    id:'myGridPanel',
		    forceFit : true,
		    frame: true,
		    //顶部工具栏 查询输入框
		     tbar: [{ 
		    	 		xtype:'label',text:'请输入关键词:'
		    	 	},
		    	 	{
		    	 		xtype:'textfield',id:'KeyWord'
		    	 	},
		    	 	{
		    	 		text:'搜索',handler:function(){
		    	 		//点击搜索按钮将查询条件传递到后台
		    	 		var keyWord=Ext.getCmp('KeyWord').getValue();
		    	 		store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
		    	 		}
		    	 	}
 			],
		    columns: [
		        {header:'订单号',dataIndex:'docCode'},
                {header:'流水号',dataIndex:'serialNumber'},
                {header:'业务类型',dataIndex:'busiType'},
	            {header:'业务功能号',dataIndex:'formId'},
	            {header:'业务时间',dataIndex:'docDate',renderer:function(value){
	            	return new Date(parseInt(value)).toLocaleString().substr(0,19);

	            }},
	            {header:'渠道信息',dataIndex:'channelId'},
	            {header:'部门信息',dataIndex:'sdorgId'},
	            {header:'区域信息',dataIndex:'aeraId'},
	            {header:'套餐信息',dataIndex:'comboCode'},
	            {header:'政策信息',dataIndex:'packageId'},
	            {header:'受理号码',dataIndex:'seriesNumber'},
	            {header:'订单状态',dataIndex:'docStatus',renderer:function(value){
	            	switch(value){
	            		case 1: return "已经成功生成销售定单" ;
	            			break;
	            		case 2: return "生成失败" ;
	            			break;
	            		default: return "" ;
	            			break;
	            	}
	            }}
		    ],
		    dockedItems: [{
	        xtype: 'pagingtoolbar',
	        store: store,   // GridPanel中使用的数据
	        dock: 'bottom',
	        displayInfo: true,
	        emptyMsg:"没有数据",
	        height:BodyH+160,
		    displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据",
		    store:store
	    	}],
		    renderTo: Ext.getBody(),
			listeners: {
          	itemdblclick: this.handlePanelClick
     	 	}
		});	
		var keyWord=Ext.getCmp('KeyWord').getValue();
 		store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}});
 }

//当gridpanel列表被点击时调用
 function handlePanelClick(grid, rowIndex, e){
	 var docCode=rowIndex.data.docCode;
	 var status=rowIndex.data.docStatus;
	 window.location.href="bussinessInfo_detailes.action?docCode="+docCode+"&docstatus="+status;
 }

 

  • 大小: 150.9 KB
分享到:
评论

相关推荐

    extjs4.2 分页combo动态条数 源码

    extjs4.2 分页combo动态条数 源码,不懂的加群

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.libs目录缺少hibernate核心jar包 2.libs目录缺少struts jar 3.WebRoot目录缺少ExtJs4.2核心类库 以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不...

    ExtJS4.2后台分页需要的几个文件

    配合以下博客使用 http://blog.csdn.net/wyx177694333/article/details/36896391

    ExtJS 4.2 实例

    这是本人在学习ExtJS 4.2 过程中做的一个小实例,包含了一些基础的功能: Tree/Grid/分页查询,滚动查询等. 与数据库的连接以及表结构在附件中的说明文档中有写.

    extjs 树型分页组件

    我们开发项目的时候,有的时候左边的树结点很多,虽然说有extjs有异步,但还是有结点下面有时长达500个以上,甚至更多,这个时候用分页可以解决这个问题

    SSH Extjs treeGrid conboxTree 分页实例

    最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...

    extjs前台分页插件PagingStore!

    国外论坛下载的。很好用。前台分页插件。extjs3.x适用

    ExtJS4.2源码+实例

    这是一款比较实用的前端开发框架,里面功能齐全,自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染等。

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    extjs扩展工具条带选择页数的配置

    扩展ext的分页工具条 带选择页数的配置 采用Ext4.2

    掏钱学Ext(完整版) 附全部源码

    2.7. 还差:表头菜单,分页,可编辑表格,去服务器读取数据,改变大小,表格间拖拽,树与表格间拖拽。 3. 歌颂吧!只为了树也要学ext。 3.1. 真的,我是为了树,才开始学ext的。 3.2. 传统是先做出一棵树来。 ...

    Ext Js权威指南(.zip.001

    8.4.1 组件管理及查询:ext.componentmanager与ext.componentquery / 423 8.4.2 焦点管理:ext.focusmanager / 424 8.4.3 z-order管理:ext.zindexmanager与ext.windowmanager / 425 8.4.4 状态管理:ext.state....

    EXT教程EXT用大量的实例演示Ext实例

    4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. 破例研究下comboBox的内在本质哟 4.4.4. ...

    EXT2.0中文教程

    4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. 破例研究下comboBox的内在本质哟 4.4.4. 嘿嘿~本地...

    Ext 开发指南 学习资料

    4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. 破例研究下comboBox的内在本质哟 4.4.4. 嘿嘿~本地...

Global site tag (gtag.js) - Google Analytics