ExtJS中的Grid分页

1.建立页面:

//引入必要文件
        <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
        <script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

//定义表头

var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

//定义数据

var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'Pager.php'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });

//定义表格

var grid = new Ext.grid.GridPanel({
        renderTo: 'grid',
        autoHeight: true,
        store: store,
        cm: cm,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: store,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        })
    });
    store.load({params:{start:0,limit:10}}); //初始化数据显示

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../examples.js"></script>
        <div id="grid" style="height:265px;"></div>
    </body>
</html>

2.PHP:

<?php

//返回Json格式数据,可以从数据库中查询获得,分页时传人两个参数:start和limit,可以使用$_POST[‘start’]和$_POST[‘limit’]获得,此略

$s=’{totalProperty:100,root:[{id:0,name:’name0’,descn:’descn0’},{id:1,name:’name1’,descn:’descn1’},{id:2,name:’name2’,descn:’descn2’}]}’;

echo $s;

转载于:https://www.cnblogs.com/GarfieldTom/archive/2009/06/26/1511775.html

ExtJS中的Grid分页相关推荐

[转]ExtJS Grid 分页时保持选中的简单实现方法
原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就 ...
ExtJs Grid分页时序号自增的实现,以及查询以后的序号的处理
ExtJs Grid分页时,默认情况下每页的序号都是从1起始的,这往往不符合我们的习惯.这里实现了序号的自动增加. 如:每页20条第一页从1开始,第二页从21条开始. 先定义一个全局变量如record ...
[ExtJS 6]Grid分页工具栏无效问题解决
文章目录前情描述: 问题描述: 解决方法: 思路: 实现如下: 前情描述: Ext JS中,Grid上可以使用tbar或bbar等添加分页的工具栏.一般状况下,该分页工具栏可以和该Grid的Stor ...
EXTJS 中grid 动态增加列的方法
总结:gridpanel动态生成列的核心就是在拼凑columnmodel和后台返回store的数据对的上 1-首先动态拼凑columnmodel 前端拼凑例子 me.columns.push({tex ...
ExtJS实现完美Grid(2)--分组统计
我们在<ExtJS实现完美Grid(1)>的基础改造一下,让它能够实现分页面统计功能首先我们在页面要引入分组插件,因为ext-all.js不包括分组功能,可以在ext下载的examples ...
Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)
先上图这中间遇到grid分页和下拉comboBox级联(用户.地域) 源代码如下: /**//* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, ...
extjs中元数据_Extjs中Store小总结
http://blog.csdn.net/without0815/article/details/7798170 1.什么是store? Store类似于一个本地仓库(即数据存储器),包括有 Arra ...
[转]ExtJs中使用中碰到的三个问题的解决方法
这里的经验不是指对这种框架总体上面的一些介绍,只是记录了本月中使用ExtJs中遇到的3个问题的解决方法,这里还是要感谢Extjs论坛的 Animal和Condor,每次在我遇到拦路虎的时候,总能在他俩 ...
ExtJs中column与form布局的再次领悟
前段时间转了一篇有关于ExtJs中column与form的布局问题(可以参考这篇文章http://sucre.blog.51cto.com/1084905/884279 ),今天在设计页面时又用到了这 ...

ExtJS中的Grid分页

ExtJS中的Grid分页相关推荐

最新文章

热门文章