单击html(按钮)中的链接打开一个新视图

时间:2013-06-26 12:34:02

标签: extjs sencha-touch-2 sencha-2

在Sencha2工作......如何通过按html内的链接打开新视图? 像这样:

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

Home.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'
        }

    ]
}});

Bassicaly,我希望有一个自定义主屏幕,当点击某个图标(当前显示转到* *。js *时),打开相应的视图。

1 个答案:

答案 0 :(得分:0)

假设您定义了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...
]