Extjs4.2 model关联读复杂XML_extjs model 关联-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoyan966/article/details/48860611

本文介绍如何使用ExtJS框架中的XML数据模型进行一对多的数据关联，并通过具体示例展示了教师与学生之间的模型关联配置及读取过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目标XML文件内容

<?xml version="1.0" encoding="UTF-8"?>
<teacherList>
	<teacherTotal>2</teacherTotal>
	<teacher>
		<name>teacher1</name>
		<sex>F</sex>
		<hasManyStudent>//这一层必须得有，对应model中hasmany name
			<studentTotal>2</studentTotal>
			<student>
				<name>student1_1</name>
				<sex>M</sex>
			</student>
			<student>
				<name>student1_2</name>
				<sex>F</sex>
			</student>
		</hasManyStudent>
	</teacher>
	<teacher>
		<name>teacher2</name>
		<sex>M</sex>
		<hasManyStudent>//这一层必须得有，对应model中hasmany name
			<studentTotal>2</studentTotal>
			<student>
				<name>student2_1</name>
				<sex>M</sex>
			</student>
			<student>
				<name>student2_2</name>
				<sex>M</sex>
			</student>
		</hasManyStudent>
	</teacher>
</teacherList>

teacher model

Ext.define('AM.model.teacher', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Xml',
        'Ext.data.association.HasMany'
    ],
    uses: [
        'AM.model.student'
    ],

    fields: [
        {
            name: 'sex'
        },
        {
            name: 'name'
        }
    ],

    proxy: {  //关联model貌似必须各自定义自己的proxy，而不能统一放store中，即使url一样
        type: 'ajax',
        headers: {
            'Content-Type': 'text/xml;charset=UTF-8'
        },
        reader: {
            type: 'xml',
            root: 'teacherList',//可以不写
            totalProperty: 'teacherTotal',//可以不写
            record: 'teacher'
        }
    },

    hasMany: {
        model: 'AM.model.student',//关联子model
        name: 'hasManyStudent'//对应XML中的实际节点名
    }
});

student model

Ext.define('AM.model.student', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Xml',
        'Ext.data.association.BelongsTo'
    ],
    uses: [
        'AM.model.teacher'
    ],

    fields: [
        {
            name: 'sex'
        },
        {
            name: 'name'
        }
    ],

    proxy: {  //关联model貌似必须各自定义自己的proxy，而不能放store中
        type: 'ajax',
        headers: {
            'Content-Type': 'text/xml;charset=UTF-8'
        },
        reader: {
            type: 'xml',
            root: 'hasManyStudent',//可以不写
            totalProperty: 'studentTotal',//可以不写
            record: 'student'
        }
    },

    belongsTo: {
        model: 'AM.model.teacher'//关联父model
    }
});

store

Ext.define('AM.store.mystore', {
    extend: 'Ext.data.Store',

    requires: [
        'AM.model.teacher'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'AM.model.teacher',
            storeId: 'testStore' //必须设storeId
        }, cfg)]);
    }
});

controller

Ext.define('AM.controller.MyController', {
    extend: 'Ext.app.Controller',

    models: [
        'student',
        'teacher'
    ],
    stores: [
        'tstore'
    ],
    views: [
        'MyViewport'
    ],

    onReadClick: function() {
        var me = this;
        var teacherModel = me.getModel('teacher');
        var studentModel = me.getModel('student');
        var userStore = me.getStore('mystore');
        teacherModel.getProxy().url = '/'+GAppID+'/$/callback?callback=IWCallBack1';
        studentModel.getProxy().url = '/'+GAppID+'/$/callback?callback=IWCallBack1';
        userStore.load({
            callback: function (records, operation, success) {
                if (success) {
                    console.log(records);
                    //Ext.MessageBox.alert('成功',records[0].get('name'));
                    Ext.MessageBox.alert('成功',records[0].get('name')+'_'+records[0].get('sex')+'_'+records[0].hasManyStudent().getAt(0).get('name')+'_'+records[0].hasManyStudent().getAt(1).get('name'));
                    //Ext.MessageBox.alert('成功',records[0].student().count());
                }
            }
        });

        //Ext.MessageBox.alert('成功','成功');
    },

    init: function(application) {
        this.control({
            "#read": {
                click: this.onReadClick
            }
        });
    }

});

执行结果

如果XML文件的形式是这样

<?xml version="1.0" encoding="UTF-8"?>
<teacherList>
	<teacherTotal>2</teacherTotal>
	<teacher>
		<name>teacher1</name>
		<sex>F</sex>
		<hasManyStudent>
			<studentTotal>2</studentTotal>
			<name>student1</name> //像这样record属性对应的节点如果没有子节点了 model field 必须要设置mapping属性为 '/'
			<name>student2</name>
		</hasManyStudent>
	</teacher>
	<teacher>
		<name>teacher2</name>
		<sex>M</sex>
		<hasManyStudent>
			<studentTotal>2</studentTotal>
			<name>student3</name>
			<name>student4</name>
		</hasManyStudent>
	</teacher>
</teacherList>

model

Ext.define('AM.model.student', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Xml',
        'Ext.data.association.BelongsTo'
    ],
    uses: [
        'AM.model.teacher'
    ],

    fields: [
        {
            mapping: '/',  //注意这里要设置mapping属性
            name: 'name'
        }
    ],

    proxy: {
        type: 'ajax',
        headers: {
            'Content-Type': 'text/xml;charset=UTF-8'
        },
        reader: {
            type: 'xml',
            root: 'hasManyStudent',
            totalProperty: 'studentTotal',
            record: 'name'//这是一个没有子节点的record
        }
    },

    belongsTo: {
        model: 'AM.model.teacher'
    }
});