Ext3.2 布局——一个完整的form 表单

来源：互联网发布：opencv 对焦算法编辑：程序博客网时间：2024/04/28 04:43

form表单是经常要用到的。这里只是介绍一下布局，数据的读取与交换以后会做介绍。

/*! * Ext JS Library 3.2.1 * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */Ext.onReady(function() {    Ext.QuickTips.init();        var form = new Ext.form.FormPanel({        renderTo: 'docbody',        title   : 'Composite Fields',        autoHeight: true,        width   : 600,                bodyStyle: 'padding: 5px',        defaults: {            anchor: '0'        },        items   : [            {                xtype     : 'textfield',                name      : 'email',                fieldLabel: 'Email Address',                anchor    : '-20'            },            {                xtype: 'compositefield',                fieldLabel: 'Date Range',                msgTarget : 'side',                anchor    : '-20',                defaults: {                    flex: 1                },                items: [                    {                        xtype     : 'datefield',                        name      : 'startDate',                        fieldLabel: 'Start'                    },                    {                        xtype     : 'datefield',                        name      : 'endDate',                        fieldLabel: 'End'                    }                ]            },            {                xtype: 'fieldset',                title: 'Details',                collapsible: true,                items: [                    {                        xtype: 'compositefield',                        fieldLabel: 'Phone',                        // anchor    : '-20',                        // anchor    : null,                        msgTarget: 'under',                        items: [                            {xtype: 'displayfield', value: '('},                            {xtype: 'textfield',    name: 'phone-1', width: 29, allowBlank: false},                            {xtype: 'displayfield', value: ')'},                            {xtype: 'textfield',    name: 'phone-2', width: 29, allowBlank: false, margins: '0 5 0 0'},                            {xtype: 'textfield',    name: 'phone-3', width: 48, allowBlank: false}                        ]                    },                    {                        xtype: 'compositefield',                        fieldLabel: 'Time worked',                        combineErrors: false,                        items: [                           {                               name : 'hours',                               xtype: 'numberfield',                               width: 48,                               allowBlank: false                           },                           {                               xtype: 'displayfield',                               value: 'hours'                           },                           {                               name : 'minutes',                               xtype: 'numberfield',                               width: 48,                               allowBlank: false                           },                           {                               xtype: 'displayfield',                               value: 'mins'                           }                        ]                    },                    {                        xtype : 'compositefield',                        anchor: '-20',                        msgTarget: 'side',                        fieldLabel: 'Full Name',                        items : [                            {                                //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',                                hiddenName:     'title',                                displayField:   'name',                                valueField:     'value',                                store:          new Ext.data.JsonStore({                                    fields : ['name', 'value'],                                    data   : [                                        {name : 'Mr',   value: 'mr'},                                        {name : 'Mrs',  value: 'mrs'},                                        {name : 'Miss', value: 'miss'}                                    ]                                })                            },                            {                                xtype: 'textfield',                                flex : 1,                                name : 'firstName',                                fieldLabel: 'First',                                allowBlank: false                            },                            {                                xtype: 'textfield',                                flex : 1,                                name : 'lastName',                                fieldLabel: 'Last',                                allowBlank: false                            }                        ]                    }                ]            }        ],        buttons: [            {                text   : 'Load test data',                handler: function() {                    var Record = Ext.data.Record.create([                       {name: 'email',     type: 'string'},                       {name: 'title',     type: 'string'},                       {name: 'firstName', type: 'string'},                       {name: 'lastName',  type: 'string'},                       {name: 'phone-1',   type: 'string'},                       {name: 'phone-2',   type: 'string'},                       {name: 'phone-3',   type: 'string'},                       {name: 'hours',     type: 'number'},                       {name: 'minutes',   type: 'number'},                       {name: 'startDate', type: 'date'},                       {name: 'endDate',   type: 'date'}                    ]);                                        form.form.loadRecord(new Record({                        'email'    : 'ed@extjs.com',                        'title'    : 'mr',                        'firstName': 'Abraham',                        'lastName' : 'Elias',                        'startDate': '01/10/2003',                        'endDate'  : '12/11/2009',                        'phone-1'  : '555',                        'phone-2'  : '123',                        'phone-3'  : '4567',                        'hours'    : 7,                        'minutes'  : 15                    }));                }            },            {                text   : 'Save',                handler: function() {                    if (form.form.isValid()) {                        var s = '';                                            Ext.iterate(form.form.getValues(), function(key, value) {                            s += String.format("{0} = {1}<br />", key, value);                        }, this);                                            Ext.example.msg('Form Values', s);                                            }                }            },                        {                text   : 'Reset',                handler: function() {                    form.form.reset();                }            }        ]    });});

上述代码是Ext官方的example。文件名为composite-field.js。这个例子足可以满足大部分的需要。我曾经google过很多人的代码，但是都没有这个完整。这个效果如下：

composite-field

打上了水印。哎，不是很喜欢这个东西。如图所示，如何在同一个水平线上添加多个组件，如Full Name所示。这个问题曾经困扰我，对Ext了解实在有限。但是看到这个例子，就恍然大悟了。

class Ext.form.CompositeField，复合表单项，允许将多个表单项渲染到同一行中。在内部使用hbox布局渲染表单项，所以所有普通的HBox布局配置选项都可用。如下代码所示：

{    xtype: 'compositefield',    labelWidth: 120    items: [        {            xtype     : 'textfield',            fieldLabel: 'Title',            width     : 20        },        {            xtype     : 'textfield',            fieldLabel: 'First',            flex      : 1        },        {            xtype     : 'textfield',            fieldLabel: 'Last',            flex      : 1        }    ]}

但是上述代码有一个令人疑惑的地方。就是各个组件的fieldlabel，Title，First，Last。他们不是分别在三个输入框前，而是会挤在一起，形成一个fieldlabel，中间默认以“,”隔开。其效果如同给compositefield自己设置一个fieldlable一样。如图所示：

以上的form表单还用到另外一个组件——fieldset。标准容器，用来对form 中的项目进行分组，是非常有用的一个组件。

此外，有一个配置项需要注意——anchor。这个属性将会在anchor layout中详细的介绍。大体意思上就是说这个组件相对于父容器的大小。

0 0