Extjs4.2 model关联读复杂XML

前端之家收集整理的这篇文章主要介绍了Extjs4.2 model关联读复杂XML前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目标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','Ext.data.association.BelongsTo'
    ],uses: [
        'AM.model.teacher'
    ],proxy: {  //关联model貌似必须各自定义自己的proxy,而不能放store中
        type: 'ajax',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',fields: [
        {
            mapping: '/',//注意这里要设置mapping属性
            name: 'name'
        }
    ],proxy: {
        type: 'ajax',totalProperty: 'studentTotal',record: 'name'//这是一个没有子节点的record
        }
    },belongsTo: {
        model: 'AM.model.teacher'
    }
});

猜你在找的XML相关文章