Extjs中json是亲儿子,干什么都很简单方便,框架都替你做了,但是xml就是后妈养的,很多地方得自己来,如果后台只能返回xml那就惨了。
intraweb后台返回的xml响应格式:
<response>
<update>
<dataset success="true">//数据
<total>2</total>
<row>
<id>1</id>
<name>langsin1</name>
<email>langsin@langsin.com</email>
<sex>0</sex>
<age>36</age>
</row>
</dataset>
<control id="IWForm1" type="IWFORM"></control>
</update>
<execute></execute>
<rewrite></rewrite>
<submit>/m0ffm0uXqZyWnenendfeqtK0qZDen0nfotfeqZvboey/$/</submit>
<trackid></trackid>
</response>
1 个请求
Extjs表单:
app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('AM', '../../app');//避开intraweb的session管理,自动给URL添加AppID问题,必须指定Extjs库的加载路径
Ext.require('AM.view.MyViewport');//必须加require,事先加载,否则生成AppId后,动态加载会找不到文件
Ext.require('AM.controller.MyController');
Ext.require('AM.model.MyModel');
Ext.application({
controllers: [
'MyController'
],
name: 'AM',
launch: function() {
Ext.create('AM.view.MyViewport');
}
});
view
Ext.define('AM.view.MyViewport', {
extend: 'Ext.container.Viewport',
requires: [
'Ext.form.Panel',
'Ext.form.field.Text',
'Ext.button.Button'
],
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
frame: true,
height: 237,
itemId: 'xform',
width: 390,
layout: 'auto',
bodyPadding: 10,
title: 'XML Form',
fieldDefaults: {
labelAlign: 'right',
labelWidth: 75,
msgTarget: 'side'
},
waitMsgTarget: true,
items: [
{
xtype: 'textfield',
width: 280,
fieldLabel: 'id',
name: 'id'
},
{
xtype: 'textfield',
width: 280,
fieldLabel: 'name',
name: 'name'
},
{
xtype: 'textfield',
width: 280,
fieldLabel: 'email',
name: 'email'
},
{
xtype: 'textfield',
width: 280,
fieldLabel: 'sex',
name: 'sex'
},
{
xtype: 'textfield',
width: 280,
fieldLabel: 'age',
name: 'age'
},
{
xtype: 'button',
itemId: 'load',
text: '载入数据'
},
{
xtype: 'button',
formBind: true,
disabled: true,
text: '提交数据'
}
]
}
]
});
me.callParent(arguments);
}
});
modle
Ext.define('AM.model.MyModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Xml'
],
fields: [
{
name: 'id'
},
{
name: 'name'
},
{
name: 'email'
},
{
name: 'sex'
},
{
name: 'age'
}
],
proxy: {
type: 'ajax',
url: '/'+GAppID+'/$/callback?callback=IWCallBack1',
headers: {
'Content-Type': 'text/xml;charset=UTF-8'
},
reader: {
type: 'xml',
successProperty: '@success',
record: 'row'
}
}
});
controller
Ext.define('AM.controller.MyController', {
extend: 'Ext.app.Controller',
models: [
'MyModel'
],
views: [
'MyViewport'
],
onButtonClick: function() {
var me = this;
var userView = me.getView('MyViewport').create();//必须create才能得到view对象
var userModel = me.getModel('MyModel');//不用也不能create,直接得到model对象
var userForm = userView.down('form[itemId=xform]');//不使用id来获得组件form,避免id冲突
userModel.load(1,{ //store.load([config])不用id号,modle.load必须要id号参数 modle.load(id,[config])
scope: this,
page: 1,
limit: 50,
start:0,
callback: function (record, operation, success) { //第一个参数record就是model,model就是一个record
if (success) {
//Ext.MessageBox.alert('',record.get('name'));//直接根据字段名输出字段值
//Ext.MessageBox.alert('',record.get(record.fields.keys[1]));//动态获取字段名输出字段值
userForm.loadRecord(record);
}
}
// success: function(record) {
// userForm.loadRecord(record); // when user is loaded successfully, load the data into the form
// }
});
},
init: function(application) {
this.control({
"viewport>form>button[itemId=load]": {
click: this.onButtonClick
}
});
}
});
如果能返回json,不用写modle,proxy,read,直接就能关联到form的field上,简单太多了。