How to load URL from XML into Modal in sencha EXTjs?

问题

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
        }],
    })]
});

回答1:

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

来源：https://stackoverflow.com/questions/45542658/how-to-load-url-from-xml-into-modal-in-sencha-extjs