ext表单

/*
 * Advanced Form
 * @author xi
 * @created on Oct 28th 2008 04:10 PM
 * @updated on Oct 29th 2008 08:48 AM
 */

Ext.onReady(function(){

    Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var bd = Ext.getBody();



    /*
     * ================  Form 5  =======================
     */
    bd.createChild({tag: 'h2', html: 'USer Information'});

    var tab2 = new Ext.FormPanel({
        labelAlign: 'top',
        title: 'Basic Information',
        bodyStyle:'padding:5px',
        width: 600,
        items: [{
            id:'obj1',
            layout:'column',
            border:false,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'commany',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            id:'objtab',
            xtype:'tabpanel',
            plain:true,
            activeTab: 0,
            height:235,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                id:'obj2',
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'commany',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                id:'obj3',
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '[phone]'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                id:'obj4',
                cls:'x-plain',
                title:'Biography',
                name:'biography',
                layout:'fit',
                items: {
                    xtype:'htmleditor',
                    id:'bio2',
                    fieldLabel:'Biography'
                }
            }]
        }],

        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });

    tab2.render(document.body);
});

 

 

 

/*
 * Advanced Form
 * @author xi
 * @created on Oct 28th 2008 04:10 PM
 * @updated on Oct 29th 2008 08:48 AM
 */

Ext.onReady(function() {
            //HtmlEditor需要这个
            Ext.QuickTips.init();
            //设置提示位置
            Ext.form.Field.prototype.msgTarget = 'side';
            //form定义
            var exampleForm = new Ext.form.FormPanel({
                labelAlign: 'right',
                labelWidth: 50,
                width: 600,
                title:'Form Example',
                frame: true,
                //----------------form内容定义-------------
                items:[{
                      layout:'column',
                      items:[{
                             //这里是0.7表单的内容
                             columnWidth:.7,
                             xtype:'fieldset',
                             checkboxToggle:true,
                             title:'单纯输入',
                             autoHeight:true,
                             defaults:{
                                   width: 300
                             },
                             defaultType:'textfield',
                             items:[{
                                      fieldLabel:'文本',
                                      name:'text',
                                      allowBlank:false
                             },{
                                      xtype:'numberfield',
                                      fieldLabel:'数字',
                                      name:'number'
                             },{
                                      xtype:'combo',
                                      fieldLabel:'选择',
                                      name:'combo',
                                      store:new Ext.data.SimpleStore({
                                                   fields:['value','text'],
                                                   data:[['1','1'],['2','2']]
                                                   }),
                                      displayField:'text',
                                      valueField:'value',
                                      mode:'local',
                                      emptyText:'请选择'
                             },{
                                      xtype:'datefield',
                                      fieldLabel:'日期',
                                      name:'date'
                             },{
                                      xtype:'timefield',
                                      fieldLabel:'时间',
                                      name:'time'
                             },{
                                      xtype:'textarea',
                                      fieldLabel:'多行',
                                      name:'textarea'
                             }]
                      },{
                             //这里是0.3表单的内容
                             columnWidth:.3,
                             layout:'form',
                             items:[{
                                     xtype:'fieldset',
                                     checkboxToggle:true,
                                     title:'多选项',
                                     autoHeight:true,
                                     defaultType:'checkbox',
                                     hideLabels: true,
                                     style : 'margin-left:10px;',
                                bodyStyle : 'margin-left:20px;',
                                items:[{
                                      boxLabel:'首先要穿暖',
                                      name:'check',
                                      value:'1',
                                      checked:true,
                                      width:'auto'
                                },{
                                      boxLabel:'然后要吃饱',
                                      name:'check',
                                      value:'2',
                                      checked: true,
                                      width:'auto'
                                },{
                                      boxLabel:'然后要有房子',
                                      name:'check',
                                      value:'3',
                                      width:'auto'
                                },{
                                      boxLabel:'然后要有车',
                                      name:'check',
                                      value:'4',
                                      width:'auto'
                                }]
                             },{
                                     xtype:'fieldset',
                                     checkboxToggle:true,
                                     title:'单选',
                                     autoHeight:true,
                                     defaultType:'radio',
                                     hideLabels: true,
                                     style : 'margin-left:10px;',
                                bodyStyle : 'margin-left:20px;',
                                items:[{
                                    boxLabel:'自由',
                                    name:'rad',
                                    value:'1',
                                    checked:'true',
                                    width:'auto'
                                },{
                                    boxLabel:'爱情',
                                    name:'rad',
                                    value:'1',
                                    width:'auto'
                                }]
                             }]
                      }]
                }],
                //----------------------------------------
                //-----------------button定义--------------
                buttons:[{text:'保存'},{text:'取消'}]
                //----------------------------------------
            });
            exampleForm.render("form");
        });