ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox

最新推荐文章于 2017-06-13 11:26:48 发布

木然绽放

最新推荐文章于 2017-06-13 11:26:48 发布

阅读量256

点赞数

分类专栏： ExtJS4

本文链接：https://blog.csdn.net/u013127751/article/details/65438842

版权

ExtJS4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

这是一个综合性的应用，在一张表单里添加了多个组件，值得一提的是，在显示身高组件的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

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4——Button/override/NumberField/Hidden/DateField/RadioGroup/CheckboxGroup/ComboBox

这是一个综合性的应用，在一张表单里添加了多个组件，值得一提的是，在显示身高组件的NumberField中添加显示cm的div. .x-form-unit { height: 22px; width:15px; line-height
复制链接

扫一扫