By Alvin Alexander. Last updated: June 4, 2016
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.

