Advanced Search

Sencha Touch: List that opens into panels

/ Published in: JavaScript
Save to your folder(s)
Lists need to be wrapped in Panels

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Ext.setup({
  2.     onReady: function(){
  3.  
  4.         Ext.regModel('Contact', {
  5.             fields: ['firstName', 'lastName']
  6.         });
  7.  
  8.         var main = new Ext.Panel({
  9.             fullscreen: true,
  10.             layout: 'card',
  11.             items: [{
  12.                 xtype: 'list',
  13.                 tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
  14.                 itemSelector: 'div.contact',
  15.                 store: new Ext.data.Store({
  16.                     model: 'Contact',
  17.                     data: [{
  18.                         firstName: 'Tommy',
  19.                         lastName: 'Maintz'
  20.                     }, {
  21.                         firstName: 'Ed',
  22.                         lastName: 'Spencer'
  23.                     }, {
  24.                         firstName: 'Jamie',
  25.                         lastName: 'Avins'
  26.                     }]
  27.                 }),
  28.                 listeners: {
  29.                     itemtap: function(list, index){
  30.                         var rec = list.store.getAt(index),
  31.                             id = rec.get('firstName') + '-card',
  32.                             c = main.getComponent(id);
  33.  
  34.                         if(!c){
  35.                             c = main.add({
  36.                                 itemId: id,
  37.                                 html: rec.get('lastName'),
  38.                                 dockedItems: [{
  39.                                     xtype: 'toolbar',
  40.                                     dock: 'top',
  41.                                     items: [{
  42.                                         text: 'Back',
  43.                                         ui: 'back',
  44.                                         handler: function(){
  45.                                             main.setCard(0);
  46.                                         }
  47.                                     }]
  48.                                 }]
  49.                             });
  50.                             main.add(c);
  51.                         }
  52.                         main.setCard(c, 'slide');
  53.                     }
  54.                 }
  55.             }]
  56.         });
  57.     }
  58. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.