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