且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何将URL中的URL从sencha EXTjs加载到Modal?

更新时间:2023-01-21 20:37:32

因为你的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.***.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