0

Working in Sencha2... How can I open a new View by pressing a link inside html? Something like this:

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, I want to have a custom home screen, and when tapped on some icon (where Go to **.js* is shown currently), to open a corresponding View.

Mladen
  • 1
  • 1

1 Answers1

0

Assuming you have a Controller defined, you could do something like this:

Controller: 

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

Then, define your links like this:

html: [
    '<div class="cubePanel"><a href="#" onclick="SkSe.app.getController(\'MyController\').openMyView(\'akcije.js\'); return false;">Go to akcije.js</a></div>',
    //...more here...
]
kevhender
  • 4,285
  • 1
  • 13
  • 16
  • I have a controller defined as 'Main', so I changed MyController to Main. When I test it, Console is saying that there is possible typo error? "Uncaught Error: The following classes are not declared even if their files have been loaded: 'SkSe.controller.Main'. Please check the source code of their corresponding files for possible typos: 'app/controller/Main.js " – Mladen Jun 26 '13 at 13:35
  • That is difficult to diagnose without seeing your app, but you probably do have a typo somewhere, or maybe you have a file in the wrong folder or do not yet have your controller loaded in your app. Regardless, the `onclick` of the link just needs to call any sort of static method the same way shown in the answer to get the functionality you are looking for. – kevhender Jun 26 '13 at 14:11