Extjs从后台读取数据的三种方式

1.      使用form表单提交

使用表单提交是调用了表单的submit方法，其配置项包括url、method等。这种方式能够以JSON的形式提交参数信息。

var myform = Ext.create('Ext.form.Panel',{

   defaultType: 'textfield',

   items:[{

      fieldLabel : 'Name',

      name : 'name'

   },{

      fieldLabel: 'Gender',

      name : 'gender'

   },{

      fieldLabel : 'Age',

      name: 'age'

   }],

   buttons: [{

      text : 'load',

   handler : function(){

            this.up('form').getForm().submit({

                url: '/request/userinfo',

                method : 'POST',

                success : function(form, action){

                   console.log(form);

                   Ext.Msg.alert('title', 'load success');

});

}]);

2.      使用Ajax异步提交

将上述handler方法中的内容换成一下代码即可。在Ajax的request方法中是一个配置对象，其配置参数包括url，type，params。其中params表示要提交的参数，在此例中是从form表单中通过getValues()方法获得的。该种方式也能将参数一JSON的方式提交到后台，与一个对象匹配。

var values = this.up('form').getForm().getValues();

   Ext.Ajax.request({

      url:'/request/userinfo',

      headers : {'userHeader': 'userMsg'},

      type:'POST',

      params:values,

      success:function(response){

         var data = response.responseText;

         console.log(data);

         console.log("success");

      },

});

3.      使用Ext.data.Store

在项目中经常需要通过提交一些数据来从后台获取相应的信息。例如，在表单中输入某个人的id和name就可以查出它的相关信息并在前台显示。一个关于extjs的例子如下：

//data Model

   Ext.define('User',{

      extend: 'Ext.data.Model',

      fields: [{name:'name',type:'string'},

                {name:'gender',type:'string'},

                 {name:'age',type:'string'}

      ]

});

 

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

      model: 'User',

      pageSize: 20,

   // autoLoad : true,

      proxy: {

         type : 'ajax',      //提交数据的方式

         url : '/request/userinfo',

         reader : {          //以json的形式读取将要提交的数据

            type : 'json',

            root : 'resultList'

         },

         writer : {

            type : 'json'

         },

         actionMethods : {

            create : 'POST'

         }

      },

});  

 

//grid Panel

Ext.create('Ext.grid.Panel',{

   store: userStore,

   columns: [

      {header : 'Name', dataIndex : 'name'},

      {header : 'Gender', dataIndex : 'gender'},

      {header : 'Age', dataIndex : 'age'}

   ],

   height: 200,

   width: 400,

   renderTo: 'div2'

});

 

//form Panel

var myform = Ext.create('Ext.form.Panel',{

      defaultType: 'textfield',

      items:[{

         fieldLabel: 'Name',

         name: 'name'

      },{

         fieldLabel: 'Gender',

         name: 'gender'

      },{

         fieldLabel : 'Age',

         name : 'age'

      }],

      buttons: [{

         text: 'load',

         handler: function(){

           var values = this.up('form').getForm().getValues();

           console.log(values);

           userStore.proxy.extraParams=values;

         userStore.loadPage(1);

       }

    }

});

 

在handler方法中获取form表单的参数后，赋值给userStore.proxy.extraParams，然后调用userStore.loadPage(1)。调用loadPage()方法时，会委托给proxy对象去后台获取数据。所以对proxy的配置是核心。使用这个方式从后台获取数据时，后台接口返回的对象应该包括一个List字段，list中包含所需要的具体信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {

}

UserInfoResp应该像这样有一个List字段

class UserInfoResp {

List<User> resulltList;

}