extjs 3.4 store的分类与使用

据目前所知：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                  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                          350,
30                         xtype: 'textfield',
31                         name: "SearchCode",
32                         labelStyle: "text-align:center; "
33                     }, {
34                         fieldLabel: "Type",
35                          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);就可以得到你需要的字串了