ExtJS——表单按列显示

来源：互联网发布：centos 5.5 下载地址编辑：程序博客网时间：2024/06/05 11:22
<!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