extjs3 设置本地store &&远程

1、在extjs3 中我想设置一个本地的store，便于静态的加载grid。如代码：
menuStore = new Ext.data.SimpleStore({
                data:{rows:[
                        {id:0,text:'xxxx',jsurl:'xx-xxx'},
                        {id:1,text:'xxxx',jsurl:'xx-xxx'},
                        {id:2,text:'xxxx',jsurl:'xx-xxx'}
                    ]},
                fields:['id', 'text', 'jsurl']

});

2、local属性

Extjs ComboBox示例

（1）

        var data=[
            ['a','a'],
            ['b','b'],
            ['c','c']
        ];
        
        var store = new Ext.data.SimpleStore({
            fields:['value','text'],
            data:data
        });
        
        var combo = new Ext.form.ComboBox({
            store:store,
            //renderTo:'combo',
            emptyText:'Please select...',
            fieldLabel:'combo',
            mode:'local',
            triggerAction:'all',
            valueField:'value',
            displayField:'text'
        });
        
        var form = new Ext.form.FormPanel({
            id:'form',
            title:'form',
            renderTo:'form',
            height:500,
            items:combo
        });  

（2）

 Ext.onReady( function() {

        var dataStore= new Ext.data.SimpleStore({fields:['text','value'],data:[['a','a'],['b','b']]});
       Ext.Ajax.request({
            url:'test.do',
            callback:function(options,success,response){
                var json = Ext.util.JSON.decode(response.responseText);
                dataStore.loadData(json.data);
            }
        });
        var combo = new Ext.form.ComboBox({
            id:'combo',
            name:'combo',
            fieldLabel:'请选择',
            store:dataStore,
            emportyText:'请选择',
            mode:'local',
            triggerAction:'all',
            valueField:'value',
            displayField:'text'
        });
        
        var form1 = new Ext.form.FormPanel({
           width:350,
           frame:true,
           renderTo:"form1",
           labelWidth:80,
           title:"FormPanel",
           bodyStyle:"padding:5px 5px 0",
           defaults:{width:150,xtype:"textfield",inputType:"password"},
           items:[
               {fieldLabel:"不能为空",
                allowBlank:false,//不允许为空
                 blankText:"不能为空，请填写",//错误提示信息，默认为This field is required!
                id:"blanktest",
                anchor:"90%"
               },
               combo
               ]
        });

    });

(3)

response.getWriter().print("[['AAA','AAA'],['BBB','BBB'],['CCC','CCCC'],['a','a'],['b','b'],['d','c']]");

    Ext.onReady( function() {
        var store = new Ext.data.Store({
            proxy:new Ext.data.HttpProxy({url:'test.do'}),
            reader:new Ext.data.ArrayReader({},[
                {name:'value'},
                {name:'text'}
            ])
        });
        
        var combo = new Ext.form.ComboBox({
            store:store,
            mode:'remote',
            triggerAction:'all',
            valueField:'value',
            displayField:'text'
        });
        
        var form = new Ext.form.FormPanel({
            id:'form',
            title:'form',
            renderTo:'form',
            items:[
                combo
            ]
        });
    }); 

3、remote属性

为了实现Stor的动态加载，

Java代码  

1. var orgId = "";  
2. var fStore =new Ext.data.Store({  
3.             autoLoad : false,  
4.             url: 'findFromOMRole.action?orgId='+'orgId',  
5.             reader : new Ext.data.JsonReader({  
6.                 totalProperty: 'totalCount',  
7.                 root: 'list'  
8.             }, [{name : 'menuName'}, { name : 'id'}]),  
9.             sortInfo: {field: 'menuName', direction: 'ASC'}  
10.         });  

 在Ext.form.ComboBox({})中引如了事件listeners

Java代码  

1. var orgIdStore = new Ext.data.JsonStore({  
2.            url: 'findComOrgRole.action',  
3.            autoLoad: false,  
4.            sortInfo: {field: 'orgName', direction: 'ASC'},  
5.            fields: [{  
6.                name: 'role.org.id',  
7.                mapping: 'id'  
8.            }, {  
9.                name: 'orgName',  
10.                mapping: 'orgName'  
11.            }]  
12.        });  
13.        orgIdStore.load();  
14.          
15.        var orgIdComboBox = new Ext.form.ComboBox({  
16.            listClass: 'x-combo-list-small',  
17.            enableKeyEvents: true,  
18.            selectOnFocus: true,  
19.            hiddenName: 'role.org.id',  
20.            name: 'role.org.id',  
21.            id:"orgIds",  
22.            valueField: 'role.org.id',  
23.            displayField: 'orgName',  
24.            blankText : '请选择',  
25.     emptyText : '选择机构名称',  
26.            selectOnFocus: true,  
27.            mode: 'local',  
28.            triggerAction: 'all',  
29.            store: orgIdStore,  
30.            fieldLabel: "所在组织",  
31.            allowBlank : false,  
32.            editable: false,  
33.            listeners: {'select': function(){  
34.             Ext.getCmp('roleSele').setValue('');  
35.             var t_orgId = Ext.getCmp('orgIds').getValue();  
36.             fStore.load();  
37.             }  
38.         }  
39.        });  

 即，当所选择项改变时，fStor的url所接受的参数的值，改变，从而实现动态加载数据的目的。

但是这样做有通过fireBug可以看到，url所接受的参数的值，没有改变，即还是原来的值，没有实现动态加载数据，

若将URL放在listeners中

Java代码  

1. listeners: {'select': function(){  
2.                 Ext.getCmp('roleSele').setValue('');  
3.                 var t_orgId = Ext.getCmp('orgIds').getValue();  
4.   
5. url: 'findFromOMRole.action?orgId='+'orgId'  
6.  fStore.load();  
7.                 }  
8.             }  

firebug会报："this.proxy is undefined"的错误。

这其实是对ext的stor的工作原理不清楚造成的。

首先，ext的stor是通过代理模式实现的，它首先通过一个代理向后台发送请求（根据url），而后再通过代理将数据返回，并对数据进行封装，才是我们最后得到的数据。

标准的Stor形式是：

Java代码  

1. var d_stor = new Ext.data.Store({  
2.                 proxy: new Ext.data.HttpProxy({  
3.                     url: 'queryMessages.action'  
4.                 }),  
5.                 reader: _jsonReader,  
6.                 remoteSort: true//True表示在proxy配合下，要求服务器提供一个更  
7.                                          //  新版本的数据对象以便排序，反之就是在Record缓  
8.                                          //存中排序（默认是false）。  
9.             });  

 stor在load之前，必须要为其指定代理，若我们不指定proxy代理属性，而直接指定url，那么url如果有值传入，会为该URL创建一个HttpProxy对象，否则就没有代理模式。会报"this.proxy is undefined"的错误。

这就是为什么上面会出现这样的错误，那么如何实现数据的动态加载呢？

我们可以通过以下两种方式解决:

Java代码  

1. fStore.baseParams.orgId = orgId;  
2. fStore.load();  

 等号左边的orgId为所传参数变量，右边的orgId为所传的值，当然此处的load()方法是放在Ext.form.ComboBox({})的listeners中的。此方案的传参与加载是分开来进行的。

第二种解决方案是：

Java代码  

1. tStore.load({  
2.                         params: {  
3.                             orgId: t_orgId  
4.                         }  
5.                     });  

 传参与加载一体化处理