ExtJS——表单按列显示

最新推荐文章于 2023-06-17 22:40:09 发布
木然绽放
最新推荐文章于 2023-06-17 22:40:09 发布
阅读量349
点赞数
分类专栏： ExtJS4
本文链接：https://blog.csdn.net/u013127751/article/details/65443022
版权
ExtJS4 专栏收录该内容
18 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<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>
</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!=''){
                  //hn改
                   if(this.id=='height'){
                    var weight_ele=Ext.get('height');
                    weight_ele.createChild({
                        tag: 'div',
                        html: this.unitText,
                        cls:'x-form-unit'
                   });
                   }else if(this.id=='age'){
                    var weight_ele=Ext.get('age');
                    weight_ele.createChild({
                        tag: 'div',
                        html: this.unitText,
                        cls:'x-form-unit'
                   });
                   }else if(this.id=='weight'){
                    var weight_ele=Ext.get('weight');
                    weight_ele.createChild({
                        tag: 'div',
                        html: this.unitText,
                        cls:'x-form-unit'
                   });
                   }
                   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(){
        //姓名
    var txtusername = new Ext.form.TextField({
        width:230,
        allowBlank:false,
        maxLength:4,
        name:'username',
        fieldLabel:'姓名',
        blankText:'请输入姓名',
        maxLengthText:'姓名不超过4个字节'
    });
    //政治面貌
    //一个小巧的帮助类，用于更方便的从一个数组的数据来创建Ext.data.Store。
    var combostore = new Ext.data.ArrayStore({
        fields:['id','name'],
        data:[[1,'团员'],[2,'党员'],[3,'其他']]
    }); 
    var cobpolitical = new Ext.form.ComboBox({
        width:230,
        allowBlank:false,
        fieldLabel:'政治面貌',
        store:combostore,
        displayField:'name',
        valueField:'id',
        triggerAction:'all',//触发器被点击时执行的操作。all指定allQuery配置项执行查询
        blankText:'请选择政治面貌',
        emptyText:'请选择...',
        editable:false,
        mode:'local'
    });
    //毕业院校
    var txtgraduateschool = new Ext.form .TextField({
        width:230,
        allowBlank:false,
        maxLength:10,
        name:'graduateschool',
        fieldLabel:'毕业院校',
        blankText:'请输入毕业院校',
        maxLengthText:'毕业院校不能超过10个字符'        
    });
    //通讯地址
    var txtaddress = new Ext.form.TextField({
        width:230,
        allowBlank:false,
        maxLength:30,
        name:'address',
        fieldLabel:'通讯地址',
        blankText:'请输入通讯地址',
        maxLengthText:'通讯地址不能超过30个字符'
    });
    //第一列包括4行
    var column1 ={
        type:'column',
    //    columnWidth:.28,
    //    layout:'form',
        items:[txtusername,cobpolitical,txtgraduateschool,txtaddress]
    };

    //第二列开始
    //性别
    var rdosex = new Ext.form.RadioGroup({
        fieldLabel:'性别',
        width:230,
        style:'padding-top:3px;height:17px;',
        items:[{name:'sex',inputValue:'0',boxLabel:'男',checked:true},{name:'sex',inputValue:'1',boxLabel:'女' 
        }]
    });

    //身高
    var numheight = new Ext.form.NumberField({
        fieldLabel:'身高',
        width:200,
        decimalPrecision:0,
        minValue:1,
        maxValue:200,
        unitText:'cm',
        allowBlank:false,
        id:'height',
        style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
        blankText:'请输入身高'
    });
    //毕业专业
    var txtprofessional = new Ext.form.TextField({
        width:230,
        allowBlank:false,
        maxLength:30,
        name:'professional',
        fieldLabel:'毕业专业',
        blankText:'请输入毕业专业',
        maxLengthText:'毕业专业不能超过30个字符'
    });
    //联系电话
    var txtphone = new Ext.form.TextField({
        width:230,
        allowBlank:false,
        maxLength:20,
        name:'phone',
        fieldLabel:'联系电话',
        blankText:'请输入联系电话',
        maxLengthText:'联系电话不超过20个字符'
    });
    //第二列包括4行
    var column2 = {
        type:'column',
      // columnWidth:0.28,
      // layout:'form',
        items:[rdosex,numheight,txtprofessional,txtphone]
    };
    //第三列
    //年龄
    var numage = new Ext.form.NumberField({
        fieldLabel:'年龄',
        width:200,
        decimalPrecision:0,
        minValue:1,
        maxValue:60,
        id:'age',
        unitText:'岁',
        allowBlank:false,
        style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
        blankText:'请输入年龄'
    });
    //体重
    var numweight = new Ext.form.NumberField({
        fieldLabel:'体重',
        width:200,
        decimalPrecision:0,
        minValue:1,
        maxValue:300,
        id:'weight',
        name:'weight',
        unitText:'kg',
        allowBlank:false,
        style:"display: -webkit-inline-box;",//对于重写unitText属性很关键
        blankText:'请输入体重'
    });
    var dategraduation = new Ext.form.DateField({
        fieldLabel:'毕业日期',
        name:'graduatedate',
        width:217,
        format:'Y-m-d',
        editable:false,
        allowBlank:false,
        blankText:'请选择毕业日期'
    });
    //第三列包含3行
    var column3 = {
        type:'column',
        //columnWidth:.25,
        //layout:'form',
        items:[numage,dategraduation,numweight]
    };
    //第四列
    var imagebox = new Ext.Component({
        autoEl:{
            style:'width:165px;height:160px;margin:2px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px',
            tag:'div',
            id:'imageshow',
            html:'暂无照片'
        }
    });
    var uploadbutton = new Ext.Button({
        text:'上传相片',
        style:'margin:1px auto;',
        handler:function(){
            Ext.MessageBox.alert('提示','弹出新窗口上传相片！');
        }
    });
    var column4 = {
       // columnWidth:.16,
       // layout:'form',
        type:'column',
        items:[imagebox,uploadbutton]
    };
    //招聘来源
    var checksource = new Ext.form.CheckboxGroup({
        fieldLabel: '招聘来源',
        style: 'padding-top:3px;height:17px;',
        items: [{
            boxLabel: '报纸招聘',
            inputValue: '0'
        }, {
            boxLabel: '校园招聘',
            inputValue: '1'
        }, {
            boxLabel: '人才市场',
            inputValue: '2'
        }, {
            boxLabel: '招聘网站',
            inputValue: '3'
        }]
    });
    //创建文本上传域
    var exteditor = new Ext.form.HtmlEditor({
        fieldLabel: '其他信息',
        width: 745,
        height: 220
    });
    //表单
    var form = new Ext.form.FormPanel({
        frame:true,
        title:'员工信息表',
        style:'margin:10px',
        labelWidth:70,
        buttonAlign:'center',
        items:[{
            layout:'column',
            items:[column1,column2,column3,column4]
        },checksource,exteditor],
        buttons:[{ text:'保存',handler:function(){alert('保存方法！');}},
                 { text:'重置',handler:function(){alert("重置方法！");}}
                ]
    });
    //窗体
    var win = new Ext.Window({
        title:'窗口',
        width:900,
        height:580,
        resizable:true,
        modal:true,
        closable:true,
        maximizable:true,
        minimizable:true,
        buttonAlign:'center',
        items:form
    });
    win.show();
});
</script>
</body>
</html>
木然绽放
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS——表单按列显示

Ext.override(Ext.form.NumberField,{ unitText:'', onRender:function(ct,position){ Ext.form.NumberField.superclass.onRender.call(this,ct,position); if(this.unitText!=''){
复制链接

扫一扫