Mega Code Archive

 
Categories / JavaScript DHTML / Ext JS
 

Layout field controls in a single column

<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',                 fieldLabel: 'Single Column',                 itemCls: 'x-check-group-alt',                 columns: 1,                 items: [                     {boxLabel: 'Item 1', name: 'yourName', inputValue: 1},                     {boxLabel: 'Item 2', name: 'yourName', inputValue: 2, checked: true},                     {boxLabel: 'Item 3', name: 'yourName', inputValue: 3}                 ]             }         ]     };     var fp = new Ext.FormPanel({         title: 'Title',         frame: true,         labelWidth: 110,         width: 600,         renderTo:Ext.getBody(),         bodyStyle: 'padding:0 10px 0;',         items: [            radioGroup         ],         buttons: [{             text: 'Save',             handler: function(){                if(fp.getForm().isValid()){                     Ext.Msg.alert('asdf');                 }             }         },{             text: 'Reset',             handler: function(){                 fp.getForm().reset();             }         }]     }); }); </script>  <div id='div1'>asdf</div> </body> </html>