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.

Share it!

There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.

Add new comment

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

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.