Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Sizing Fields with the Anchor Layout

Page of 168
A form with anchor layout inside of a window.

By default, Ext.form.Panel uses an anchor layout to size form fields. If the form is resized, all anchored items are automatically resized based on the rules defined by their anchor configuration property.

The following example sizes a textfield to 50% width of its container. The textarea is sized to 100% width of its container and 100% of its container's height, minus 30 pixels - effectively enabling the textarea to grow or shrink in height depending on the size of its parent window.

Ext.create('Ext.window.Window', {
 title: 'Simple Form',
 
 width: 350,
 height: 200,
    
 layout: 'fit',
 items: [
  {
   xtype: 'form',
   bodyPadding: 5,
   items: [
    {
     xtype: 'textfield',
     fieldLabel: 'Full Name',
     name: 'fullname',
     anchor: '50%'
    },
    {
     xtype: 'textarea',
     fieldLabel: 'Description',
     name: 'description',
     anchor: '100% -30'
    }  
   ],
   dockedItems:[
    {
     xtype: 'toolbar',
     dock: 'bottom',
     layout: {pack: 'center'},
     items: [
      { xtype: 'button', text: 'Submit'} 
     ]
    }
   ]
  }]
}).show();

Page of 168
comments powered by Disqus