Sencha Touch 2 - Creating a list with static views

Question

I've followed the documentation provided by Sencha and made myself a list of items, converted it to a navigationview and a following details page. This is a many-to-1 solution and described with the picture below:

many-to-1 solution

With this solution I can send the title of the item in the list into the detailsview, and type something like this: [code]` Ext.define('navigation.view.PresidentDetails', { extend: 'Ext.Panel', xtype: 'presidentdetail',

config: {
    styleHtmlContent: true, 
    scrollabe: 'vertical',
    title: 'Details',
    tpl: 'Hello {firstName}!'
}

}); `[/code]

It seems I cant use statements in this code so I can specify what content I want depending on what item I clicked on. So then my question is - how do I create a more static perspective into this? Can I create a 1-to-1 relationship instead? (See image below)

1-to-1 solution

Anyone knows how to achieve this? I'm currently using MVC and this is the current state of "my" (read: Senchas) controller just to get a hang of it:

Ext.define('navigation.controller.Main', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        main: 'mainpanel'
    },
    control: {
        'presidentlist': {
            disclose: 'showDetails'
        }
    }
},

showDetails: function(list, record) {
    this.getMain().push({
        xtype: 'presidentdetail',
        data: record.data
    });
}

});

Thomas Thomas · Accepted Answer · 2013-03-21T13:28:20

This problem is now solved, and it was alot easier than I thought it would be. I looked up the itemTap event in the docs and used the index of the item as an ID and wrote this little snippet.

showDetailsonItemTap: function(list, index, target, record) {
    var page;
    switch(index) {
        case 0:
            page = 'presidentdetail';
            break;
        case 1: 
            page = 'presidentdetail2';
            break;
    }
    this.getMain().push({
                xtype: page,
                data: record.data
        });
    console.log(index);
}

After that, its just creating views manually and hit their xtype within the switchstatement.

Sencha Touch 2 - Creating a list with static views

1 Answers