szhswl
          宋針還的個人空間

          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再不是一件難事了。

          本文轉自:http://www.ajaxjs.com/yuicn/article.asp?id=20076012



          ---------------------------------------------------------------------------------------------------------------------------------
          說人之短,乃護己之短。夸己之長,乃忌人之長。皆由存心不厚,識量太狹耳。能去此弊,可以進德,可以遠怨。
          http://www.aygfsteel.com/szhswl
          ------------------------------------------------------------------------------------------------------ ----------------- ---------
          posted on 2007-12-08 19:07 宋針還 閱讀(607) 評論(0)  編輯  收藏 所屬分類: EXT
          主站蜘蛛池模板: 农安县| 丹阳市| 延川县| 宜兰县| 巴彦淖尔市| 黄骅市| 临澧县| 文水县| 靖安县| 昌黎县| 南召县| 鄂温| 浦县| 平远县| 天峻县| 辛集市| 裕民县| 加查县| 尉氏县| 甘德县| 通化市| 静宁县| 临颍县| 香港 | 恩施市| 南郑县| 大连市| 陆丰市| 炉霍县| 永平县| 临汾市| 五河县| 六枝特区| 长子县| 铜陵市| 晋州市| 化德县| 成安县| 通渭县| 永泰县| 东光县|