如何将URL中的URL从sencha EXTjs加载到Modal？ [英] How to load URL from XML into Modal in sencha EXTjs?
本文介绍了如何将URL中的URL从sencha EXTjs加载到Modal？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
到目前为止，我尝试这个，但不知道我在做什么wroong，因为我是一个新手在extjs
XML代码：
<？xml version =1.0encoding =UTF-8？>
< root>
< expanded> true< / expanded>
< children>
< element>
< text>首页< / text>
< leaf> false< / leaf>
< iconCls> x-fa fa-home< / iconCls>
< id> home< / id>
< cls> mainNav< / cls>
< children>
< element>
< leaf> true< / leaf>
< text>标记为< / text>
< iconCls> x-fa fa-tag< / iconCls>
< id>标记为< / id>
< / element>
< element>
< leaf> true< / leaf>
< text>非活动< / text>
< iconCls> x-fa fa-trash< / iconCls>
< id>非活动< / id>
< / element>
< / children>
< / element>
< element>
< text> Users< / text>
< leaf> false< / leaf>
< id> users< / id>
< cls> mainNav< / cls>
< children>
< element>
< leaf> true< / leaf>
< text>消息< / text>
< iconCls> x-fa fa-inbox< / iconCls>
< id> PIU.view.main.Massage< / id>
< / element>
< element>
< leaf> true< / leaf>
< text> Google< / text>
< iconCls> x-fa fa-music< / iconCls>
< id> PIU.view.main.Google< / id>
< / element>
< element>
< leaf> true< / leaf>
< text>视频< / text>
< iconCls> x-fa fa-film< / iconCls>
< id>视频< / id>
< / element>
< / children>
< / element>
< element>
< text>组< / text>
< leaf> true< / leaf>
< iconCls> x-fa fa-users< / iconCls>
< id>组< / id>
< cls> mainNav< / cls>
< / element>
< element>
< text>设置< / text>
< leaf> false< / leaf>
< iconCls> x-fa fa-gears< / iconCls>
< id>设置< / id>
< cls> mainNav< / cls>
< children>
< element>
< leaf> true< / leaf>
< text>大学< / text>
< iconCls> x-fa fa-university< / iconCls>
< id> PIU.view.main.University< / id>
< / element>
< / children>
< / element>
< / children>
< URI>
< URL> http：//www.youtube.com/embed/lgZBsWGaQY0？autoplay = 1< / URL>
< / URI>
< / root>
模式代码：
Ext.define（'PIU.view.main.MainModel'，{
extends：'Ext.app.ViewModel'，
alias：'viewmodel.tree-liststore'，
要求：[
'PIU.view.main.Google'，
]，
数据：{
名称：'AppName'，
}，
存储：{
proxy：{
type：'ajax'，
url：'classic / resources / test.xml'，
reader：{
键入：'xml'，
记录：'URL'
}
}，
navItems：{
type：'tree'，
autoLoad：true ，
proxy：{
type：'ajax'，
url：'classic / resources / test.xml'，
reader：{
type：'xml' ，
记录：'>元素'
}
}
}，
}
}）;
我的Google.js代码：
Ext.define（'PIU.view.main.Google'，{
extend：'Ext.Panel'，
xtype：'PIU.view.main.Google '，
viewModel：'tree-liststore'，
config：{
title：'Iframe'，
closable：true，
}，
items ：[Ext.create（'Ext.panel.Panel'，{
frame：true，
bodyPadding：20，
scrollable：true，
items：[{
modal：true，
bind：{
html：'< iframe src ={URL}width =100％height =100％>< / iframe>
}，
width：'auto'，
height：700
}]，
}）]
} ）;
解决方案
因为你的URI URL节点不在孩子/元素范围，您将无法从商店访问该值。
这里的想法是使用AJAX请求加载该XML文件，获取所需的值，然后加载商店。
Ext.define（'PIU.view.main.MainModel'，{
extends：'Ext.app.ViewModel'，
alias：'viewmodel.tree-liststore'，
data：{
name：'AppName'，
URL：'about：blank'
}，
stores：{
navItems：{
类型：'tree'，
proxy：{
type：'memory'，
reader：{
type：'xml'，
record：'>元素'
}
}
}
}
}）;
您的Google面板定义：
Ext.define（'PIU.view.main.Google'，{
extends：'Ext.Panel'，
xtype：'google-panel'，// xtypes应该总是小写字母
//视图应该总是需要viewModel，而不是其他方式
viewModel：'tree-liststore'，
标题：'iframe'，
closable：true，
layout：{
type：'hbox'，
align：'stretch'
}，
items：[{
xtype： 'treepanel'，
width：200，
bind：{
store：'{navItems}'
}
}，{
xtype：'panel '，
frame：true，
bind：{
html：'< iframe src ={URL}width =100％height =100％>< / iframe>'，
}，
bodyPadding：20，
flex：2
}]，
listeners：{
beforerender： function（panel）{
var vm = panel.getViewModel（），
store = vm.get（'navItems'）;
Ext.Ajax.request（{
url：'data1.xml'，// your xml url here
success：function（response，opts）{
var node = response.responseXML.getElementsByTagName（'URL'）[0];
vm.set（'URL'，node.innerText || node.innerHTML）;
//现在URL已经设置
//允许加载商店
vm.get（'navItems'）。loadRawData（response.responseXML）;
}
} ）;
}
}
}）;
小提琴： https://fiddle.sencha.com/#view/editor&fiddle/24rv
i want to load URL tag data into my Modal Store then into my google.js page.plz can anybody help me what is the best practice too do soo and tell me what i am doing wrong bellow is my code: so far i try this but dont know exactly what i am doing wroong because i am a newbie in extjs
XML code:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<expanded>true</expanded>
<children>
<element>
<text>Home</text>
<leaf>false</leaf>
<iconCls>x-fa fa-home</iconCls>
<id>home</id>
<cls>mainNav</cls>
<children>
<element>
<leaf>true</leaf>
<text>Tagged</text>
<iconCls>x-fa fa-tag</iconCls>
<id>Tagged</id>
</element>
<element>
<leaf>true</leaf>
<text>Inactive</text>
<iconCls>x-fa fa-trash</iconCls>
<id>Inactive</id>
</element>
</children>
</element>
<element>
<text>Users</text>
<leaf>false</leaf>
<id>users</id>
<cls>mainNav</cls>
<children>
<element>
<leaf>true</leaf>
<text>Messages</text>
<iconCls>x-fa fa-inbox</iconCls>
<id>PIU.view.main.Massage</id>
</element>
<element>
<leaf>true</leaf>
<text>Google</text>
<iconCls>x-fa fa-music</iconCls>
<id>PIU.view.main.Google</id>
</element>
<element>
<leaf>true</leaf>
<text>Video</text>
<iconCls>x-fa fa-film</iconCls>
<id>Video</id>
</element>
</children>
</element>
<element>
<text>Group</text>
<leaf>true</leaf>
<iconCls>x-fa fa-users</iconCls>
<id>Group</id>
<cls>mainNav</cls>
</element>
<element>
<text>Setting</text>
<leaf>false</leaf>
<iconCls>x-fa fa-gears</iconCls>
<id>Setting</id>
<cls>mainNav</cls>
<children>
<element>
<leaf>true</leaf>
<text>University</text>
<iconCls>x-fa fa-university</iconCls>
<id>PIU.view.main.University</id>
</element>
</children>
</element>
</children>
<URI>
<URL>http://www.youtube.com/embed/lgZBsWGaQY0?autoplay=1</URL>
</URI>
</root>
Modal code:
Ext.define('PIU.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.tree-liststore',
requires: [
'PIU.view.main.Google',
],
data: {
name: 'AppName',
},
stores: {
proxy: {
type: 'ajax',
url: 'classic/resources/test.xml',
reader: {
type: 'xml',
record: 'URL'
}
},
navItems: {
type: 'tree',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'classic/resources/test.xml',
reader: {
type: 'xml',
record: '> element'
}
}
},
}
});
My Google.js code:
Ext.define('PIU.view.main.Google', {
extend: 'Ext.Panel',
xtype: 'PIU.view.main.Google',
viewModel: 'tree-liststore',
config: {
title: 'Iframe',
closable: true,
},
items: [Ext.create('Ext.panel.Panel', {
frame: true,
bodyPadding: 20,
scrollable: true,
items: [{
modal: true,
bind: {
html: '<iframe src="{URL}" width="100%" height="100%" ></iframe>',
},
width: 'auto',
height: 700
}],
})]
});
解决方案
Because your URI URL nodes are out of the children/element scope, you won't be able to access that value from the store. The idea here is to load that XML file using an AJAX request, grab the values you need then load the store.
Ext.define('PIU.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.tree-liststore',
data: {
name: 'AppName',
URL: 'about:blank'
},
stores: {
navItems: {
type: 'tree',
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: '> element'
}
}
}
}
});
Your google panel definition:
Ext.define('PIU.view.main.Google', {
extend: 'Ext.Panel',
xtype: 'google-panel', // xtypes should be always small letters
// the view should always require the viewModel, not the other way around
viewModel: 'tree-liststore',
title: 'Iframe',
closable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
width: 200,
bind: {
store: '{navItems}'
}
}, {
xtype: 'panel',
frame: true,
bind: {
html: '<iframe src="{URL}" width="100%" height="100%" ></iframe>',
},
bodyPadding: 20,
flex: 2
}],
listeners: {
beforerender: function (panel) {
var vm = panel.getViewModel(),
store = vm.get('navItems');
Ext.Ajax.request({
url: 'data1.xml', // your xml url here
success: function (response, opts) {
var node = response.responseXML.getElementsByTagName('URL')[0];
vm.set('URL', node.innerText || node.innerHTML);
// now that the URL has been set
// lets load the store
vm.get('navItems').loadRawData(response.responseXML);
}
});
}
}
});
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/24rv
这篇关于如何将URL中的URL从sencha EXTjs加载到Modal？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
