Ext JS4学习教程+笔记（三）Ajax请求

Ext JS4进行Ajax请求访问，将数据载入store。

使用Ext.data.Store类的proxy属性就可以简单设置，

type:'ajax'和url:'****'都是必须的，

reader有一个root子属性，可以选择用json的哪一部分内容。

注意：

store.load()的回调函数中，保证数据已经加载了。

2， 例如如下的代码，把store中的数据通过ajax加载到一个组合框(Combo box)中，组合框的store属性指定到Ajax载入的数据， displayField属性就是数据中需要显示在下拉框中的那一个属性 .

注意，这里store的fields属性应与实际json数据保持一致（也可以用Model类定义好，用model属性指定）。

function  dataTest(){

        var  store = Ext.create( 'Ext.data.Store'  ,{

                                          fields:[  'name' , 'password'  , 'birthday'  ],

                                          proxy:{

                                                type:  'ajax' ,

                                                url:  '/spring/user/ajax2' ,

                                                reader:{

                                                      type:  'json'

                                                        //root :'items2'

                                                }

                                          }

//                                        data:[

//                                              {name:'测试1',age:12},

//                                              {name:'测试2',age:15}

//                                        ],

//                                        autoLoad:true

                                          });

      store.load(  function (records, operation, success) {

//          store.each(function(record){

//                      alert(record.get('name'));

//          });

                  Ext.create(  'Ext.form.ComboBox' ,{

                                                fieldLabel:  '姓名' ,

                                                store:store,

                                                displayField:  'password' ,

                                                renderTo:Ext.getBody()

                                                

                  });

      });                                       

      

}

这里 /spring/user/ajax2返回的数据为：

1. [{birthday:1339237340265, name:测试1, password:12340}
2. , {birthday:1339237340265, name:测试2, password:12341}
3. , {birthday:1339237340265, name:测试3, password:12342}
4. , {birthday:1339237340265, name:测试4, password:12343}
5. , {birthday:1339237340265, name:测试5, password:12344}]

进行测试时用文本文件保存，作为url指定到该文本文件也可以运行。