据目前所知:Store至少可分为两类,一个是SimpleStore,另一个是JsonStore。
1,用在gridPanel中常使用SimpleStore
var store_stat = new Ext.data.SimpleStore({
fields:[
{name:'date',mapping:'date'}
,{name:'model',mapping:'model'}
,{name:'per',mapping:'per'}
]
});
2,填充表单中的下拉菜单(combo),常用JsonStore。
(1)简单JsonStore
1 var data = [ 2 { 'id': 1, 'name': '小王', 'sex': '男' }, 3 { 'id': 2, 'name': '小李', 'sex': '男' }, 4 { 'id': 3, 'name': '小兰', 'sex': '女' } 5 ]; 6 7 var store = new Ext.data.JsonStore({ 8 data: data, 9 fields: ['id', 'name', 'sex'] 10 }); 11 12 var panel = new Ext.Panel({ 13 width: 500, 14 height: 130, 15 modal: true, 16 collapsible: true, 17 closeAction: 'hide', 18 layout: 'fit', 19 region: 'north', 20 title: '查找信息', 21 items: [{ 22 layout: "form", 23 frame: true, 24 xtype: "form", 25 id: "searchForm", 26 autoScroll: true, 27 items: [{ 28 fieldLabel: "名称", 29 width: 350, 30 xtype: 'textfield', 31 name: "SearchCode", 32 labelStyle: "text-align:center; " 33 }, { 34 fieldLabel: "Type", 35 width: 350, 36 mode: 'local', //定义本地数据,默认是远程 37 store: store, //绑定数据源 38 xtype: 'combo', 39 name: "Type", 40 id: "_Type", 41 typeAhead: true, 42 triggerAction: 'all', 43 editable: false, 44 labelStyle: "text-align:center; ", 45 valueField: 'id', //值列 46 displayField: 'name', //显示列 47 hiddenName: 'Type', //后台判断参数 48 selectOnFocus: true, 49 emptyText: '请选择' 50 }], 51 buttonAlign: 'right', 52 fbar: [{ 53 text: '查找', 54 handler: function () { 55 56 } 57 }] 58 }] 59 });
60 61 panel.render(document.body);
PS:combo的使用方法可看:http://www.cnblogs.com/hannover/archive/2011/01/27/1945928.html
批注:当时静态数据时,fields可以是['id','name','sex'],
如果是通过url动态获取数据是,必须是fields:[{name:'id'},{name:'suit'},{name:'type'}]
(2)通过url获取数据
1 //定义数据存储器store 2 var store = new Ext.data.Store({ 3 proxy: new Ext.data.HttpProxy //定义读取数据的接口 4 ({ 5 url: ActionPageUrl + '?action=GetData' 6 }), 7 reader: new Ext.data.JsonReader //读取的后台数据存储到记录集results 8 ({ 9 root: 'data', 10 totalProperty: 'totalCount' 11 }, 12 ['Id', 'Name']) 13 }); 14 //加载数据 15 store.load({ 16 params: { 17 start: 0, 18 limit: 20 19 } 20 });
注:先后顺序不能颠倒。先JsonStore,后ComboBox。
(3)高级用法对比
//用法一 var jsonStore = new Ext.data.JsonStore({ url: 'api/fail_parts_bydepart.php', listeners:{ 'loadexception' : function(e){ alert(e.toString()); } }, fields: [ {name: 'name'}, {name: 'flash'}, {name: 'percent'} ] }); jsonStore.load({ params:{ 'level' : level, 'department' : paras.department, 'product': paras.product, 'target': is_one, 'suit':paras.suit, 'model':paras.model, 'part':paras.part, 'dateStr':dateStr } }); //用法二 var store = { 'department' : new Ext.data.JsonStore({ url: 'api/list_k.php?action=department', fields: ['name']}), 'product' : new Ext.data.JsonStore({ url: 'api/list_k.php?action=product', fields: ['name']}) }; store.product.baseParams = {'department' : encodeURIComponent(data.data.name)}; store.product.load(); detailStore.on('beforeload', function() { detailStore.baseParams = { }; });
JS中encodeURIComponent函数用php解码
在JS中使用了encodeURIComponent对中文进行编码在PHP中使用iconv('UTF-8','gb2312',$q);就可以得到你需要的字串了