examples/form/anchoring.js

   1 Ext.require([
   2     'Ext.form.*',
   3     'Ext.window.Window'
   4 ]);
   5
   6 Ext.onReady(function() {
   7     var form = Ext.create('Ext.form.Panel', {
   8         border: false,
   9         fieldDefaults: {
  10             labelWidth: 55
  11         },
  12         url: 'save-form.php',
  13         defaultType: 'textfield',
  14         bodyPadding: 5,
  15
  16         items: [{
  17             fieldLabel: 'Send To',
  18             name: 'to',
  19             anchor:'100%'  // anchor width by percentage
  20         },{
  21             fieldLabel: 'Subject',
  22             name: 'subject',
  23             anchor: '100%'  // anchor width by percentage
  24         }, {
  25             xtype: 'textarea',
  26             hideLabel: true,
  27             name: 'msg',
  28             anchor: '100% -47'  // anchor width by percentage and height by raw adjustment
  29         }]
  30     });
  31
  32     var win = Ext.create('Ext.window.Window', {
  33         title: 'Resize Me',
  34         width: 500,
  35         height:300,
  36         minWidth: 300,
  37         minHeight: 200,
  38         layout: 'fit',
  39         plain: true,
  40         items: form,
  41
  42         buttons: [{
  43             text: 'Send'
  44         },{
  45             text: 'Cancel'
  46         }]
  47     });
  48
  49     win.show();
  50 });