`
wubo_789
  • 浏览: 13205 次
  • 性别: Icon_minigender_1
  • 来自: 武穴
社区版块
存档分类
最新评论

ExtJS前台分页

阅读更多
Ext.onReady(function(){
				window.path = '<%=request.getContextPath()%>';
				Ext.QuickTips.init();
				Ext.BLANK_IMAGE_URL = path+'/jslib/ext2.2/resources/images/default/s.gif';
				init();
			});
			
			function getWidth(){
				return document.body.clientWidth;	
			}
			
			function getHeight(){
				return document.body.clientHeight;
			}
			
			function init(){
				new Ext.form.FieldSet({
					title:'查询区域',
					height: 'auto',
					contentEl:'query-form',
					collapsible:true,
					renderTo:'query-area',
					buttons:[
						{
							xtype:'button',
							text:'查询'
						},
						{
							xtype:'button',
							text:'重置',
							handler:function(){
								document.getElementById('query-form').reset();
							}
						}
					]
				});
				var fields = [
					{name:'a'},{name:'b'},{name:'c'},{name:'d'}
				];
				
				var datas = [];
				for(var i=0; i<100; i++){
					datas.push({a:'name151-'+(i+1),b:'area',c:2009,d:'description});
				}
				
				var proxy = new Ext.data.MemoryProxy({totalProperty:datas.length,root:[]});
				var store = new Ext.data.Store({
					remoteSort:false,
					reader:new Ext.data.JsonReader({
						totalProperty: 'totalProperty',
						root: 'root'
					},fields),
					proxy: proxy
				});
				store.on('beforeload', function(s, params){
					var start = params.params.start;
					var end = start + params.params.limit;
					//alert(start+", "+end +" Data's Size:"+datas.length);
					proxy.data = {totalProperty:datas.length,root:datas.slice(start, end)};
				});
				var fw = getWidth()-15;
				var gw = getWidth()-20;
				var fh = Math.round(getHeight()*0.6);
				new Ext.grid.GridPanel({
					title:'显示区域',
					width:fw,
					height:fh-20,
					collapsible:true,
					renderTo:'show-area',
					bbar: new Ext.PagingToolbar({
						store:store,
						pageSize:15
					}),
					store: store,
					columns:[
						new Ext.grid.RowNumberer(),
						{header:'A', align:'center', width:Math.round(gw*0.3), dataIndex:'a', sortable:true},
						{header:'B', align:'center', width:Math.round(gw*0.2), dataIndex:'b', sortable:true},
						{header:'C, align:'center', width:Math.round(gw*0.2), dataIndex:'c', sortable:true},
						{header:'D, align:'center', width:Math.round(gw*0.3), dataIndex:'d', sortable:true}
					],
					viewConfig: {
						forceFit: true
					},
					sm: new Ext.grid.RowSelectionModel({singleSelect:true})
				});
				store.load({params:{start:0,limit:15}});
			}
分享到:
评论

相关推荐

    extjs前台分页插件PagingStore!

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

    Ext前台分页

    NULL 博文链接:https://huanglz19871030.iteye.com/blog/656046

    SSH Extjs treeGrid conboxTree 分页实例

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

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

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

    Extjs servlet实现列表显示简单例子

    Extjs的初学者写的一个Extjs的小例子,前台是Extjs后台是Servlet,将例子导入到myeclipse中,数据源换成相应的你自己的数据库连接,数据库连接在util里,就可以实现.

    基于extjs ssh 注解式开发的简易学生信息管理系统

    基于extjs ssh 注解式...前台使用extjs实现的漂亮风格 后台为ssh注解式开发 实现了学生信息的基本增删查改 拥有完美的分页功能 代码简洁 适合学习 内有具体使用方法 只需创建一个数据库即可使用 有任何问题可以PM我

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

    9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...

    深入浅出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...

    Extjs精华版图书管理系统源码_商业源码_sqlserver_ExtJS6._extjs_V2_

    2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。 5、演示json数据封装。6、演示前台和后台数据的传递...

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

    9.2.4 实现前台分页效果 9.3 可编辑表格控件——EditorGrid 9.3.1 制作第一个EditorGrid 9.3.2 添加一行数据 9.3.3 保存修改结果 9.3.4 验证EditGrid中的数据 9.3.5 限制输入数据的类型 9.4 PropertyGrid属性...

    jatoolsPrint web打印控件

    一款很好用的免费的web页面打印工具。 设置纸张类型,如A4、A3等 设置纸张方向(横向、纵向) ...支持extjs、jquery等前台开发框架 支持php、.net、j2ee等开发并台 服务器端支持 windows,linux,unix等.

    基于C#开发的智能化图书管理系统

    2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、面向对象继承等等。4、演示更换皮肤功能。5、演示json数据封装。 6、演示前台和后台数据的...

    Ext 开发指南 学习资料

    2.7.5. 谣言说ext不支持前台排序 2.8. 爱生活,EditorGrid。 2.8.1. 旋动舞步,看我们怎么把这个EditorGrid炫出来。 2.8.2. 添加一行,再把它踢掉 2.8.3. 一切就绪,你可以按保存按钮了。 2.8.4. 天马行空,保证提交...

    ExtAspNet_v2.3.2_dll

    +修正IE7下Grid分页速度慢(feedback:youwei, StevenGuan, hazardvn, gavindou, ttjacky)。 -实际上IE7下所以的回发都慢,原因是客户端的Base64编码速度慢,已经使用encodeURIComponent来代替Base64编码。 -俄语...

    GoodProject Maven Webapp.zip

    jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    注:ExtAspNet基于一些开源的程序ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor。 示例: http://extasp.net/ 开源: http://extaspnet.codeplex.com/ 博客: http://sanshi.cnblogs.com/ 邮箱: sanshi.ustc@gmail...

Global site tag (gtag.js) - Google Analytics