Set control x/y position : Form Layout « Ext JS « JavaScript DHTML






Set control x/y position

 <!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function() { var form = new Ext.form.FormPanel({ baseCls: 'x-plain', layout:'absolute', url:'save-form.php', defaultType: 'textfield', items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 60, y: 0, name: 'to', anchor:'100%'// anchor width by percentage  },{ x: 0, y: 35, xtype:'label', text: 'Subject:' },{ x: 60, y: 30, name: 'subject', anchor: '100%'// anchor width by percentage  },{ x:0, y: 60, xtype: 'textarea', name: 'msg', anchor: '100% 100%'// anchor width and height  }] }); var window = new Ext.Window({ title: 'Resize Me', width: 500, height:300, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, bodyStyle:'padding:5px;', buttonAlign:'center', items: form, buttons: [{ text: 'Send' },{ text: 'Cancel' }] }); window.show(); }); </script> </body> </html> 








Related examples in the same category

1.Align two forms
2.Layout form, form set and tab panel in a window
3.Layout fieldset Container as hbox
4.Layout fieldset Container as vbox
5.Layout two fiels in one row
6.Wrap two forms into a field set container
7.Use form layout to layout the controls on a window
8.Layout field controls in a single column
9.Multi-Column form control layout
10.Set form column to 3
11.Set layout vertical to true
12.Set form layout column width
13.Add column header to column
14.Set columnWidth
15.Use autoHeight and autoWidth to dynamically size to fit it's data and columns.
close