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 

             var data = [
                       { 'id': 1, 'name': '小王', 'sex': '男' },
                       { 'id': 2, 'name': '小李', 'sex': '男' },
                       { 'id': 3, 'name': '小兰', 'sex': '女' }
             ];

            var store = new Ext.data.JsonStore({
                data: data,
                fields: ['id', 'name', 'sex']
            });
            
            var panel = new Ext.Panel({
                 500,
                height: 130,
                modal: true,
                collapsible: true,
                closeAction: 'hide',
                layout: 'fit',
                region: 'north',
                title: '查找信息',
                items: [{
                    layout: "form",
                    frame: true,
                    xtype: "form",
                    id: "searchForm",
                    autoScroll: true,
                    items: [{
                        fieldLabel: "名称",
                         350,
                        xtype: 'textfield',
                        name: "SearchCode",
                        labelStyle: "text-align:center; "
                    }, {
                        fieldLabel: "Type",
                         350,
                        mode: 'local', //定义本地数据，默认是远程
                        store: store,  //绑定数据源
                        xtype: 'combo',
                        name: "Type",
                        id: "_Type",
                        typeAhead: true,
                        triggerAction: 'all',
                        editable: false,
                        labelStyle: "text-align:center; ",
                        valueField: 'id',      //值列
                        displayField: 'name',  //显示列
                        hiddenName: 'Type',    //后台判断参数
                        selectOnFocus: true,
                        emptyText: '请选择'
                    }],
                    buttonAlign: 'right',
                    fbar: [{
                        text: '查找',
                        handler: function () {

                        }
                    }]
                }]
            });
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获取数据 

        //定义数据存储器store
        var store = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy //定义读取数据的接口
            ({
                url: ActionPageUrl + '?action=GetData'
            }),
            reader: new Ext.data.JsonReader //读取的后台数据存储到记录集results
            ({
                root: 'data',
                totalProperty: 'totalCount'
            },
            ['Id', 'Name'])
        });
        //加载数据
        store.load({
            params: {
                start: 0,
                limit: 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);就可以得到你需要的字串了