jsbuilder/src/generators/app/templates/Viewport.js

   1 /**
   2  * @class {name}.Viewport
   3  * @extends Ext.Panel
   4  * This is a default generated class which would usually be used to initialize your application's
   5  * main viewport. By default this is simply a welcome screen that tells you that the app was
   6  * generated correctly.
   7  */
   8 {name}.Viewport = Ext.extend(Ext.Panel, {
   9     id        : 'viewport',
  10     layout    : 'card',
  11     fullscreen: true,
  12
  13     initComponent: function() {
  14         var store = new Ext.data.Store({
  15             fields: ['text', 'href'],
  16             data  : [
  17                 {
  18                     text: 'Touch API',
  19                     href: 'http://dev.sencha.com/deploy/touch/docs/'
  20                 },
  21                 {
  22                     text: 'Touch Examples',
  23                     href: 'http://dev.sencha.com/deploy/touch/examples/'
  24                 }
  25             ]
  26         });
  27
  28         Ext.apply(this, {
  29             dockedItems: [
  30                 {
  31                     dock : 'left',
  32                     xtype: 'list',
  33                     store: store,
  34                     width: 250,
  35
  36                     tpl         : '<{tpl} for="."><div class="link"><strong>\{text\}</strong></div></{tpl}>',
  37                     itemSelector: 'div.link',
  38
  39                     listeners: {
  40                         itemtap: this.onListItemTap
  41                     },
  42
  43                     dockedItems: [
  44                         {
  45                             xtype: 'toolbar',
  46                             dock : 'top',
  47                             ui   : 'light'
  48                         }
  49                     ]
  50                 }
  51             ],
  52
  53             items: [
  54                 {
  55                     xtype : 'panel',
  56                     layout: 'fit',
  57
  58                     dockedItems: [
  59                         {
  60                             dock : 'top',
  61                             xtype: 'toolbar',
  62                             title: 'Welcome to Sencha Touch'
  63                         }
  64                     ],
  65
  66                     items: [
  67                         {
  68                             xtype: 'panel',
  69                             style: 'background:#fff',
  70
  71                             styleHtmlContent: true,
  72
  73                             html : [
  74                                 '<h3>Getting Started</h3>',
  75                                 '<p>You have successfully generated the {name} application. Currently this app is a blank slate, ',
  76                                 'with just the minimum set of files and directories. The file creating this interface can be found ',
  77                                 'in app/views/Viewport.js</p>'
  78                             ]
  79                         }
  80                     ]
  81                 }
  82             ]
  83         });
  84
  85         {name}.Viewport.superclass.initComponent.apply(this, arguments);
  86     },
  87
  88     onListItemTap: function(list, index, node, e) {
  89         var record = list.getRecord(node);
  90
  91         window.open(record.get('href'));
  92     }
  93 });