extjs4 常用总结

              关于设定输入域标签样式问题：     这里有两个属性可用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:     'Title',                                name:           'title',                                displayField:   'name',                                valueField:     'value',                                queryMode: 'local',                                listeners: {change: onMailingAddrFieldChange},//可以用来创建一个监听事件                                store:          Ext.create('Ext.data.Store', {                                    fields : ['name', 'value'],                                    data   : [                                        {name : 'Mr',   value: 'mr'},                                        {name : 'Mrs',  value: 'mrs'},                                        {name : 'Miss', value: 'miss'}                                    ]                                })} 用框将一定的输入域框起来 {                xtype: 'fieldset',                title: 'Details',                collapsible: true,//这里可以通过点击按钮进行折叠    还有一个checkbox来控制的                defaults: {                    labelWidth: 89,                    anchor: '100%',                    layout: {                        type: 'hbox',                        defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}                    }                },                items: [......................... } 格式化字符串    // pluggable renders    function renderTopic(value, p, record) {        return Ext.String.format(            '<b><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',            value,            record.data.forumtitle,            record.getId(),            record.data.forumid        );    }