extjs - 通过单击 html 中的链接（按钮）打开一个新视图

Question

在 Sencha2 中工作...如何通过按 html 内的链接打开新视图？像这样的东西：

主.js

Ext.define('SkSe.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.dataview.List'
],
config: {
   tabBarPosition: 'bottom',

    items: [
        {
            xtype: 'home'
        },
        {
            xtype: 'placesContainer'
        },
        {
            xtype: 'favoriti'
        },
        {
            xtype: 'live'
        }
    ]
}});

主页.js

Ext.define('SkSe.view.Home', {
extend: 'Ext.Panel',
xtype: 'home',

config: {
    title: 'home',
    iconCls: 'home',
    layout: 'fit',
    styleHtmlContent: true,
    styleHtmlCls: 'homeView',

    html:[
        '<div class="cubePanel">Go to akcije.js</div>',
        '<div class="cubePanel">Go to live.js</div>',
        '<div class="scanPanel"></div>',
        '<div class="cubePanel">Go to favoriti.js</div>',
        '<div class="cubePanel">Go to map.js</div>'
    ].join("")

}});

Akcije.js

Ext.define('SkSe.view.Akcije', {
id: 'akcije',
extend: 'Ext.Panel',
xtype: 'akcije',

config:{

    title:'Akcije',
        iconCls:'maps',
        layout:'fit',
        items:[
        {
            xtype:'list',
            store:'Places',

            itemTpl:
                '<img src="resources/icons/{icon}"></img>' +
                    '<h1>{name:ellipsis(25)}</h1>' +
                    '<p>Besplatan desert.</p>' +
                    '<p># {stamps}</p>',

            itemCls:'place-entry'
        }

    ]
}});

基本上，我想要一个自定义主屏幕，当点击某个图标（当前显示转到 * *.js* 的位置）时，打开相应的视图。

Answer 1

假设你有一个Controller定义，你可以做这样的事情：

控制器：

Ext.define('SkSe.view.MyController', {
    extend: 'Ext.app.Controller',
    //...other stuff here...
    openMyView: function(jsFile) {
        Ext.Viewport.add({ xtype: 'akcije' });
    }
});

然后，像这样定义您的链接：

html: [
    '<div class="cubePanel"><a href="#" onclick="SkSe.app.getController(\'MyController\').openMyView(\'akcije.js\'); return false;">Go to akcije.js</a></div>',
    //...more here...
]