`
猜不透
  • 浏览: 133939 次
  • 性别: 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动态条数 源码

    通过以上步骤,我们实现了EXTJS 4.2 Combobox的分页和动态加载数据。用户在输入查询时,Combobox将仅加载当前页的数据,提高应用性能和用户体验。在实际开发中,还需要考虑错误处理、网络延迟等问题,以确保功能的...

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

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

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

    在ExtJS4.2中实现后台分页是一个重要的功能,特别是在处理大量数据时,它可以显著提高应用程序的性能和用户体验。后台分页意味着数据不在前端一次性加载,而是分批次从服务器获取,这样可以避免一次性加载过多数据...

    extjs 树型分页组件

    你需要在服务器端处理这个请求,根据父节点ID和分页信息返回对应的数据。在EXTJS中,可以监听`beforeload`事件来预处理请求参数,或者监听`load`事件来处理加载后的数据。 5. 用户交互 树型分页组件提供了便捷的...

    EXTJS4.2 MVC环境搭建并显示数据

    EXTJS4.2是Sencha公司推出的一款强大的JavaScript前端框架,专用于构建富客户端应用程序。MVC(Model-View-Controller)模式是EXTJS中的一种架构设计方式,它有助于将应用的逻辑、视图和数据模型分离,提高代码的可...

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

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

    ExtJS 4.2 实例

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

    ExtJS4.2 MVC

    ExtJS4.2 MVC是一个基于JavaScript的前端框架,用于构建富客户端应用。MVC(Model-View-Controller)模式是软件工程中一种广泛使用的架构设计,它有助于将应用程序的业务逻辑、用户界面和数据管理分离开来,提高代码...

    ExtJS4.2源码+实例

    标题中的“ExtJS4.2源码”指的是该框架的源代码,这对于开发者来说是一份宝贵的资源。通过研究源码,开发者可以深入了解框架的工作原理,定制自己的功能,甚至为框架贡献代码。学习源码有助于提升技术水平,了解最佳...

    extjs4.2+java经典

    从给定的文件信息来看,我们探讨的主题是“ExtJS 4.2 + Java”的结合应用,这在企业级Web应用程序开发中是一个经典的组合。ExtJS是一个强大的JavaScript库,用于构建复杂的用户界面,而Java则作为后端服务的提供者。...

    extjs前台分页插件PagingStore!

    ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件,主要适用于处理大量数据的场景,以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载...

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    SSH Extjs treeGrid conboxTree 分页实例

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

    通用后台管理系统(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8).pdf

    4. Grid 列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5. 导入导出 Excel 数据,支持 xlsx 和 xls 文件。 6. 资源管理(菜单管理)。 7. 用户管理和部门管理。 8. 权限...

    通用后台管理系统(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8).docx

    2. 分页模块:ListView、PageView和QueryResult用于ExtJS的后台分页处理。 3. 数据字典:SystemInitListener加载XML格式的数据字典,供系统内部调用。 4. 登录管理:LoginFilter处理登录状态,防止未登录用户访问...

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

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

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    ExtJS4.2是Sencha公司推出的一个强大的JavaScript框架,专用于构建富客户端Web应用程序。在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格...

    Extjs搜索过滤 类似百度、google搜索

    在ExtJS中,我们可以遍历数据源(如`store`),并根据关键词检查每个记录的特定字段是否匹配。 在描述中提到了"asp.net版带数据库",这表明后端是用ASP.NET搭建的,可能使用了ASP.NET MVC或Web Forms。后端需要处理...

    ext-4.2.1.883

    4. **网格和数据视图**:ExtJS的网格组件能展示大量数据,支持分页、排序、过滤和编辑。数据视图则可以动态渲染数据,适应多种布局和样式。 5. **布局管理**:库内包含了多种布局模式,如适合容器的fit布局、卡片...

Global site tag (gtag.js) - Google Analytics