examples/form/vbox-form.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4 Ext.require([
   5     'Ext.form.*',
   6     'Ext.window.Window',
   7     'Ext.data.*',
   8     'Ext.ux.FieldReplicator'
   9 ]);
  10
  11
  12 Ext.onReady(function() {
  13     var form = Ext.create('Ext.form.Panel', {
  14         plain: true,
  15         border: 0,
  16         bodyPadding: 5,
  17         url: 'save-form.php',
  18
  19         fieldDefaults: {
  20             labelWidth: 55,
  21             anchor: '100%'
  22         },
  23
  24         layout: {
  25             type: 'vbox',
  26             align: 'stretch'  // Child items are stretched to full width
  27         },
  28
  29         items: [{
  30             xtype: 'combo',
  31             store: Ext.create('Ext.data.ArrayStore', {
  32                 fields: [ 'email' ],
  33                 data: [
  34                     ['test@example.com'],
  35                     ['someone@example.com'],
  36                     ['someone-else@example.com']
  37                 ]
  38             }),
  39             displayField: 'email',
  40             plugins: [ Ext.ux.FieldReplicator ],
  41             fieldLabel: 'Send To',
  42             queryMode: 'local',
  43             selectOnTab: false,
  44             name: 'to'
  45         }, {
  46             xtype: 'textfield',
  47             fieldLabel: 'Subject',
  48             name: 'subject'
  49         }, {
  50             xtype: 'textarea',
  51             fieldLabel: 'Message text',
  52             hideLabel: true,
  53             name: 'msg',
  54             style: 'margin:0', // Remove default margin
  55             flex: 1  // Take up all *remaining* vertical space
  56         }]
  57     });
  58
  59     var win = Ext.create('Ext.window.Window', {
  60         title: 'Compose message',
  61         collapsible: true,
  62         animCollapse: true,
  63         maximizable: true,
  64         width: 750,
  65         height: 500,
  66         minWidth: 300,
  67         minHeight: 200,
  68         layout: 'fit',
  69         items: form,
  70         dockedItems: [{
  71             xtype: 'toolbar',
  72             dock: 'bottom',
  73             ui: 'footer',
  74             layout: {
  75                 pack: 'center'
  76             },
  77             items: [{
  78                 minWidth: 80,
  79                 text: 'Send'
  80             },{
  81                 minWidth: 80,
  82                 text: 'Cancel'
  83             }]
  84         }]
  85     });
  86     win.show();
  87 });