本系列教程基本可以看做是ExtJS API中文版+實例演示
Ext.data.Store 用法介紹
這個組件繼承自Ext.data.AbstractStore
本篇講解了如何構造並且做一些基本使用，如果有什么疑問可以聯系我QQ1330771552
下面是他的屬性列表
autoLoad //是否自動加載 autoSync //是否自動同步 buffered //允許緩沖（官方有個5000條數據的例子可以參看） clearOnPageLoad //是否在加載新數據的時候清空舊數據 clearRemovedOnLoad//加載的時候把刪除掉的數據徹底刪除（所謂刪除掉的數據是指store.remove（）） data//數據 fields//解析數據的字段 filters//過濾器（可以參看Ext.util.Filter和Ext.ux.grid.filter.Filter） groupDir groupField//用哪一個字段分組 leadingBufferZone//緩沖的情況下，最多緩沖多少行 listeners//監聽器，可以指定各種on事件 model//解析數據的模型，模型可以代替proxy和fields配置 pageSize//每頁顯示多少條數據 proxy//數據代理（其實就是發送ajax來請求數據用的） purgePageCount//多少頁清除一次緩存數據（具體是和緩沖結合使用，本文不介紹緩沖） remoteFilter//這個屬性會往服務器發送過濾條件 remoteGroup//往服務器發送分組條件（同上，做法就是表單參數提交到后台） remoteSort//往后台發送排序條件 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下日期出現錯誤nan
}],
// 數據代理服務
proxy : {
type : 'ajax',// 使用ajax請求
url :'/read/demo/product.action',// 請求后台讀取數據的地址
// 讀取數據的工具（數據代理）
reader : {
// 讀取方式按照json字符串格式讀取
type : 'json',
// json解析成js對象之后讀取所有數據（通常是數組）的屬性名稱。
root : 'root',
// json解析成js對象之后讀取數據總條數的屬性名稱
totalProperty : 'totalProperty'
}
},
// 自動加載
autoLoad : true,
// 每頁顯示多少條
pageSize : PAGESIZE
});
// 商品grid
Var demoGrid = Ext.create('Ext.grid.Panel', {
// 不要邊框能好看一些
border : false,
//用來進行選擇的選擇器
selModel : Ext.create('Ext.selection.CheckboxModel'),
// 所使用的數據源
store : renYuanStore,
// 創建列詳細可以參看renYuanColumns函數
columns : renYuanColumns(),
// 需要分頁、全顯示按鈕
pageChange : true,
// 底部toolbar，不需要進行后處理。所以使用“匿名類”
bbar : [{
// 控件類型pagingtoolbar
xtype : 'pagingtoolbar',
// 這個屬性好像在extAPI中沒寫，但是不寫還不行。能控制ProgressBarPager。不然ProgressBarPager會出bug
pageSize : PAGESIZE,
// 所使用的數據源
store : renYuanStore,
// 因為Ext.ux.LiveSearchGridPanel默認把tbar和bbar占用了。所以只能使用dockedItems添加toolbar
dock : 'bottom',
// 插件，使用ProgressBarPager插件，顯示進度條
plugins : Ext.create('Ext.ux.ProgressBarPager')
}],
// 添加雙擊編輯事件監聽器
listeners : {
itemdblclick : function() {
// editBtn是編輯按鈕。此處做法目的是雙擊數據進行編輯
editBtn.handler();
}
}
});
該組件相當於一個數據源，能夠給很多呈現數據的組件提供數據。
核心工作過程是：
首先請求后台讀取數據，接受后台返回的數據（其實就是個字符串）
然后按照指定格式解析數據。通常默認格式為json
我們可以自定義解析規則。詳細參看Ext.data.reader.Reader
最后把解析好的數據轉換成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）會出現一個錯誤，大致意思是說，重復定義某個類了。
我們可以這樣避免這個問題
Var exitModel=Ext.ModelManager.get(‘modelId’)//此處modelId是你自己給自己定義的model指定的ID。('User')
//如果不知道exitModel是什么類型，為什么可以直接取反，請參看js基礎（js中 nan，undifined，null，0，‘’都是互通的）
If(!exitModel){
//TODO 在這里定義你的model
}
自定義模型之后就可以使用該模型來構造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下日期出現錯誤nan
}]
});
var demoStore = Ext.create('Ext.data.Store', {
model: 'ProductModel',
// 數據代理服務
proxy : {
type : 'ajax',// 使用ajax請求
url :'/read/demo/product.action',// 請求后台讀取數據的地址
// 讀取數據的工具（數據代理）
reader : {
// 讀取方式按照json字符串格式讀取
type : 'json',
// json解析成js對象之后讀取所有數據（通常是數組）的屬性名稱。
root : 'root',
// json解析成js對象之后讀取數據總條數的屬性名稱
totalProperty : 'totalProperty'
}
},
// 自動加載
autoLoad : true,
// 每頁顯示多少條
pageSize : PAGESIZE
});
寫上面的store，這樣是不是比原來簡單多了，而且更清晰了。
其實proxy屬性也可以定義在model中。
只是通常不建議這么做。因為模型就是模型，他的數據代理是數據源賦予的。這樣也能讓我們的程序中，可以定義很多的模型，然后根據需要選擇模型來搭配代理，從而為同一個模型賦予不同的后台讀取操作。
針對store的各種方法合理使用，我會根絕需要在后續篇章中進行講解。
注：本篇持續更新，首版日期：2012年7月10日15:57:23 第一版
PS:近期會出一套關於ExtJs動態form動態grid的相關教程。2012年7月10日16:19:54