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.