ExtJs開發(fā)教程_001_Ext.data.Store使用方法詳解

本系列教程基本可以看做是ExtJS API中文版+實例演示

更多內容請參看：http://www.rzrgm.cn/mrye

Ext.data.Store 用法介紹

這個組件繼承自Ext.data.AbstractStore

本篇講解了如何構造并且做一些基本使用，如果有什么疑問可以聯(lián)系我QQ1330771552

下面是他的屬性列表

autoLoad  //是否自動加載
autoSync //是否自動同步
buffered //允許緩沖（官方有個5000條數(shù)據(jù)的例子可以參看）
clearOnPageLoad //是否在加載新數(shù)據(jù)的時候清空舊數(shù)據(jù)
clearRemovedOnLoad//加載的時候把刪除掉的數(shù)據(jù)徹底刪除（所謂刪除掉的數(shù)據(jù)是指store.remove（））
data//數(shù)據(jù)
fields//解析數(shù)據(jù)的字段
filters//過濾器（可以參看Ext.util.Filter和Ext.ux.grid.filter.Filter）
groupDir
groupField//用哪一個字段分組
leadingBufferZone//緩沖的情況下，最多緩沖多少行
listeners//監(jiān)聽器，可以指定各種on事件
model//解析數(shù)據(jù)的模型，模型可以代替proxy和fields配置
pageSize//每頁顯示多少條數(shù)據(jù)
proxy//數(shù)據(jù)代理（其實就是發(fā)送ajax來請求數(shù)據(jù)用的）
purgePageCount//多少頁清除一次緩存數(shù)據(jù)（具體是和緩沖結合使用，本文不介紹緩沖）
remoteFilter//這個屬性會往服務器發(fā)送過濾條件
remoteGroup//往服務器發(fā)送分組條件（同上，做法就是表單參數(shù)提交到后臺）
remoteSort//往后臺發(fā)送排序條件
sortOnFilter//排序的時候進行過濾
storeId//唯一標示，讓Ext.data.StoreManager來管理用的
trailingBufferZone//緩沖多少條

// 本頁的全局pageSize
var PAGESIZE = 20;
 
var demoStore = Ext.create('Ext.data.Store', {
           // fields一定要明確指定type，這樣有很多好處，比如filter能直接設為true，便會默認按照store-fields設置好的type來確定filter的類型。
           fields : [{
                     name : 'primaryKey',
                     type : 'int'
                  },{
                     name : 'price',
                     type : 'float'
                  }, {
                     name : 'productName',
                     type : 'string'
                  }, {
                     name : 'title',
                     type : 'string'
                  }, {
                     name : 'buyDate',
                     type : 'date',
                     dateFormat : 'Y-m-d'// 此處可以避免IE下日期出現(xiàn)錯誤nan
                  }],
           // 數(shù)據(jù)代理服務
           proxy : {
              type : 'ajax',// 使用ajax請求
               url :'/read/demo/product.action',// 請求后臺讀取數(shù)據(jù)的地址
              // 讀取數(shù)據(jù)的工具（數(shù)據(jù)代理）
              reader : {
                  // 讀取方式按照json字符串格式讀取
                  type : 'json',
                  // json解析成js對象之后讀取所有數(shù)據(jù)（通常是數(shù)組）的屬性名稱。
                  root : 'root',
                  // json解析成js對象之后讀取數(shù)據(jù)總條數(shù)的屬性名稱
                  totalProperty : 'totalProperty'
              }
           },
           // 自動加載
           autoLoad : true,
           // 每頁顯示多少條
           pageSize : PAGESIZE
       });
  
  
  
// 商品grid
       Var demoGrid = Ext.create('Ext.grid.Panel', {
                  // 不要邊框能好看一些
                  border : false,
//用來進行選擇的選擇器
                  selModel : Ext.create('Ext.selection.CheckboxModel'),
                  // 所使用的數(shù)據(jù)源
                  store : renYuanStore,
                  // 創(chuàng)建列詳細可以參看renYuanColumns函數(shù)
                  columns : renYuanColumns(),
                  // 需要分頁、全顯示按鈕
                  pageChange : true,
                  // 底部toolbar，不需要進行后處理。所以使用“匿名類”
                  bbar : [{
                            // 控件類型pagingtoolbar
                            xtype : 'pagingtoolbar',
                            // 這個屬性好像在extAPI中沒寫，但是不寫還不行。能控制ProgressBarPager。不然ProgressBarPager會出bug
                            pageSize : PAGESIZE,
                            // 所使用的數(shù)據(jù)源
                            store : renYuanStore,
                            // 因為Ext.ux.LiveSearchGridPanel默認把tbar和bbar占用了。所以只能使用dockedItems添加toolbar
                            dock : 'bottom',
                            // 插件，使用ProgressBarPager插件，顯示進度條
                            plugins : Ext.create('Ext.ux.ProgressBarPager')
                         }],
                  // 添加雙擊編輯事件監(jiān)聽器
                  listeners : {
                     itemdblclick : function() {
// editBtn是編輯按鈕。此處做法目的是雙擊數(shù)據(jù)進行編輯
                         editBtn.handler();
                     }
                  }
              });

該組件相當于一個數(shù)據(jù)源，能夠給很多呈現(xiàn)數(shù)據(jù)的組件提供數(shù)據(jù)。

核心工作過程是：

首先請求后臺讀取數(shù)據(jù)，接受后臺返回的數(shù)據(jù)（其實就是個字符串）

然后按照指定格式解析數(shù)據(jù)。通常默認格式為json

我們可以自定義解析規(guī)則。詳細參看Ext.data.reader.Reader

最后把解析好的數(shù)據(jù)轉換成Ext.data.Model實例

我們可以自定義模型。

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int', convert: null},
        {name: 'phone', type: 'string'},
        {name: 'alive', type: 'boolean', defaultValue: true, convert: null}
    ],
  
    changeName: function() {
        var oldName = this.get('name'),
            newName = oldName + " The Barbarian";
  
        this.set('name', newName);
    }
});

通常重復打開定義了Ext.data.Model的頁面（就是加載js）會出現(xiàn)一個錯誤，大致意思是說，重復定義某個類了。

我們可以這樣避免這個問題

Var exitModel=Ext.ModelManager.get(‘modelId’)//此處modelId是你自己給自己定義的model指定的ID。('User')

//如果不知道exitModel是什么類型，為什么可以直接取反，請參看js基礎（js中 nan，undifined，null，0，‘’都是互通的）

If(!exitModel){

//TODO 在這里定義你的model <br>}

自定義模型之后就可以使用該模型來構造store

改寫上面的store

Ext.define('ProductModel', {
     extend: 'Ext.data.Model',
     fields: [{
                     name : 'primaryKey',
                     type : 'int'
                  },{
                     name : 'price',
                     type : 'float'
                  }, {
                     name : 'productName',
                     type : 'string'
                  }, {
                     name : 'title',
                     type : 'string'
                  }, {
                     name : 'buyDate',
                     type : 'date',
                     dateFormat : 'Y-m-d'// 此處可以避免IE下日期出現(xiàn)錯誤nan
                  }]
 });
  
 var demoStore = Ext.create('Ext.data.Store', {
     model: 'ProductModel',
     // 數(shù)據(jù)代理服務
    proxy : {
              type : 'ajax',// 使用ajax請求
               url :'/read/demo/product.action',// 請求后臺讀取數(shù)據(jù)的地址
              // 讀取數(shù)據(jù)的工具（數(shù)據(jù)代理）
              reader : {
                  // 讀取方式按照json字符串格式讀取
                  type : 'json',
                  // json解析成js對象之后讀取所有數(shù)據(jù)（通常是數(shù)組）的屬性名稱。
                  root : 'root',
                  // json解析成js對象之后讀取數(shù)據(jù)總條數(shù)的屬性名稱
                  totalProperty : 'totalProperty'
              }
           },
           // 自動加載
           autoLoad : true,
           // 每頁顯示多少條
           pageSize : PAGESIZE
       });

寫上面的store，這樣是不是比原來簡單多了，而且更清晰了。

其實proxy屬性也可以定義在model中。

只是通常不建議這么做。因為模型就是模型，他的數(shù)據(jù)代理是數(shù)據(jù)源賦予的。這樣也能讓我們的程序中，可以定義很多的模型，然后根據(jù)需要選擇模型來搭配代理，從而為同一個模型賦予不同的后臺讀取操作。

針對store的各種方法合理使用，我會根絕需要在后續(xù)篇章中進行講解。

posted @ 2024-07-12 19:43 奔跑de陀螺閱讀(201) 評論(0) 收藏舉報

刷新頁面返回頂部

小碼農歲月

ExtJs開發(fā)教程_001_Ext.data.Store使用方法詳解

公告