`

EXT2.0: GridPanel 分页方法绝好例子

EXTCSSPHPJavaScriptjson 
阅读更多

EXT2.0: GridPanel 分页方法绝好例子

将代码保持成html文件，放在ext 包路径下面，直接打开即可，看到效果

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>  
  3. <HEAD>  
  4.     <LINK href="ext2.0/resources/css/ext-all.css" type=text/css rel=stylesheet>    
  5.     <SCRIPT src="ext2.0/adapter/ext/ext-base.js" type=text/javascript></SCRIPT>  
  6.     <SCRIPT src="ext2.0/ext-all.js" type=text/javascript></SCRIPT>  
  7.   
  8.     <SCRIPT>  
  9.     Ext.onReady(function(){    
  10.         //自定义列,可以更改显示内容，比如 常用到的 0：男 1：女   
  11.         function check(value)   
  12.         {   
  13.            if (value=='195154')   
  14.            {   
  15.                return '<span style="color:red;font-weight:bold;">内容已更改</span>';   
  16.            }    
  17.            else   
  18.            {   
  19.                return value;   
  20.            }   
  21.         }   
  22.            
  23.         //跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php   
  24.        //可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式   
  25.         var store = new Ext.data.Store({   
  26.                 proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),   
  27.                 reader: new Ext.data.JsonReader({   
  28.                     root: 'topics',   
  29.                     totalProperty: 'totalCount',   
  30.                     id: 'post_id'   
  31.                     },[   
  32.                     'post_id','topic_title','author'   
  33.                 ])   
  34.                 });   
  35.            store.load({params:{start:0, limit:10}});   
  36.   
  37.   
  38.         //定义勾选框，不需要可不必定义   
  39.         var sm = new Ext.grid.CheckboxSelectionModel();   
  40.            
  41.         //定义列   
  42.         var colM=new Ext.grid.ColumnModel([   
  43.             new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义   
  44.             sm,//勾选框，不需要可不必定义   
  45.             {header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},   
  46.             // 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数   
  47.             {header:'列2',dataIndex:'topic_title',width:170,sortable:true},   
  48.             {header:'列3',dataIndex:'author',width:170}   
  49.         ]);   
  50.            
  51.         //生成表格   
  52.         var grid = new Ext.grid.GridPanel({   
  53.             renderTo:'show',   
  54.             title:"表格",   
  55.             height:400,   
  56.             width:600,    
  57.             cm:colM,   
  58.             sm:sm,   
  59.             store:store,   
  60.             viewConfig: {   
  61.                             forceFit:true   
  62.             },   
  63.             bbar: new Ext.PagingToolbar({   
  64.                 pageSize: 10,   
  65.                 store: store,   
  66.                 displayInfo: true,   
  67.                 displayMsg: '第{0} 到 {1} 条数据 共{2}条',   
  68.                 emptyMsg: "没有数据"   
  69.             })   
  70.         });    
  71.   
  72.     });   
  73.     </SCRIPT>  
  74.     <DIV id=show></DIV>  
  75. </body>
  76. </html>

 

运行效果如图：

 

分享到：
| Ext: 使用GridPanel分页 firefox能正常显 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext2.0（jsp标签）

    8. **强大的表格功能**：EXT 2.0的GridPanel组件支持分页、排序、过滤、编辑等功能，可以处理大量数据并提供高效的显示和操作。 9. **拖放支持**：EXT 2.0支持组件之间的拖放操作，可以用于构建交互式的应用，如...

    ext2.0网格实践源码

    5. **分页和数据加载**：EXT2.0的GridPanel支持分页，你将看到如何配置和使用PagingToolbar来实现分页功能，以及如何在用户翻页时动态加载数据。 6. **自定义行为**：EXT GridPanel允许开发者自定义很多行为，例如...

    Ext2.0中文文档

    5. **数据网格**：Ext的GridPanel是一个功能强大的数据展示组件，可以用来展示大量数据并进行排序、筛选、编辑等操作。它支持行选择、分页、列拖放等功能，是处理表格数据的理想选择。 6. **API文档**：中文文档中...

    EXT2.0分页

    EXT2.0的分页功能不仅限于简单的数字翻页，还可以与其他组件结合，如GridPanel，实现表格数据的分页。同时，EXT2.0还支持远程分页和本地分页，前者将分页逻辑交给服务器处理，后者则在客户端完成，适用于数据量较小...

    ext2.0项目源代码供大家学习ext使用

    6. **GridPanel**：EXT的表格组件，可展示大量数据并支持排序、过滤、分页等功能。 7. **FormPanel**：用于创建表单，支持各种表单元素，并能进行验证和数据提交。 8. **Drag and Drop**：EXT支持拖放操作，允许...

    ext2.0 详解和API

    1. **组件化设计**：EXT2.0引入了一套完整的组件系统，如表格（Grid）、面板（Panel）、窗口（Window）和菜单（Menu），这些组件可以自由组合，形成复杂的用户界面。 2. **数据绑定**：EXT2.0实现了模型-视图-控制...

    ext 2.0

    3. **表格网格**：Ext 2.0的表格组件（GridPanel）功能强大，支持分页、排序、过滤、编辑等功能，能处理大量数据并实现高性能渲染。同时，它还提供了行选择、行编辑等多种交互模式。 4. **表单组件**：Ext 2.0提供...

    EXT2.0 API文档

    4. **表单处理**：EXT2.0提供了强大的表单处理功能，包括字段验证、数据绑定和远程提交等。 5. **图表组件**：EXT2.0支持多种图表类型，如柱状图、饼图、线图等，用于数据可视化。 6. **拖放功能**：EXT2.0支持...

    Ext2.2.GridPanel分页处理+dwrproxy(js对象和json两种数据)

    本话题将深入探讨如何在Ext2.2中使用GridPanel进行分页处理，并结合DWR（Direct Web Remoting）代理来实现数据的异步加载。我们将关注两个数据格式：JavaScript对象（JS对象）和JSON。 首先，Ext2.2的GridPanel是...

    EXT2.0帮助文档CHM版

    例如，文档中会阐述EXT的GridPanel组件，这是一个用于展示表格数据的强大组件，支持排序、分页、行选择等多种功能。开发者可以通过学习GridPanel的配置项和方法，了解如何创建自定义的表格视图。 此外，EXT的窗口...

    ext2.0 中文资料(含多例子)

    1. **强大的UI组件**：Ext 2.0拥有大量的UI组件，如表格、树形结构、网格等，这使得开发者可以快速搭建用户界面。 2. **易于使用的API**：Ext 2.0的API设计友好，易于理解，即使是初学者也能快速上手。 3. **高度可...

    ext2.0入门教程

    3. **布局管理**：EXT2.0有多种内置的布局方式，如Fit、Border、Table、Form等，用于管理组件在容器中的排列和大小调整，使得你可以灵活地设计界面布局。 4. **数据绑定**：EXT2.0支持数据绑定，能够将UI组件与数据...

    Ext2.0框架的Grid使用介绍

    Grid是Ext2.0中用于展示数据的重要组件之一，它不仅能够显示各种格式的数据（如二维数组、JSON或XML），还支持数据的排序、过滤和分页等功能。Grid的核心在于`Ext.grid.GridPanel`类及其相关的配置项。 ##### 1. ...

    ext2.0中文教程.rar

    3. **数据绑定**：EXT的数据绑定机制允许开发者将界面组件直接连接到数据源，实现数据的实时更新。这部分会涵盖Store（数据存储）、Model（数据模型）和Proxy（数据代理）的使用。 4. **事件处理**：EXT的事件驱动...

    ext2.0中文API（部分）

    这个模块包含了EXT 2.0的各种组件，如表格（GridPanel）、树形视图（TreePanel）、表单（FormPanel）、按钮（Button）、菜单（Menu）等。这些组件都具有丰富的配置选项和事件处理能力，可以根据需求进行高度定制。 ...

    Ext2.0框架的grid使用

    本文将深入探讨Ext2.0框架下Grid的使用方法，涵盖其基本配置、数据绑定以及高级特性如CheckBox的集成，旨在帮助开发者快速掌握并高效利用这一工具。 #### Grid组件概述 Grid组件在Ext2.0框架中主要用于展示表格...

    JSP+EXt2.0实现分页的方法

    在这个文件中，详细介绍了如何使用JSP结合EXt2.0实现分页功能，该方法涉及JavaScript与JSP页面的交互、数据的遍历以及分页的实现技巧。 首先，通过Ext.onReady函数，确保在Ext JS框架准备就绪后执行代码，这是一段...

    Ext2.0示例讲解

    Ext2.0 是一个强大的JavaScript框架，特别适用于构建富客户端应用程序，尤其是复杂的Web界面。它的核心特性在于提供了一系列丰富的组件，包括Grid（表格）控件，这使得开发者能够用JS创建出与桌面应用相当的交互体验...

    ext.net 动态创建gridpanel

    GridPanel 是 ExtJS（Ext.NET 的基础）中的一个重要组件，用于展示数据表格。在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext...

    无废话ExtJs 系统教程十四[列表：GridPanel]

    GridPanel是ExtJS中的核心组件之一，它允许用户以表格形式展示大量数据，并支持分页、排序、过滤、编辑等功能。在实际开发中，GridPanel经常用于后台管理系统，因为它能够提供直观的数据浏览和操作体验。 首先，要...

Magicbox
Global site tag (gtag.js) - Google Analytics