Extjs4.2 model关联读复杂XML

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

目标XML文件内容

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <teacherList>
  3. <teacherTotal>2</teacherTotal>
  4. <teacher>
  5. <name>teacher1</name>
  6. <sex>F</sex>
  7. <hasManyStudent>//这一层必须得有,对应model中hasmany name
  8. <studentTotal>2</studentTotal>
  9. <student>
  10. <name>student1_1</name>
  11. <sex>M</sex>
  12. </student>
  13. <student>
  14. <name>student1_2</name>
  15. <sex>F</sex>
  16. </student>
  17. </hasManyStudent>
  18. </teacher>
  19. <teacher>
  20. <name>teacher2</name>
  21. <sex>M</sex>
  22. <hasManyStudent>//这一层必须得有,对应model中hasmany name
  23. <studentTotal>2</studentTotal>
  24. <student>
  25. <name>student2_1</name>
  26. <sex>M</sex>
  27. </student>
  28. <student>
  29. <name>student2_2</name>
  30. <sex>M</sex>
  31. </student>
  32. </hasManyStudent>
  33. </teacher>
  34. </teacherList>
teacher model
  1. Ext.define('AM.model.teacher',{
  2. extend: 'Ext.data.Model',requires: [
  3. 'Ext.data.Field','Ext.data.proxy.Ajax','Ext.data.reader.Xml','Ext.data.association.HasMany'
  4. ],uses: [
  5. 'AM.model.student'
  6. ],fields: [
  7. {
  8. name: 'sex'
  9. },{
  10. name: 'name'
  11. }
  12. ],proxy: { //关联model貌似必须各自定义自己的proxy,而不能统一放store中,即使url一样
  13. type: 'ajax',headers: {
  14. 'Content-Type': 'text/xml;charset=UTF-8'
  15. },reader: {
  16. type: 'xml',root: 'teacherList',//可以不写
  17. totalProperty: 'teacherTotal',//可以不写
  18. record: 'teacher'
  19. }
  20. },hasMany: {
  21. model: 'AM.model.student',//关联子model
  22. name: 'hasManyStudent'//对应XML中的实际节点名
  23. }
  24. });
student model
  1. Ext.define('AM.model.student','Ext.data.association.BelongsTo'
  2. ],uses: [
  3. 'AM.model.teacher'
  4. ],proxy: { //关联model貌似必须各自定义自己的proxy,而不能放store中
  5. type: 'ajax',root: 'hasManyStudent',//可以不写
  6. totalProperty: 'studentTotal',//可以不写
  7. record: 'student'
  8. }
  9. },belongsTo: {
  10. model: 'AM.model.teacher'//关联父model
  11. }
  12. });

store

  1. Ext.define('AM.store.mystore',{
  2. extend: 'Ext.data.Store',requires: [
  3. 'AM.model.teacher'
  4. ],constructor: function(cfg) {
  5. var me = this;
  6. cfg = cfg || {};
  7. me.callParent([Ext.apply({
  8. model: 'AM.model.teacher',storeId: 'testStore' //必须设storeId
  9. },cfg)]);
  10. }
  11. });


controller

  1. Ext.define('AM.controller.MyController',{
  2. extend: 'Ext.app.Controller',models: [
  3. 'student','teacher'
  4. ],stores: [
  5. 'tstore'
  6. ],views: [
  7. 'MyViewport'
  8. ],onReadClick: function() {
  9. var me = this;
  10. var teacherModel = me.getModel('teacher');
  11. var studentModel = me.getModel('student');
  12. var userStore = me.getStore('mystore');
  13. teacherModel.getProxy().url = '/'+GAppID+'/$/callback?callback=IWCallBack1';
  14. studentModel.getProxy().url = '/'+GAppID+'/$/callback?callback=IWCallBack1';
  15. userStore.load({
  16. callback: function (records,operation,success) {
  17. if (success) {
  18. console.log(records);
  19. //Ext.MessageBox.alert('成功',records[0].get('name'));
  20. 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'));
  21. //Ext.MessageBox.alert('成功',records[0].student().count());
  22. }
  23. }
  24. });
  25.  
  26. //Ext.MessageBox.alert('成功','成功');
  27. },init: function(application) {
  28. this.control({
  29. "#read": {
  30. click: this.onReadClick
  31. }
  32. });
  33. }
  34.  
  35. });
执行结果



如果XML文件的形式是这样

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <teacherList>
  3. <teacherTotal>2</teacherTotal>
  4. <teacher>
  5. <name>teacher1</name>
  6. <sex>F</sex>
  7. <hasManyStudent>
  8. <studentTotal>2</studentTotal>
  9. <name>student1</name> //像这样record属性对应的节点如果没有子节点了 model field 必须要设置mapping属性为 '/'
  10. <name>student2</name>
  11. </hasManyStudent>
  12. </teacher>
  13. <teacher>
  14. <name>teacher2</name>
  15. <sex>M</sex>
  16. <hasManyStudent>
  17. <studentTotal>2</studentTotal>
  18. <name>student3</name>
  19. <name>student4</name>
  20. </hasManyStudent>
  21. </teacher>
  22. </teacherList>

model

  1. Ext.define('AM.model.student',fields: [
  2. {
  3. mapping: '/',//注意这里要设置mapping属性
  4. name: 'name'
  5. }
  6. ],proxy: {
  7. type: 'ajax',totalProperty: 'studentTotal',record: 'name'//这是一个没有子节点的record
  8. }
  9. },belongsTo: {
  10. model: 'AM.model.teacher'
  11. }
  12. });

猜你在找的XML相关文章