Extjs-form实例2

4。1自带验证功能表单：

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

    var bd = Ext.getBody();

     bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

    var simple = new Ext.FormPanel({

        labelWidth: 75,     frame:true,        title: 'Simple Form',

        bodyStyle:'padding:5px 5px 0',        width: 350,

        defaults: {width: 230},        defaultType: 'textfield',

        items: [{

                fieldLabel: 'First Name',

                name: 'first',

                allowBlank:false

            },{

                fieldLabel: 'Last Name',

                name: 'last'

            },{

                fieldLabel: 'Company',

                name: 'company'

            }, {

                fieldLabel: 'Email',

                name: 'email',

                vtype:'email'       // email验证

            }, new Ext.form.TimeField({

                fieldLabel: 'Time',

                name: 'time',

                minValue: '8:00am',

                maxValue: '6:00pm'            //验证

            })

        ],

 

        buttons: [{

            text: 'Save'

        },{

            text: 'Cancel'

        }]

    });

 

simple.render(document.body);

 

4。2表单嵌套：xtype:'fieldset',

            checkboxToggle:true,//多选表单，默认为单选

            title: 'User Information',

            autoHeight:true,

            defaults: {width: 210},

            defaultType: 'textfield',

            collapsed: true,

 

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({

        store: ds,     //Store对象通过proxy和reader加载数据

        displayField:'title',

        typeAhead: false,

        loadingText: 'Searching...',//现在查询时显示文字及ajax图标

        width: 570,

        pageSize:10,                   //每页条数

        hideTrigger:true,            

        tpl: resultTpl,             //放置查询结果的