src/examples/forms_toolbar/app.js

   1 //<debug>
   2 Ext.Loader.setPath({
   3     'Ext': '../../src'
   4 });
   5 //</debug>
   6
   7 /**
   8  * This is a simple demonstration of using form fields inside toolbar components.
   9  */
  10
  11 // Define our application
  12 Ext.application({
  13     // Setup your icon and startup screens
  14     startupImage: {
  15         '320x460': 'resources/startup/Default.jpg', // Non-retina iPhone, iPod touch, and all Android devices
  16         '640x920': 'resources/startup/640x920.png', // Retina iPhone and iPod touch
  17         '640x1096': 'resources/startup/640x1096.png', // iPhone 5 and iPod touch (fifth generation)
  18         '768x1004': 'resources/startup/768x1004.png', //  Non-retina iPad (first and second generation) in portrait orientation
  19         '748x1024': 'resources/startup/748x1024.png', //  Non-retina iPad (first and second generation) in landscape orientation
  20         '1536x2008': 'resources/startup/1536x2008.png', // : Retina iPad (third generation) in portrait orientation
  21         '1496x2048': 'resources/startup/1496x2048.png' // : Retina iPad (third generation) in landscape orientation
  22     },
  23
  24     isIconPrecomposed: false,
  25     icon: {
  26         57: 'resources/icons/icon.png',
  27         72: 'resources/icons/icon@72.png',
  28         114: 'resources/icons/icon@2x.png',
  29         144: 'resources/icons/icon@144.png'
  30     },
  31
  32     // Require any components we will use in our example
  33     requires: [
  34         'Ext.field.Text',
  35         'Ext.field.Search',
  36         'Ext.field.Select',
  37         'Ext.Toolbar',
  38         'Ext.Button'
  39     ],
  40
  41     /**
  42      * The launch method is called when the browser is ready, and the application can launch.
  43      *
  44      * In this method we will create 3 fields: text, search and select. Will will insert each of these
  45      * fields into a toolbar and display them in the Viewport.
  46      */
  47     launch: function() {
  48         var textField, searchField, selectField;
  49
  50         // Create a text field with a name and palceholder
  51         textField = Ext.create('Ext.field.Text', {
  52             name: 'name',
  53             placeHolder: 'Text'
  54         });
  55
  56         // Create a search field with a name and a placeholder
  57         searchField = Ext.create('Ext.field.Search', {
  58             name: 'search',
  59             placeHolder: 'Search'
  60         });
  61
  62         // Create a select field with a name and some options
  63         selectField = Ext.create('Ext.field.Select', {
  64             name: 'options',
  65             options: [
  66                 { text: 'Option 1 should be very very very long',  value: '1' },
  67                 { text: 'Option 2', value: '2' }
  68             ]
  69         });
  70
  71         // Add a new item into the Viewport. This item will container our toolbars.
  72         Ext.Viewport.add({
  73             // Some html to explain the demo, and style the HTML
  74             html: 'This is a simple example of fields within toolbars.',
  75             styleHtmlContent: true,
  76
  77             // Give this container details for each of the items added. This means we don't have to
  78             // set the xtype for each item.
  79             defaults: {
  80                 xtype: 'toolbar'
  81             },
  82
  83             // Add threee toolbars, each containing a field and a spacer at each side so the field is
  84             // centered
  85             items: [
  86                 {
  87                     // Dock the first toolbar at the top
  88                     docked: 'top',
  89                     items: [
  90                         { xtype: 'spacer' },
  91                         textField,
  92                         { xtype: 'spacer' }
  93                     ]
  94                 },
  95                 {
  96                     // Dock the second toolbar at the top
  97                     docked: 'top',
  98                     ui: 'light',
  99                     items: [
 100                         { xtype: 'spacer' },
 101                         searchField,
 102                         { xtype: 'spacer' }
 103                     ]
 104                 },
 105                 {
 106                     // Dock the bottom toolbar at the top
 107                     docked: 'bottom',
 108                     ui: 'light',
 109                     items: [
 110                         { xtype: 'spacer' },
 111                         selectField,
 112                         { xtype: 'spacer' }
 113                     ]
 114                 }
 115             ]
 116         });
 117     }
 118 });
 119