Extjs-form实例2

xiaofen3115

<span style="font-size: small;">4。1自带验证功能表单：

Ext.form.Field.prototype.msgTarget = 'side';//验证错误时在旁边显示<span style="" />

    var bd = Ext.getBody();<span style="" />

     bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});<span style="" />

    var simple = new Ext.FormPanel({<span style="" />

        labelWidth: 75,     frame:true,        title: 'Simple Form',<span style="" />

        bodyStyle:'padding:5px 5px 0',        width: 350,<span style="" />

        defaults: {width: 230},        defaultType: 'textfield',<span style="" />

        items: [{<span style="" />

                fieldLabel: 'First Name',<span style="" />

                name: 'first',<span style="" />

                allowBlank:false<span style="" />

            },{<span style="" />

                fieldLabel: 'Last Name',<span style="" />

                name: 'last'<span style="" />

            },{<span style="" />

                fieldLabel: 'Company',<span style="" />

                name: 'company'<span style="" />

            }, {<span style="" />

                fieldLabel: 'Email',<span style="" />

                name: 'email',<span style="" />

                vtype:'email'       // email验证<span style="" />

            }, new Ext.form.TimeField({<span style="" />

                fieldLabel: 'Time',<span style="" />

                name: 'time',<span style="" />

                minValue: '8:00am',<span style="" />

                maxValue: '6:00pm'            //验证<span style="" />

            })<span style="" />

        ],<span style="" />

 

        buttons: [{<span style="" />

            text: 'Save'<span style="" />

        },{<span style="" />

            text: 'Cancel'<span style="" />

        }]<span style="" />

    });<span style="" />

 

simple.render(document.body);
 

4。2表单嵌套：xtype:'fieldset', <span style="" />

            checkboxToggle:true,//多选表单，默认为单选<span style="" />

            title: 'User Information',<span style="" />

            autoHeight:true,<span style="" />

            defaults: {width: 210},<span style="" />

            defaultType: 'textfield',<span style="" />

            collapsed: true,<span style="" />
 


4。3左右排列：  xtype:'tabpanel',
            activeTab: 0,
            defaults:{autoHeight:true, bodyStyle:'padding:10px'},
 

5。bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
    var top = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        items: [{
            layout:'column',
            items:[{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'First Name',
                    name: 'first',
                    anchor:'95%'
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Company',
                    name: 'company',
                    anchor:'95%'
                }]
            },{
                columnWidth:.5,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Last Name',
                    name: 'last',
                    anchor:'95%'
                },{
                    xtype:'textfield',
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email',
                    anchor:'95%'
                }]
            }]
        },{
            xtype:'htmleditor',
            id:'bio',
            fieldLabel:'Biography',
            height:200,
            anchor:'98%'
        }],
        buttons: [{
            text: 'Save'
        },{
            text: 'Cancel'
        }]
    });
    top.render(document.body);
 

6。var search = new Ext.form.ComboBox({<span style="" />

        store: ds,     //Store对象通过proxy和reader加载数据<span style="" />

        displayField:'title',<span style="" />

        typeAhead: false,<span style="" />

        loadingText: 'Searching...',//现在查询时显示文字及ajax图标<span style="" />

        width: 570,<span style="" />

        pageSize:10,                   //每页条数<span style="" />

        hideTrigger:true,             <span style="" />

        tpl: resultTpl,             //放置查询结果的<span style="" />