- 浏览: 722919 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
一剪梅:
关于您对于 hasRolePermission 用法的解释, ...
OFBIZ安全性技术(翻译) -
沈寅麟:
数据模型资源手册卷3中文版出版了 -
donaldjohn:
恭喜恭喜, 预祝大卖
数据模型资源手册卷3中文版出版了 -
成大大的:
OFBiz电商实战百度网盘下载:http://pan.baid ...
OFBiz入门实训教程 -
成大大的:
OFBiz电商实战百度网盘下载:http://pan.baid ...
OFBiz促销码生成解释
paging.js,分页时的调用的写法。
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。
本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
例如: http://extjs.com/forum/topics-remote.php?start=0&limit=1
<script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript>
</noscript> <script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript></noscript> <link rel="stylesheet" type="text/css" href="/deepcms/resources/css/base.css"> <link rel="stylesheet" type="text/css" href="css.css"> <link rel="shortcut icon" href="http://www.ajaxjs.com/images/ext.ico"> <link rel="icon" href="http://www.ajaxjs.com/images/ext.ico"> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script> <script type="text/javascript"> _uacct = "UA-118165-1"; urchinTracker(); </script>
js 代码
- Ext.onReady(function(){
- // create the Data Store
- var ds = new Ext.data.Store({
- // load using script tags for cross domain, if the data in on the same domain as
- // this page, an HttpProxy would be better
- proxy: new Ext.data.ScriptTagProxy({
- url: 'http://extjs.com/forum/topics-remote.php'
- }),
- // create reader that reads the Topic records
- reader: new Ext.data.JsonReader({
- root: 'topics',
- totalProperty: 'totalCount',
- id: 'post_id'
- }, [
- {name: 'title', mapping: 'topic_title'},
- {name: 'author', mapping: 'author'},
- {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
- {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
- {name: 'excerpt', mapping: 'post_text'}
- ]),
- // turn on remote sorting
- remoteSort: true
- });
- // pluggable renders
- function renderTopic(value, p, record){
- return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);
- }
- function renderTopicPlain(value){
- return String.format('<b><i>{0}</i></b>', value);
- }
- function renderLast(value, p, r){
- return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);
- }
- function renderLastPlain(value){
- return value.dateFormat('M j, Y, g:i a');
- }
- // the column model has information about grid columns
- // dataIndex maps the column to the specific data field in
- // the data store
- var cm = new Ext.grid.ColumnModel([{
- id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
- header: "Topic",
- dataIndex: 'title',
- width: 490,
- renderer: renderTopic,
- css: 'white-space:normal;'
- },{
- header: "Author",
- dataIndex: 'author',
- width: 100,
- hidden: true // 隐藏列
- },{
- id: 'last',
- header: "Last Post",
- dataIndex: 'lastPost',
- width: 150,
- renderer: renderLast
- }]);
- // create the editor grid
- var grid = new Ext.grid.Grid('topic-grid', {
- ds: ds,
- cm: cm,
- selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
- enableColLock:false,
- loadMask: true //是否显示正在加载
- });
- // make the grid resizable, do before render for better performance
- var rz = new Ext.Resizable('topic-grid', {
- wrap:true,
- minHeight:100,
- pinned:true,
- handles: 's'
- });
- rz.on('resize', grid.autoSize, grid);
- // render it
- grid.render();
- var gridFoot = grid.getView().getFooterPanel(true);
- // 在grid底部增加分页按钮
- var paging = new Ext.PagingToolbar(gridFoot, ds, {
- pageSize: 25,
- displayInfo: true,
- displayMsg: 'Displaying topics {0} - {1} of {2}',
- emptyMsg: "No topics to display"
- });
- // 增加可以查看详细信息的按钮
- paging.add('-', {
- pressed: true,
- enableToggle:true,
- text: 'Detailed View',
- cls: 'x-btn-text-icon details',
- toggleHandler: toggleDetails
- });
- // trigger the data store load
- // ds.load({params:{start:0, limit:5}, extraParams:{dept:'test', viaParam:true}});
- //ds.load({params:{start:0, limit:5, department:'test', viaPara:true}});
- //ds.load({params:{start:0, limit:5}});
- //查询时需要用到的参数
- // ds.on('beforeload', function() {
- // ds.baseParams = {
- // dept: 'test111',
- // viaParam: true
- // };
- // });
- // 传入start和limit参数以初始化数据
- ds.load({params:{start:0, limit:25}});
- function toggleDetails(btn, pressed){
- cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;
- cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;
- grid.getView().refresh();
- }
- });
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。
本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
例如: http://extjs.com/forum/topics-remote.php?start=0&limit=1
php 代码
- $link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")
- or die("Could not connect");
- mysql_select_db("test") or die("Could not select database");
- $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
- $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];
- $rs_count = mysql_query($sql_count);
- $rows = mysql_num_rows($rs_count);
- $rs = mysql_query($sql);
- while($obj = mysql_fetch_object($rs))
- {
- $arr[] = $obj;
- }
- Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';
<script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript>
</noscript> <script src="ext-base.js" type="text/javascript"></script> <script src="lib.js" type="text/javascript"></script> <noscript></noscript> <link rel="stylesheet" type="text/css" href="/deepcms/resources/css/base.css"> <link rel="stylesheet" type="text/css" href="css.css"> <link rel="shortcut icon" href="http://www.ajaxjs.com/images/ext.ico"> <link rel="icon" href="http://www.ajaxjs.com/images/ext.ico"> <script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script> <script type="text/javascript"> _uacct = "UA-118165-1"; urchinTracker(); </script>
发表评论
-
Lucene集群
2008-11-27 11:10 2815Lucene in a cluster Lucene是 ... -
ant部署GWT项目
2008-09-08 09:35 2910使用ant部署GWT应用的Bulid.xml文件内容,其中GW ... -
fmpp
2008-08-07 12:39 1477http://pipe.iteye.com/blog/1852 ... -
IE与FireFox的js和css几处不同点
2008-05-07 21:18 1928http://hi.baidu.com/zjcn5205/bl ... -
getResourceAsStream()
2008-04-13 22:15 1546getResourceAsStream() getClass ... -
Spring对各种数据访问框架的集成机制
2008-03-05 01:23 1323何为数据框架集成。 ... -
spring有三种启动方式,使用ContextLoaderServlet,ContextLoader
2008-03-05 01:08 3272http://hi.baidu.com/quxiling/bl ... -
Ajax的小贴士使用小结
2008-02-16 13:28 1205http://www.jb51.net/article/126 ... -
表格隔行换色,真是方便,摘自经典论坛
2007-12-08 18:36 2787表格隔行换色,真是方便,摘自经典论坛 代码 摘自: ... -
设计自己的Annotation
2007-10-24 09:34 1115设计自己的Annotation www.iteye.com/ ... -
基于Spring的Hibernate Search全文检索功能示例
2007-10-17 17:04 6300我就是一个快乐的程序员~ 查看文章 ... -
eclipse中配置Maven
2007-10-15 10:21 3281安装Eclipse(可选) Eclipse是一种流行 ... -
Maven AppFuse Plugin
2007-09-26 14:43 2742appfuse:gen-model:根据数据库的 ... -
Maven2插件开发详解
2007-08-28 10:43 3576Maven2插件开发详解 blog.chinaunix.ne ... -
解决Maven2不支持一些第三方资源的问题
2007-08-28 10:39 1525解决Ma ... -
Maven入门--概念与实例
2007-08-28 10:34 5241Mave ... -
maven2——自动生成工程
2007-08-28 10:29 2510maven2是在ant的基础上发展起来的,并对ant的功能进行 ... -
资源文件及native2ascii应用
2007-07-31 10:04 41741,原理 Property 文件 ... -
用appfuse2.0生成一个单独的模块
2007-07-06 11:38 5191<o:p> </o:p> 使用 App ...
相关推荐
paging.js分页插件 <script src="js/jquery.min.js"> <script type="text/javascript" src="js/paging.js"> <!--分页--> <div id="page" class="page_div"></div>
Vue.js是一款轻量级的前端JavaScript框架,以其组件化、易上手的特点在现代Web开发中广泛应用。SpringBoot则是基于Spring框架的简化版,旨在简化Java Web应用的开发过程。 【描述】中提到,这个项目通过Vue.js实现...
在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...
- **src**:源代码目录,可能有JavaScript文件(如`paging.js`),实现分页扩展器的核心逻辑。 - **demo** 或 **example**:示例代码,展示了如何在实际项目中使用knockout-paging扩展器。 - **dist**:编译后的文件...
3. **分页栏(Paging Toolbar)**:PagingStore通常与PagingToolbar组件一起使用,PagingToolbar提供了导航按钮(如“上一页”、“下一页”)和页码显示,用户可以通过交互来切换页面。 4. **数据加载和更新**:当...
Android开发:Android Jetpack:9.Paging分页加载数据.pdf
jQuery-Paging是一款基于JavaScript库jQuery的轻量级分页插件,它的主要功能是将大量数据分割成多页显示,提供友好的用户交互。通过简单的配置和调用,开发者可以快速集成到项目中,实现动态加载数据的效果。 二、...
**Java JSP 分页技术详解** 在Web应用开发中,数据量较大的情况下,为了提高用户体验,通常需要实现分页功能。Java JSP(JavaServer Pages)作为一种常用的动态网页技术,结合Servlet,可以轻松实现数据的分页显示...
Android开发:Android Architecture Components:11.Paging分页加载数据技术.pdf
- `js/`:存放分页插件的JavaScript源代码。 - `css/`:包含分页样式的CSS文件。 - `demo/`:提供示例代码和演示页面,帮助开发者理解如何使用插件。 - `docs/`:可能包含详细的文档和API说明。 - `dist/`:编译后的...
通过阅读`pageTool.js`源码,我们可以深入了解EXT分页工具条的工作原理,包括事件处理、DOM操作以及数据绑定等细节。 总的来说,EXT分页工具条是EXT框架中的一个重要组成部分,它为Web应用提供了一种高效、直观的...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
分页功能可以通过设置Store的`paging`配置项来启用,例如: ```javascript var store = Ext.create('Ext.data.Store', { model: 'YourModel', autoLoad: true, pageSize: 25, // 每页显示25条记录 proxy: { ...
在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....
要设置分页大小,我们首先需要引入EXT的分页插件`Ext.toolbar.Paging`,然后在配置对象中指定`pagingConfig`。以下是一个简单的例子: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: myStore, ...
"paging.rar" 提供的是一款轻量级的分页组件,非常适合小型项目或者快速原型开发。下面我们将深入探讨这个组件的使用方法、工作原理以及如何将其集成到你的小程序项目中。 首先,我们要明白什么是分页组件。分页...
在IT行业中,分页是网页设计中不可或缺的一部分,特别是在处理大量数据时,如论坛、博客或电子商务网站。这里我们关注的是一个名为“bbs-paging.rar”的压缩包,它是在www.pudn.com上分享的一个资源,专门针对PHP...
- 考虑使用分页(`paging: true`)以减少内存占用。 - 配置合理的搜索策略(`queryMode`)以提升查询效率。 - 通过自定义事件处理函数,确保用户选择的合法性。 综上所述,ExtJS 4.x的ComboboxTree组件是实现...
分页组件如`Ext.toolbar.Paging`可以添加到界面中,提供页码导航和每页显示记录数的选择。`PagingToolbar`与`Store`关联,自动更新页码和记录总数,当用户翻页时会触发`load`事件,加载对应页的数据。 **排序** ...
在实现JavaScript分页时,你需要考虑以下关键点: 1. **数据获取**:使用AJAX从服务器获取分页所需的数据,通常通过HTTP GET或POST请求。 2. **分页参数**:传递当前页码和每页大小等参数到服务器。 3. **数据处理*...