Extjs的几种交互方式

Extjs主要是用来面向企业平台开发的，它的目标就是企业级应用，整体使用起来还是比较好用的，模块化做的很好。适合写后台的程序员写页面，因为不用过多的关注html和css，直接调用组件就可以完成开发工作，弊端就是修改样式的时候比较麻烦，另外由于大量使用了组件，页面的加载速度也比较慢。
项目中用到Extjs，今天介绍下平时开发过程中用到的Extjs的前后台交互的几种方式：

（1）利用Ext.Ajax.request（）
这种方式是最常用的前后台交互方式，一般增删改操作都可以使用。

 Ext.Ajax.request({                    url : 'store.action',// 请求的路径                    method : 'post',//请求的方法                    params : {//参数用逗号隔开，发出请求带的参数                            action : 'import'                            },                    //请求失败的回调函数                    failure : function(response, options) {                        var repTx = Ext.util.JSON                            .decode(response.responseText);                    Ext.notification.msg(lblMessage, repTx.info);                        },                    //请求成功的回调函数                    success : function(response, options) {                        var repTx = Ext.util.JSON                        .decode(response.responseText);                    Ext.notification.msg(lblMessage, repTx.info);                    ds.reload(grid.getSelectionModel()                                    .clearSelections());                        }                    });

其中的responseText和另一个responseXML是最常用的两个属性，若服务器端返回是“text/json”类型时，客户端需要使用Ext.util.JSON.decode(result.responseText)来构造json对象。

（2）数据源Ext.data.Store

Store从字面理解（计算机领域）就是存储的意思，类似于一个本地仓库，用于存储数据，它包括了ArrayStore、DirectStore、GroupingStore、JsonStore以及XmlStore。Store最常用的是proxy和reader两个组件，
其中proxy（数据源）一般用于从后台的路径去读取值，reader（读取数据）表示字获取数据后对数据的解析，将数据解析成Record对象。
下面给出一个平时经常写的Store

   var timeChoiceStore = new Ext.data.Store({                proxy : new Ext.data.HttpProxy({                    url : '../public/public.action?action=timechoice'                }),                reader : new Ext.data.XmlReader({                    record : 'timechoice',                     id : 'value'                }, ['value', 'localized_display'])            }); 

这里的url表示从后台action中的timechoice方法中读取数据，而reader中的value和localized_display 表示从ComboBox 中的valueField和displayField，record是由reader创建的实例，这里是将root放在一个ajax文件中，将数据解析成xml的形式。

<root>    <timechoices>        <@ww.iterator value="timeChoiceList">            <timechoice>                <value><@ww.property value="value"/></value>                <localized_display><@ww.property value="localized_display"/></localized_display>            </timechoice>        </@ww.iterator>    </timechoices></root>

　当然，如果没有将autoLoad设置为true，那么我们需要手动进行timeChoiceStore.load()方法的调用，以便拿到Xml（或者Array、Json）格式的数据。

（3）Ext.form表单的提交方法

第一种是作为后台交互,向前台传输数据,要有传输的参数 ：

importform.submit( {                      url : 'store.action’,                    params : {         //传输参数                                  ids : id,                                  store_id : parent_id,                              },                        method : 'post',                      success : function(form, action) { //请求成功                                                                          },                      failure : function(form, action) { //请求失败                                }                      });

第二种是单纯的表单提交,把该表单的信息提交到后台action处理,不需要加参数:

importform..submit( {                  url : 'store.action',                  method : 'post',                  success : function(form, action) { //请求成功                                                                    },                  failure : function(form, action) {//请求失败                         }                });