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) {//请求失败
                         }
                });