使用Ext.grid.Panel顯示遠端資料

使用Ext.grid.Panel顯示遠端資料

對於Ext.grid.Panel而言，它只是負責顯示Store陣列中心的資料，至於Store儲存的資料到底是瀏覽器本地資料，還是遠端伺服器的資料，Ext.grid.Panel並不關心。因此，使用Ext.grid.Panel顯示遠端資料也非常簡單，只要在配置Ext.data.Store時透過proxy選項指定載入遠端伺服器資料即可。

如下示例示範了使用Ext.data.Store來載入遠端伺服器資料，使用Ext.grid.Panel顯示Store所載入的遠端資料。

程式清單：codes\06\6.8\Ext.grid\Ext.grid.Panel_remote.html

Ext.onReady(function(){

    Ext.define('Book', {

         extend: 'Ext.data.Model',

         fields: [

               {name: 'id' , type: 'int'},

               {name: 'name', type: 'string'},

               {name: 'author', type: 'string'},

               {name: 'price', type: 'float'},

         ]

    });

    // 建立一個Ext.data.Store物件

    var bookStore = Ext.create('Ext.data.Store',

    {

         // 指定使用Book Model管理記錄

         model: 'Book',

         // 使用proxy指定載入遠端資料

         proxy:

         {

               type: 'ajax',

               url: 'getAllBooks',// 向該URL傳送Ajax請求

               reader: { // 使用Ext.data.reader.Json讀取伺服器資料

                    type: 'json',

                    root: 'data' // 直接讀取伺服器響應的data資料

               },

         },

         autoLoad:true// 自動載入伺服器資料

    });

    Ext.create('Ext.grid.Panel', {

         title: '檢視伺服器端圖書',

         width: 550, // 指定表單寬度

         renderTo: Ext.getBody(),

         // 定義該表格包含的所有資料列

         columns: [

               { text: '圖書ID', dataIndex: 'name' , flex: 1 }, // 第1個資料列

               { text: '書名', dataIndex: 'name' , flex: 1 }, // 第2個資料列

               { text: '作者', dataIndex: 'author', flex: 1 }, // 第3個資料列

               { text: '價格', dataIndex: 'price' , flex: 1 }, // 第4個資料列

         ],

         store: bookStore

    });

});

 

上面示例中的粗體字程式碼中透過proxy選項指定從getAllBooks處載入資料，該Servlet就是前面介紹Ext.form.field.ComboBox示例時使用的Servlet，此處不再給出程式碼。該Servlet將會返回系統中所有圖書記錄，該圖書記錄將會由Store負責管理。

在瀏覽器中瀏覽該頁面，可以看到如圖6.74所示頁面。

 

圖6.74　顯示遠端資料

 

本文節選自

《瘋狂Ajax講義（第3版）》

李剛 編著

電子工業出版社出版