关于设定输入域标签样式问题：

     这里有两个属性可用1.  labelCls 用来指定一个样式class，2.labelStyle 直接写css样式

              {
                          xtype: 'textfield',
                    labelCls: 'fieldLabelFont',
                          fieldLabel: '公司名称',
                          name: 'userName',
                          allowBlank: false
                      }

 按钮上面的图片写法为：


                      {
                          xtype: 'button',
                          text: '查询',
                          iconCls:'searchBtn'
                      }

 给pannel 内容区域上色 bodyStyle: 'background:#ffc; padding:10px;'bodyStyle: { background: '#d6e3f3', padding: '10px'}

循环获取表单中所有数据

handler: function() {
                    var form = this.up('form').getForm(),
                        s = '';
                    if (form.isValid()) {
                        Ext.iterate(form.getValues(), function(key, value) {
                            s += Ext.util.Format.format("{0} = {1}<br />", key, value);
                        }, this);

                        Ext.Msg.alert('Form Values', s);
                    }
 }

 

重置表单

handler: function() {
                    this.up('form').getForm().reset();
}

 

 

通过表单容器来拼接显示内容

{
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Phone',
                        combineErrors: true,
                        msgTarget: 'under',
                        defaults: {
                            hideLabel: true
                        },
                        items: [
                            {xtype: 'displayfield', value: '('},
                            {xtype: 'textfield',    fieldLabel: 'Phone 1', name: 'phone-1', width: 29, allowBlank: false},
                            {xtype: 'displayfield', value: ')'},
                            {xtype: 'textfield',    fieldLabel: 'Phone 2', name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},
                            {xtype: 'displayfield', value: '-'},
                            {xtype: 'textfield',    fieldLabel: 'Phone 3', name: 'phone-3', width: 48, allowBlank: false}
                        ]
}

 文本输入框

{
                        name: 'firstName',
                        fieldLabel: 'First Name',
                        flex: 2,
                        emptyText: 'First',//用户什么都不输入的时候显示什么
                        allowBlank: false
}

文本框带有正则表达式校验的

{
                        fieldLabel: 'Phone Number',
                        labelWidth: 100,
                        name: 'phone',
                        width: 190,
                        emptyText: 'xxx-xxx-xxxx',
                        maskRe: /[\d\-]/,
                        regex: /^\d{3}-\d{3}-\d{4}$/,
                        regexText: 'Must be in the format xxx-xxx-xxxx'
}

 

显示日期框

{
                        xtype     : 'datefield',
                        name      : 'endDate',
                        fieldLabel: 'End',
                        allowBlank: false
}

 

显示邮件输入框  注意这里是 vtype 而不是xtype    

{
                xtype     : 'textfield',
                name      : 'email',
                fieldLabel: 'Email Address',
                vtype: 'email',
                msgTarget: 'side',
                allowBlank: false
 }

 

 

自己写一个页面静态下拉框

{
                                //the width of this field in the HBox layout is set directly
                                //the other 2 items are given flex: 1, so will share the rest of the space
                                width:          50,

                                xtype:          'combo',
                                mode:           'local',
                                value:          'mrs',
                                triggerAction:  'all',
                                forceSelection: true,
                                editable:       false,
                                fieldLabel:     '