`
jiasudu1649
  • 浏览: 722919 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ext paging.js 分页时的调用的写法。

阅读更多
paging.js,分页时的调用的写法。
js 代码
 
  1. Ext.onReady(function(){  
  2.   
  3.     // create the Data Store  
  4.     var ds = new Ext.data.Store({  
  5.         // load using script tags for cross domain, if the data in on the same domain as  
  6.         // this page, an HttpProxy would be better  
  7.         proxy: new Ext.data.ScriptTagProxy({  
  8.             url: 'http://extjs.com/forum/topics-remote.php'  
  9.         }),  
  10.   
  11.         // create reader that reads the Topic records  
  12.         reader: new Ext.data.JsonReader({  
  13.             root: 'topics',  
  14.             totalProperty: 'totalCount',  
  15.             id: 'post_id'  
  16.         }, [  
  17.             {name: 'title', mapping: 'topic_title'},  
  18.             {name: 'author', mapping: 'author'},  
  19.             {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},  
  20.             {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},  
  21.             {name: 'excerpt', mapping: 'post_text'}  
  22.         ]),  
  23.   
  24.         // turn on remote sorting  
  25.         remoteSort: true  
  26.     });  
  27.   
  28.   
  29.     // pluggable renders  
  30.     function renderTopic(value, p, record){  
  31.         return String.format('<b>{0}</b>{1}', value, record.data['excerpt']);  
  32.     }  
  33.     function renderTopicPlain(value){  
  34.         return String.format('<b><i>{0}</i></b>', value);  
  35.     }  
  36.     function renderLast(value, p, r){  
  37.         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['author']);  
  38.     }  
  39.     function renderLastPlain(value){  
  40.         return value.dateFormat('M j, Y, g:i a');  
  41.     }  
  42.   
  43.     // the column model has information about grid columns  
  44.     // dataIndex maps the column to the specific data field in  
  45.     // the data store  
  46.     var cm = new Ext.grid.ColumnModel([{  
  47.            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })  
  48.            header: "Topic",  
  49.            dataIndex: 'title',  
  50.            width: 490,  
  51.            renderer: renderTopic,  
  52.            css: 'white-space:normal;'  
  53.         },{  
  54.            header: "Author",  
  55.            dataIndex: 'author',  
  56.            width: 100,  
  57.            hidden: true //    隐藏列    
  58.         },{  
  59.            id: 'last',  
  60.            header: "Last Post",  
  61.            dataIndex: 'lastPost',  
  62.            width: 150,  
  63.            renderer: renderLast  
  64.         }]);  
  65.   
  66.       
  67.   
  68.     // create the editor grid  
  69.     var grid = new Ext.grid.Grid('topic-grid', {  
  70.         ds: ds,  
  71.         cm: cm,  
  72.         selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),  
  73.         enableColLock:false,  
  74.         loadMask: true //是否显示正在加载    
  75.     });  
  76.   
  77.     // make the grid resizable, do before render for better performance  
  78.     var rz = new Ext.Resizable('topic-grid', {  
  79.         wrap:true,  
  80.         minHeight:100,  
  81.         pinned:true,  
  82.         handles: 's'  
  83.     });  
  84.     rz.on('resize', grid.autoSize, grid);  
  85.   
  86.     // render it  
  87.     grid.render();  
  88.   
  89.     var gridFoot = grid.getView().getFooterPanel(true);  
  90.   
  91.     // 在grid底部增加分页按钮  
  92.     var paging = new Ext.PagingToolbar(gridFoot, ds, {  
  93.         pageSize: 25,  
  94.         displayInfo: true,  
  95.         displayMsg: 'Displaying topics {0} - {1} of {2}',  
  96.         emptyMsg: "No topics to display"  
  97.     });  
  98.     // 增加可以查看详细信息的按钮   
  99.     paging.add('-', {  
  100.         pressed: true,  
  101.         enableToggle:true,  
  102.         text: 'Detailed View',  
  103.         cls: 'x-btn-text-icon details',  
  104.         toggleHandler: toggleDetails  
  105.     });  
  106.   
  107.   // trigger the data store load    
  108.     // ds.load({params:{start:0, limit:5}, extraParams:{dept:'test', viaParam:true}});            
  109.      
  110.      //ds.load({params:{start:0, limit:5, department:'test', viaPara:true}});        
  111.      
  112.      //ds.load({params:{start:0, limit:5}});        
  113.      
  114.          
  115.      
  116.      //查询时需要用到的参数    
  117.      
  118.     // ds.on('beforeload', function() {    
  119.      
  120.     //       ds.baseParams = {    
  121.      
  122.     //         dept: 'test111',    
  123.      
  124.      //        viaParam: true    
  125.      
  126.      //      };    
  127.      
  128.      //    });        
  129.   
  130.     // 传入start和limit参数以初始化数据  
  131.     ds.load({params:{start:0, limit:25}});  
  132.   
  133.     function toggleDetails(btn, pressed){  
  134.         cm.getColumnById('topic').renderer = pressed ? renderTopic : renderTopicPlain;  
  135.         cm.getColumnById('last').renderer = pressed ? renderLast : renderLastPlain;  
  136.         grid.getView().refresh();  
  137.     }  
  138. });  



Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。

本例中的服务端语言是PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据是已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。
例如: http://extjs.com/forum/topics-remote.php?start=0&limit=1 
php 代码
 
  1. $link = mysql_pconnect("test-db.vinylfox.com""test""testuser")   
  2.     or die("Could not connect");  
  3. mysql_select_db("test") or die("Could not select database");  
  4.   
  5. $sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";  
  6. $sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];  
  7.   
  8. $rs_count = mysql_query($sql_count);  
  9.   
  10. $rows = mysql_num_rows($rs_count);  
  11.   
  12. $rs = mysql_query($sql);  
  13.   
  14. while($obj = mysql_fetch_object($rs))  
  15. {  
  16.     $arr[] = $obj;  
  17. }  
  18.   
  19. 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>
分享到:
评论

相关推荐

    paging.js分页插件.zip

    paging.js分页插件 &lt;script src="js/jquery.min.js"&gt; &lt;script type="text/javascript" src="js/paging.js"&gt; &lt;!--分页--&gt; &lt;div id="page" class="page_div"&gt;&lt;/div&gt;

    paging.zip

    Vue.js是一款轻量级的前端JavaScript框架,以其组件化、易上手的特点在现代Web开发中广泛应用。SpringBoot则是基于Spring框架的简化版,旨在简化Java Web应用的开发过程。 【描述】中提到,这个项目通过Vue.js实现...

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...

    前端项目-knockout-paging.zip

    - **src**:源代码目录,可能有JavaScript文件(如`paging.js`),实现分页扩展器的核心逻辑。 - **demo** 或 **example**:示例代码,展示了如何在实际项目中使用knockout-paging扩展器。 - **dist**:编译后的文件...

    extjs前台分页插件PagingStore!

    3. **分页栏(Paging Toolbar)**:PagingStore通常与PagingToolbar组件一起使用,PagingToolbar提供了导航按钮(如“上一页”、“下一页”)和页码显示,用户可以通过交互来切换页面。 4. **数据加载和更新**:当...

    Android开发:Android Jetpack:9.Paging分页加载数据.pdf

    Android开发:Android Jetpack:9.Paging分页加载数据.pdf

    jQuery-Paging动态分页数据获取插件.zip

    jQuery-Paging是一款基于JavaScript库jQuery的轻量级分页插件,它的主要功能是将大量数据分割成多页显示,提供友好的用户交互。通过简单的配置和调用,开发者可以快速集成到项目中,实现动态加载数据的效果。 二、...

    Java_JSP_Paging.zip_jsp分页_site:www.pudn.com

    **Java JSP 分页技术详解** 在Web应用开发中,数据量较大的情况下,为了提高用户体验,通常需要实现分页功能。Java JSP(JavaServer Pages)作为一种常用的动态网页技术,结合Servlet,可以轻松实现数据的分页显示...

    Android开发:Android Architecture Components:11.Paging分页加载数据技术.pdf

    Android开发:Android Architecture Components:11.Paging分页加载数据技术.pdf

    前端项目-jQuery-Paging.zip

    - `js/`:存放分页插件的JavaScript源代码。 - `css/`:包含分页样式的CSS文件。 - `demo/`:提供示例代码和演示页面,帮助开发者理解如何使用插件。 - `docs/`:可能包含详细的文档和API说明。 - `dist/`:编译后的...

    EXT分页工具条

    通过阅读`pageTool.js`源码,我们可以深入了解EXT分页工具条的工作原理,包括事件处理、DOM操作以及数据绑定等细节。 总的来说,EXT分页工具条是EXT框架中的一个重要组成部分,它为Web应用提供了一种高效、直观的...

    Ext Js权威指南(.zip.001

    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 ...

    extJs之分页控件

    分页功能可以通过设置Store的`paging`配置项来启用,例如: ```javascript var store = Ext.create('Ext.data.Store', { model: 'YourModel', autoLoad: true, pageSize: 25, // 每页显示25条记录 proxy: { ...

    ext分页客户端demo Java js

    在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....

    ext设置分页大小.rar

    要设置分页大小,我们首先需要引入EXT的分页插件`Ext.toolbar.Paging`,然后在配置对象中指定`pagingConfig`。以下是一个简单的例子: ```javascript var grid = Ext.create('Ext.grid.Panel', { store: myStore, ...

    paging.rar

    "paging.rar" 提供的是一款轻量级的分页组件,非常适合小型项目或者快速原型开发。下面我们将深入探讨这个组件的使用方法、工作原理以及如何将其集成到你的小程序项目中。 首先,我们要明白什么是分页组件。分页...

    bbs-paging.rar_site:www.pudn.com

    在IT行业中,分页是网页设计中不可或缺的一部分,特别是在处理大量数据时,如论坛、博客或电子商务网站。这里我们关注的是一个名为“bbs-paging.rar”的压缩包,它是在www.pudn.com上分享的一个资源,专门针对PHP...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    - 考虑使用分页(`paging: true`)以减少内存占用。 - 配置合理的搜索策略(`queryMode`)以提升查询效率。 - 通过自定义事件处理函数,确保用户选择的合法性。 综上所述,ExtJS 4.x的ComboboxTree组件是实现...

    Ext分页排序 Ext分页排序

    分页组件如`Ext.toolbar.Paging`可以添加到界面中,提供页码导航和每页显示记录数的选择。`PagingToolbar`与`Store`关联,自动更新页码和记录总数,当用户翻页时会触发`load`事件,加载对应页的数据。 **排序** ...

    ASP.NETjs分页

    在实现JavaScript分页时,你需要考虑以下关键点: 1. **数据获取**:使用AJAX从服务器获取分页所需的数据,通常通过HTTP GET或POST请求。 2. **分页参数**:传递当前页码和每页大小等参数到服务器。 3. **数据处理*...

Global site tag (gtag.js) - Google Analytics