官方教程--查看文章
 
Tutorial: Grid组件的简易分页
发布时间:2008-3-6
  • 上一篇文章:
  • 下一篇文章:

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

    本例中的服务端事PHP,数据库是MySQL,用来导出一些随机的数据。下列脚本的作用是,获取我们想要的数据,同时这些数据事已分好页的数据。分页的参数是由Page Toolbar传入的变量limit和start所决定的。


    $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).'})';

    由于每个后台开发的环境都不尽相同,所以这里的服务端代码就不细究了。

    怎么做一个分页的Grid

    本例采用的是ScriptTagProxy,原因是 范例代码 和 服务端代码 不是在同一个服务器上(译注:即“跨域”),而大多数的情况是,在同一个服务器上得到数据,直接用HttpProxy就可以了。

    使用DataStore与平时唯一不同的地方,便是需要设置totalProerty属性。本例中,我们从服务端的脚本计算出“total”这个值,告诉DataStore总共有多少个记录,这里指的是所有的记录数。


    var ds = new Ext.data.Store({

    proxy: new Ext.data.ScriptTagProxy({
    url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
    }),

    reader: new Ext.data.JsonReader({
    root: 'results',
    totalProperty: 'total',
    id: 'id'
    }, [
    {name: 'employee_name', mapping: 'name'},
    {name: 'job_title', mapping: 'title'},
    {name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
    {name: 'is_active', mapping: 'active'}
    ])

    });

    分页栏Toolbar

    这里加入一个分页栏到Grid的面板中,--差不多完成喽。


    var gridFoot = grid.getView().getFooterPanel(true);

    var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 25,
    displayInfo: true,
    displayMsg: 'Displaying results {0} - {1} of {2}',
    emptyMsg: "No results to display"
    });

    最后传入startlimit参数以初始化数据。


    ds.load({params:{start:0, limit:25}});

    花时间较多的地方是,在后台如何生成数据,以配合Grid的运作,一旦这些工作OK后,分页Grid再不是一件难事了。



     [官方教程][组图]ExtJS 4 : 更快!更易用!更健壮! 新特性抢先看 (myext,12-05)
    Ext JS 4 Preview: 更快!更易用!更健壮!新特性抢先看从 sencha官方的Ext JS Road Map看来我们得到到了Ext JS3.3和4.0将发布的新特性一览表: Ext JS 4.0A brand new plugin system - almost any class i……

     [官方教程]Ext Core中文手册 (myext整理,07-07)
    简介Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许可为大家服务。在Ext Core中有许多激赏的功能,在倡导快速Web开发的同时也本着高质量、可伸缩性的代码的指导思想进行着。Core库对DOM操作、Ajax、事件、动画、模板、00机制等的任务都有相应的支持。Core库基……

     [官方教程]模板引擎的应用 (佚名,03-06)
    本教程基于Ext的模板引擎展开详述,亦是对 Shea Frederick“模板入门”教程一文的补充。假设读者已经初步接触过模板(Templates),和格式化函数的基本语法为“{VARIABLE:<FORMATFUNCTION>[(可选的参数)]}”。 正式开始假设我们打算从一变量中,打……

     [官方教程][图文]Ext JS + jQTouch + Raphaël = Sencha (myext整理,06-26)
    6月15日,当开发者访问著名的JavaScript库ExtJS网站,会发现自己被重导向到另一个不熟悉的网址和界面www.sencha.com。原来,按官方博客的说法,ExtJS项目已经与触摸屏代码库项目jQTouch和SVG处理库Raphael合并,后两个项目的创始人David Kaneda和Dmi……

     [官方教程]ExtJs:函数的原型扩展 (未知,01-10)
    在JavaScript中,函数是可以带有方法的对象。Ext库提供的扩展会对Function对象——包括内建的函数、你定义的函数,这些都会继承。添加这些的方法能方便地绑定函数到特定的作用域。 Contents[hide]1 作用域的重要性 2 委托和回调 2.1 createDelegate 2.2 ……

     


    ©2008 MyExt.cn
    本站文章来自互联网,仅供学习和研究使用,如有版权问题,请发送Email:myext@126.com.