Question

我想将网址标记数据加载到我的模态商店，然后加载到我的google.js页面。我可以帮助我做什么最好的做法也做洙告诉我我做错了以下是我的代码：到目前为止，我尝试这个，但不知道我在做什么wroong因为我是extjs的新手

XML代码：

<?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>

模态代码：

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

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

Answer 1

由于您的URI URL节点不在子/元素范围内，因此您将无法从商店访问该值。这里的想法是使用AJAX请求加载该XML文件，获取所需的值然后加载商店。

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'
                }
            }
        }
    }
});

您的Google面板定义：

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

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/24rv

如何将XML中的URL加载到sencha EXTjs中的Modal中？

1 个答案: