Set columnWidth : Form Layout « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Form Layout

Set columnWidth

 <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> <body> <script type="text/javascript"> Ext.onReady(function() { var radioGroup = { xtype: 'fieldset', title: 'Groups', autoHeight: true, items: [ { xtype: 'radiogroup', itemCls: 'x-check-group-alt', fieldLabel: 'Name', allowBlank: false, anchor: '95%', items: [{ columnWidth: '.25', items: [ {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'}, {boxLabel: 'Item 1', name: 'yourName', inputValue: 1}, {boxLabel: 'Item 2', name: 'yourName', inputValue: 2} ] }] } ] }; var fp = new Ext.FormPanel({ title: 'Title', frame: true, labelWidth: 110, width: 600, renderTo:Ext.getBody(), bodyStyle: 'padding:0 10px 0;', items: [ radioGroup ] }); }); </script> <div id='div1'>asdf</div> </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.Set control x/y position
8.Use form layout to layout the controls on a window
9.Layout field controls in a single column
10.Multi-Column form control layout
11.Set form column to 3
12.Set layout vertical to true
13.Set form layout column width
14.Add column header to column
15.Use autoHeight and autoWidth to dynamically size to fit it's data and columns.
close