Extjs mvc 读取XML数据到form

    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上，简单太多了。