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>[e-mail]</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',fieldLabel: 'name',name: 'name'
                        },fieldLabel: 'email',name: 'email'
                        },fieldLabel: 'sex',name: 'sex'
                        },fieldLabel: 'age',name: 'age'
                        },{
                            xtype: 'button',itemId: 'load',text: '载入数据'
                        },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 (usermodel,operation,success) {      //第一个参数records就是model，model就是一个records
                        if (success) {
                           Ext.MessageBox.alert('',usermodel);
                           userForm.loadRecord(usermodel);
                        }
                      }
          //          success: function(usermodel) {
          //                userForm.loadRecord(usermodel); // 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上，简单太多了。