ExtJS 4常用组件之表单
By Alex
/ in JavaScript
简介
表单面板（FormPanel）类是HTML表单的容器，ExtJS 4中的表单面板由Fields、 FieldContainer、FieldSet、Label、Action等组件构成。
表单字段（控件）
ExtJS 4引入了Ext.form.field包，所有字段类均存放在该包中。通过下面的代码可以为表单声明若干字段：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
Ext.create( 'Ext.form.Panel', { frame : true, title : 'Form Fields', width : 340, bodyPadding : 5, //应用到所有字段的默认项 fieldDefaults : { labelAlign : 'left', //字段的标签的位置 labelWidth : 90, //字段标签的宽度 anchor : '100%' //占据全部可用宽度 }, items : [ { //隐藏字段，不显示给用户，但是会提交，通常用来存放ID xtype : 'hiddenfield', name : 'hiddenfield1', value : 'Hidden field value' }, { //显示字段，只读信息 xtype : 'displayfield', name : 'displayfield1', fieldLabel : 'Display field', value : 'Display field' }, { //单行输入框 xtype : 'textfield', name : 'textfield1', fieldLabel : 'Text field', value : 'Text field value' }, { //密码输入框 xtype : 'textfield', name : 'password1', inputType : 'password', fieldLabel : 'Password field' }, { //多行文本 xtype : 'textareafield', name : 'textarea1', fieldLabel : 'TextArea', value : 'Textarea value' }, //下面是若干Ext.form.field.Trigger的子类型，Trigger是Ext.form.field.Text的子类 //File、Picker、Spinner是Trigger的子类型 //Picker包含一个按钮，点击后出现一个弹框，可以从中选择字段的值。包括下拉菜单、日期控件等 //Spinner包含一个可以上下点击的按钮。包括数字字段等 { //文件上传控件 xtype : 'filefield', name : 'file1', fieldLabel : 'File upload' }, { //时间控件 xtype : 'timefield', name : 'time1', fieldLabel : 'Time Field', minValue : '8:00 AM', //最小值 maxValue : '5:00 PM', //最大值 increment : 30 //步进 }, { //日期控件 xtype : 'datefield', name : 'date1', fieldLabel : 'Date Field', value : new Date() }, { //下拉框，需要一个Store来加载数据 xtype : 'combobox', fieldLabel : 'Combobox', displayField : 'name', store : Ext.create( 'Ext.data.Store', { fields : [ { type : 'string', name : 'name' } ], data : [ { "name" : "Alabama" }, { "name" : "Alaska" }, { "name" : "Arizona" }, { "name" : "Arkansas" }, { "name" : "California" } ] } ), queryMode : 'local', typeAhead : true }, { //数字字段 xtype : 'numberfield', name : 'numberfield1', fieldLabel : 'Number field', value : 20, minValue : 0, maxValue : 50, //下面3个配置导致数字框与文本框看起来一样 hideTrigger : true, //隐藏触发按钮 keyNavEnabled : false, //禁止键盘导航 mouseWheelEnabled : false //禁止鼠标中键选值 }, //复选框 { xtype : 'checkboxfield', name : 'checkbox1', fieldLabel : 'Checkbox', boxLabel : 'box label' }, //复选框组，两列分布复选框 { xtype : 'checkboxgroup', fieldLabel : 'TwoColCheckBoxGroup', columns : 2, vertical : true, items : [ { boxLabel: 'Item 1', name: 'rb', inputValue: '1' }, { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true }, { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }, { boxLabel: 'Item 4', name: 'rb', inputValue: '4' }, { boxLabel: 'Item 5', name: 'rb', inputValue: '5' }, { boxLabel: 'Item 6', name: 'rb', inputValue: '6' } ] }, //单选框，是复选框的子类型 { xtype : 'radiofield', name : 'radio1', value : 'radiovalue1', fieldLabel : 'Radio buttons', boxLabel : 'radio 1' }, //复选框组，与复选框组类似 { xtype : 'radiogroup', fieldLabel : 'TwoColRadioGroup', columns : 2, vertical : true, items : [ { boxLabel: 'Item 1', name: 'rb', inputValue: '1' }, { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true}, { boxLabel: 'Item 3', name: 'rb', inputValue: '3' }, { boxLabel: 'Item 4', name: 'rb', inputValue: '4' }, { boxLabel: 'Item 5', name: 'rb', inputValue: '5' }, { boxLabel: 'Item 6', name: 'rb', inputValue: '6' } ] }, { //多滑块 xtype : 'multislider', fieldLabel : 'Multi Slider', values : [ 25, 50, 75 ], increment : 5, minValue : 0, maxValue : 100 }, { //单滑块 xtype : 'sliderfield', fieldLabel : 'Single Slider', value : 50, increment : 10, minValue : 0, maxValue : 100 } ] } ); |
表单验证
ExtJS 为表单提供了单独的验证机制，与模型的验证机制无关。下面的例子演示了常用的表单验证方式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
Ext.create( 'Ext.form.Panel', { frame : true, width : 340, bodyPadding : 5, fieldDefaults : { labelAlign : 'left', labelWidth : 90, anchor : '100%', //错误信息显示的位置：side, under, top msgTarget : 'under' }, items : [ { xtype : 'textfield', name : 'textfield1', fieldLabel : 'Required', //非空校验 allowBlank : false } , { xtype : 'textfield', name : 'textfield2', fieldLabel : 'Min 2', //最小长度校验 minLength : 2 }, { xtype : 'textfield', name : 'textfield3', fieldLabel : 'Max 5', //最大长度校验 maxLength : 5 }, { xtype : 'textfield', name : 'textfield7', fieldLabel : 'Regex - Phone', //正则式校验 regex : /^\d{3}-\d{3}-\d{4}$/, regexText : 'Must be in the format xxx-xxx-xxxx' }, //ExtJS提供了一些预置的验证规则，称为vtype { xtype : 'textfield', name : 'textfield4', fieldLabel : 'Email', //电子邮件验证 vtype : 'email' }, { xtype : 'textfield', name : 'textfield5', fieldLabel : 'Alpha', //仅支持A-Za-z和下划线 vtype : 'alpha' }, { xtype : 'textfield', name : 'textfield6', fieldLabel : 'AlphaNum', //仅支持alpha和数组0-9 vtype : 'alphanum' }, { xtype : 'textfield', name : 'textfield6', fieldLabel : 'Url', //网址验证 vtype : 'url' } ] } ); |
实现一个自定义的vtype也很简单：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
Ext.apply( Ext.form.field.VTypes, { IPAddress : function( v ) { return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test( v ); }, //错误信息 IPAddressText : 'Must be a numeric IP address', IPAddressMask : /[\d\.]/i } ); //可以这样使用该验证类型 var field = { xtype : 'textfield', name : 'textfield8', fieldLabel : 'Custom: IP Address', vtype : 'IPAddress' }; |
标签
不关联字段的单纯标签也是支持的：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.create( 'Ext.form.Panel', { width : 100, bodyPadding : 10, items : [ { xtype : 'label', forId : 'myFieldId', text : 'Just a Label', margins : '0 0 0 10' } ] } ); |
表单动作（Action）
可以处理两种表单动作（Action）：加载数据、提交数据。
下面的表单包含两个按钮，分别用来加载和提交：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
Ext.create( 'Ext.form.Panel', { width : 300, bodyPadding : 5, fieldDefaults : { labelAlign : 'left', labelWidth : 90, anchor : '100%' }, items : [ { xtype : 'hiddenfield', name : 'bookId' }, { xtype : 'textfield', name : 'bookName', fieldLabel : 'Title' }, { xtype : 'textfield', name : 'bookAuthor', fieldLabel : 'Author' } ], buttons : [ { text : 'Load', handler : function() { var form = this.up( 'form' ).getForm(); //通过form.Basic来加载数据到表单 //期望的数据格式：{ success: true, data: {bookId: 10 ... } ,... } form.load( { url : 'data/form.json', failure : function( form, action ) {} } ); } }, { text : 'Submit', handler : function() { var form = this.up( 'form' ).getForm(); form.submit( { url : 'form-submit.php', //提交表单后显示的信息 waitMsg : 'Sending the info...', success : function( fp, o ) {} } ); } } ] } ); |
Leave a Reply