ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox
来源：互联网 发布：cnc编程学徒工资待遇 编辑：程序博客网 时间：2024/05/08 20:37
这是一个综合性的应用，在一张表单里添加了多个组件，值得一提的是，在显示身高组件的NumberField中添加显示cm的div.
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="ext-all-debug.js"></script> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript" src="bootstrap.js"></script> <style type="text/css"> .x-form-unit { height: 22px; width:15px; line-height: 22px; padding-left:2px; } </style></head><body><script type="text/javascript">Ext.override(Ext.form.NumberField, { unitText: '', onRender: function (ct, position) { Ext.form.NumberField.superclass.onRender.call(this, ct, position); // 如果单位字符串已定义 则在后方增加单位对象 if (this.unitText != '') { var height_ele=Ext.get('height'); height_ele.createChild({ tag: 'div', html: this.unitText, cls:'x-form-unit' }); // 增加单位名称（cm）的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); // 同时修改错误提示图标的位置 this.alignErrorIcon = function () { this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); }; } } });Ext.onReady(function(){ Ext.QuickTips.init();//初始化提示工具 Ext.form.Field.prototype.msgTarget='side';//设置提示类型 var btnsubmitclick = function(){ Ext.MessageBox.alert('提示','你点了确定按钮！'); } var btnresetclick = function(){ Ext.MessageBox.alert('提示','你点了重置按钮！'); } var btnresetmouseover = function(){ Ext.MessageBox.alert('提示','你的鼠标悬停在重置按钮之上！'); } var btnsubmit = new Ext.Button({ text:'提交', handler:btnsubmitclick }); var btnreset = new Ext.Button({ text:'重置', listeners:{ // 'mouseover':btnresetmouseover, 'click':btnresetclick } }); var txtusername = new Ext.form.TextField({ width:240, allowBlank:false, maxLength:20, name:'username', fieldLabel:'用户名', blankText:'请输入用户名', maxLengthText:'用户名不超过20个字节' }); var txtpassword = new Ext.form.TextField({ width:240, allowBlank:false, maxLength:20, inputType:'password', name:'password', fieldLabel:'密码', blankText:'请输入密码', maxLengthText:'密码不能超过20个字符' }); //身高，数字字段 var numberfield = new Ext.form.NumberField({ fieldLabel:'身高', width:180, decimalPrecision:1,//小数点后允许的最大精度 minValue:0.01, maxValue:200, unitText:'cm',//自定义属性，在onready allowBlank:false, blankText:'请输入身高', id:'height', style:"display: -webkit-inline-box;" }); //隐藏字段 var hiddenfield = new Ext.form.Hidden({ //创建一个新的Hidden对象，隐藏字段用作参数占位符 name:'userid', //服务器端接受值 格式：userid:1 value:'1' }); //日期字段 var datefield = new Ext.form.DateField({ fieldLabel:'出生日期', format:'Y-m-d',//日期格式 editable:false,//不可编辑 allowBlank:false, blankText:'请选择日期' }); //单选组 var radiogroup = new Ext.form.RadioGroup({ fieldLabel:'性别', width:200, items:[{ name:'sex', inputValue:'0', boxLabel:'男', checked:true //默认选项 },{ name:'sex', inputValue:'1', boxLabel:'女' }] }); //获取单选组的值 radiogroup.on('change',function(cbgroup, checked){ var str=''; Ext.Object.each(checked, function(key, value, myself) { if(value=='0'){ str='男'; }else if(value=='1'){ str='女'; } Ext.MessageBox.alert('提示',str); }); }); //复选组 var checkboxgroup = new Ext.form.CheckboxGroup({ fieldLabel:'兴趣爱好', width:270, items:[{ boxLabel:'看书', inputValue:'0' },{ boxLabel:'上网', inputValue:'1' },{ boxLabel:'听音乐', inputValue:'2' }] }); //获取复选组的值 checkboxgroup.on('change', function (cbgroup, checked) { if(checked){ var check='您选择了：',str; //对键值对这种非数组对象的解析 Ext.Object.each(checked, function(key, value, myself) { if(value=='0'){ str='看书'; }else if(value=='1'){ str='上网'; }else if(value=='2'){ str='听音乐'; } check+=str+" "; }); } Ext.MessageBox.alert('提示',check); }); //下拉列表 //数据源 注意数据格式的书写 var comboboxstore = Ext.create('Ext.data.Store', { fields: ['id', 'name'], data : [ {"id":"1", "name":"党员"}, {"id":"2", "name":"团员"}, {"id":"3", "name":"群众"} ] }); //创建Combobox var combobox = new Ext.form.ComboBox({ fieldLabel: '政治面貌', store: comboboxstore, //必须属性，没有显示不出来 //一下两项是combobox对应数据源的显示列与值列，这两个属性也是必须的。 valueField: 'id', displayField: 'name', triggerAction: 'all', emptyText: '请选择...', allowBlank: false, blankText: '请选择政治面貌',//如果allowBlank校验失败时显示的出错文本 editable: false, //指定数据源为本地数据源,若来自服务器则取remote queryMode: 'local' //renderTo: Ext.getBody();指定元素的id, 一个DOM元素或现有的元素，这个组件将被渲染成. }); //Combobox获取值 combobox.on('select', function () { Ext.MessageBox.alert('提示',combobox.getValue()); }) var form = new Ext.form.FormPanel({ frame:true, title:'表单标题', style:'margin:10px', html:'<div style="padding:10px>这里是表单内容</div>', items:[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup,combobox], buttons:[btnsubmit,btnreset] }); var win = new Ext.Window({ title:'窗口', width:476, height:374, html:'<div>这里是窗体内容</div>', resizable:true, modal:true, closable:true, maximizable:true, minimizable:true, buttonAlign:'center', items:form }); win.show(); });</script></body></html>效果图：
0 0
- ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox
- Extjs4中的Form之radiogroup和checkboxgroup
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- Ext.widgets-form(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
- 关于Extjs中radioGroup、checkBoxGroup、comboBox渲染div的问题，跟DOM相关
- extjs4中的checkboxgroup 重写
- Extjs4.0 NumberField的使用
- button、dateField、textField
- ExtJS 获取radioGroup及CheckboxGroup值
- Ext.form.CheckboxGroup和Ext.form.RadioGroup
- EXTJS4中使用CheckboxGroup回填数据问题
- ExtJs——简单组件(ComboBox、GridPanel、Button、Fx、DatePicker)！！！
- Extjs4 combobox 的使用
- Extjs4 combobox模糊查询
- extjs4 combobox 默认选择
- Extjs4 combobox hiddenName
- BZOJ 2436: [Noi2011]Noi嘉年华
- CrackMe分析-OD与IDA、VS结合使用
- Python time模块学习
- 注解用法详解——@SuppressWarnings
- Activity和Fragment的生命周期的混合调用
- ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox
- 自己做个MP3_前言
- 链表插入、删除算法
- #定义泛型类#分别求Integer和Double型数组中元素的最大值，最小值，平均值
- Gradle相关
- Java面试相关
- Linux sh、source和.命令执行.sh文件的区别
- swift Tableview 点击变色 (本人亲测)
- 依赖注入的介绍与理解！
