A Sencha Touch 2 container/list with static data

There are probably simpler ways to do this, but for the moment, here’s a Sencha Touch 2 panel with a static list of data:

Ext.define('MiniMe.view.TwitterPanel', {

    extend: 'Ext.Container',
    alias: 'view.TwitterPanel',
 
    config: {
        title: 'Twitter',
        itemId: 'mainlist',
        iconCls: 'maps',
        layout: {
            type: 'card'
        },
        scrollable: 'vertical',

        items: [
            {
                xtype: 'list',
                store: {
                    fields: ['name'],
                    data: [
                        { name: 'List :: ak peeps' },
                        { name: 'List :: peeps' },
                        { name: 'List :: programmers' },
                        { name: 'List :: scala peeps' },
                        { name: 'Query :: #zen' },
                        { name: 'Query :: Chicago Cubs' },
                        { name: 'Trend :: Colorado' },
                        { name: 'Trend :: U.S.' },
                        { name: 'Trend :: Worldwide' },
                    ]
                },
                itemTpl: '{name}',
                striped: true,
                itemId: 'twittermenuitems',
                layout: {
                    //type: 'fit'
                    type: 'card'
                },
                listeners: {
                    select: function(view, record) {
                        Ext.Msg.alert('Selected!', 'You selected ' + record.get('name'));
                    }
                },
            }
        ],
        // old approach:
        // listeners: [
        //     {
        //         fn: 'onItemSelect',
        //         event: 'select',
        //         delegate: '#twittermenuitems'   // where the data comes from?
        //     }
        // ]
    },

    // TODO this is where i need to start to make a call to the server
    //      and display the resulting data.
    onItemSelect: function(dataview, record, options) {
        console.log("ENTERED onItemSelect");
        // var data = record;
        // this.fireEvent('EditNoteCommand', this, data);
    }

});

I know that Ext.Container can/should be Ext.List, and that may help me simplify everything, but I just wanted to note for the moment that this is working. It’s also important to note that it doesn’t rely on a Sencha Model or Store.

As you can probably tell from that code, I am copying and pasting like a madman trying to get things working. I’m trying to simplify the code to get it looking more like these Sencha Touch 2 static data List examples.

Post new comment

The content of this field is kept private and will not be shown publicly.