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