表单里加了个一个下拉列表

来源：互联网发布：mac无线网络无法连接编辑：程序博客网时间：2024/04/28 17:33
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4     <title></title>  5     <!--ExtJs框架开始-->  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>  8     <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>  9     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10     <!--ExtJs框架结束--> 11     <style type="text/css"> 12         .x-form-unit 13         { 14             height: 22px; 15             line-height: 22px; 16             padding-left: 2px; 17             display: inline-block; 18             display: inline; 19         } 20     </style> 21     <script type="text/javascript"> 22  23         Ext.override(Ext.form.TextField, { 24             unitText: '', 25             onRender: function (ct, position) { 26                 Ext.form.TextField.superclass.onRender.call(this, ct, position); 27                 // 如果单位字符串已定义 则在后方增加单位对象    28                 if (this.unitText != '') { 29                     this.unitEl = ct.createChild({ 30                         tag: 'div', 31                         html: this.unitText 32                     }); 33                     this.unitEl.addClass('x-form-unit'); 34                     // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况    35                     this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); 36                     // 同时修改错误提示图标的位置    37                     this.alignErrorIcon = function () { 38                         this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); 39                     }; 40                 } 41             } 42         }); 43  44         Ext.onReady(function () { 45             //初始化标签中的Ext:Qtip属性。 46             Ext.QuickTips.init(); 47             Ext.form.Field.prototype.msgTarget = 'side'; 48  49             //提交按钮处理方法 50             var btnsubmitclick = function () { 51                 Ext.MessageBox.alert('提示', '你点了确定按钮!'); 52             } 53             //重置按钮"点击时"处理方法 54             var btnresetclick = function () { 55                 Ext.MessageBox.alert('提示', '你点了重置按钮!'); 56             } 57             //重置按钮"鼠标悬停"处理方法 58             var btnresetmouseover = function () { 59                 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!'); 60             } 61             //提交按钮 62             var btnsubmit = new Ext.Button({ 63                 text: '提交', 64                 handler: btnsubmitclick 65             }); 66             //重置按钮 67             var btnreset = new Ext.Button({ 68                 text: '重置', 69                 listeners: { 70                     'mouseover': btnresetmouseover, 71                     'click': btnresetclick 72                 } 73             }); 74             //用户名input 75             var txtusername = new Ext.form.TextField({ 76                 width: 140, 77                 allowBlank: false, 78                 maxLength: 20, 79                 name: 'username', 80                 fieldLabel: '用户名称', 81                 blankText: '请输入用户名', 82                 maxLengthText: '用户名不能超过20个字符' 83             }); 84             //密码input 85             var txtpassword = new Ext.form.TextField({ 86                 width: 140, 87                 allowBlank: false, 88                 maxLength: 20, 89                 inputType: 'password', 90                 name: 'password', 91                 fieldLabel: '密码', 92                 blankText: '请输入密码', 93                 maxLengthText: '密码不能超过20个字符' 94             }); 95             var numberfield = new Ext.form.NumberField({ 96                 fieldLabel: '身高', 97                 width: 80, 98                 decimalPrecision: 1, 99                 minValue: 0.01,100                 maxValue: 200,101                 unitText: ' cm',102                 allowBlank: false,103                 blankText: '请输入身高'104             });105 106             var hiddenfield = new Ext.form.Hidden({107                 name: 'userid',108                 value: '1'109             });110 111             var datefield = new Ext.form.DateField({112                 fieldLabel: '出生日期',113                 format: 'Y-m-d',114                 editable: false,115                 allowBlank: false,116                 blankText: '请选择日期'117             });118             var radiogroup = new Ext.form.RadioGroup({119                 fieldLabel: '性别',120                 width: 100,121                 items: [{122                     name: 'sex',123                     inputValue: '0',124                     boxLabel: '男',125                     checked: true126                 }, {127                     name: 'sex',128                     inputValue: '1',129                     boxLabel: '女'130                 }]131             });132             //获取单选组的值133             radiogroup.on('change', function (rdgroup, checked) {134                 alert(checked.getRawValue());135             });136             var checkboxgroup = new Ext.form.CheckboxGroup({137                 fieldLabel: '兴趣爱好',138                 width: 170,139                 items: [{140                     boxLabel: '看书',141                     inputValue: '0'142                 }, {143                     boxLabel: '上网',144                     inputValue: '1'145                 }, {146                     boxLabel: '听音乐',147                     inputValue: '2'148                 }]149             });150             //获取复选组的值151             checkboxgroup.on('change', function (cbgroup, checked) {152                 for (var i = 0; i < checked.length; i++) {153                     alert(checked[i].getRawValue());154                 }155             });156             //----------------------下拉列表开始----------------------//157             //创建数据源[数组数据源]158             var combostore = new Ext.data.ArrayStore({159                 fields: ['id', 'name'],160                 data: [[1, '团员'], [2, '党员'], [3, '其他']]161             });162             //创建Combobox163             var combobox = new Ext.form.ComboBox({164                 fieldLabel: '政治面貌',165                 store: combostore,166                 displayField: 'name',167                 valueField: 'id',168                 triggerAction: 'all',169                 emptyText: '请选择...',170                 allowBlank: false,171                 blankText: '请选择政治面貌',172                 editable: false,173                 mode: 'local'174             });175             //Combobox获取值176             combobox.on('select', function () {177                 alert(combobox.getValue());178             })179             //----------------------下拉列表结束----------------------//180             //表单181             var form = new Ext.form.FormPanel({182                 frame: true,183                 title: '表单标题',184                 style: 'margin:10px',185                 html: '<div style="padding:10px">这里表单内容</div>',186                 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup,187                         checkboxgroup, combobox],188                 buttons: [btnsubmit, btnreset]189             });190             //窗体191             var win = new Ext.Window({192                 title: '窗口',193                 width: 476,194                 height: 374,195                 html: '<div>这里是窗体内容</div>',196                 resizable: true,197                 modal: true,198                 closable: true,199                 maximizable: true,200                 minimizable: true,201                 buttonAlign: 'center',202                 items: form203             });204             win.show();205         });206     </script>207 </head>208 <body>209 <!--210 说明：211 (1)var combostore = new Ext.data.ArrayStore():创建一个新的数组数据源。212 (2)fields: ['id', 'name']：数据源包含两列，列名分别为'id','name'。213 (3)data: [[1, '团员'], [2, '党员'], [3, '其他']]:数据源对应的数据，例：id:1,name:团员。214 (4)var combobox = new Ext.form.ComboBox()：创建一个新的下拉列表。215 (5)store: combostore:数据源为上面创建的数据源，这个属性是combobox的必需属性。216 (6)displayField: 'name',valueField: 'id'：combobox对应数据源的显示列与值列，这两个属性也是必须的。217 (7)mode: 'local'：指定数据源为本地数据源，如果是本地创建的数据源，该属性也是必须的，如果数据源来自于服务器，218     设置为'remote'表示数据源来自于服务器，关于服务器交互后面我们会讲解。219 (8)triggerAction: 'all'：请设置为”all”,否则默认 为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，220     如果设为all的话，每次下拉均显示全部选项。221 (9)editable: false:默认情况下，combobox的内容是可以编辑的，该属性设置为false，222     使下拉列表只能选择不能编辑。223 (10)combobox.on('select', function () {alert(combobox.getValue());}):选择时alert出下拉列表的值。224 -->225 </body>226 </html>
2.效果如下：
3.说明：
combo这个组件是需要绑定一个数据源才能使用,所以store和displayField和valueField是必须的
4.常用属性
1.valueField:"字符型"，value值字段
2.displayField："字符型",显示文本字段
3.editable：false//false则不可编辑，默认为 true
4.triggerAction:”all”//请设置为”all”,否则默认为”query”的情况下，你选择某个值后，再此下拉时，只出现匹配选项，如果设为”all”的话，每次下拉均显示全部选项
5.hiddenName:string //真正提交时此combo的name，请一定要注意。
6.typeAhead:true,//延时查询，与下面的参数配合
7.typeAheadDelay:3000,//默认250