ExtJs4.1：使用简单控件生成form

//重写文本框开始-------------------
         Ext.override(Ext.form.TextField, {
             unitText: '',
             onRender: function (ct, position) {
                 Ext.form.TextField.superclass.onRender.call(this, ct, position);
                 // 如果单位字符串已定义 则在后方增加单位对象   
                 if (this.unitText != '') {
                     this.unitEl = ct.createChild({
                         tag: 'div',
                         html: this.unitText
                     });
                     this.unitEl.addCls('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 (){
	
	//初始化标签中的Ext:Qtip属性
	Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget = 'side';
    
    //提交按钮处理方法
    var btnSubmitClick = function(){
    	if (form.getForm().isValid()){
    		Ext.Msg.alert('提示','你点击了提交按钮');
    	}//else{
    	//	Ext.Msg.alert('提示','校验失败');
    	//}
    };
    //重置按钮"点击时"处理方法
    var btnResetClick = function(){
    	//form.getform().reset();
    	Ext.Msg.alert('提示','你点击了重置按钮');
    };

    //重置按钮"鼠标悬停"处理方法
    var btnresetmouseover = function(){
    	Ext.Msg.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个字符'
	});
	
    //密码input
    var txtpassword = new Ext.form.TextField({
        width: 240,
        allowBlank: false,
        maxLength: 20,
        inputType: 'password',
        name: 'password',
        fieldLabel: '密码',
        blankText: '请输入密码',
        maxLengthText: '密码不能超过20个字符'
    });
    
    //验证码input
    var txtcheckcode = new Ext.form.TextField({
        fieldLabel: '验证码',
        id: 'checkcode',
        allowblank: false,
        width: 240,
        blankText: '请输入验证码',
        maxlength: 4,
        maxLengthText: '验证码不能超过4个字符'	
    });
    
    //身高
    var numberfield = new Ext.form.NumberField({
        fieldLabel: '身高',
        width: 240,
        decimalPrecision: 2,
        minVal:1,
        maxVal:180,
        unitText: ' cm',
        allowBlank: false,
        blankText: '请输入身高'	   	
    });
    
    //隐藏域字段
    var hidenfield = new Ext.form.Hidden({
    	name: 'userid',
    	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: '性别',
		columns: [100,100],
		vertical: true,
		items: [
			{boxLabel: '男', checked: true, name: 'sex',inputValue: '1'},
			{boxLabel: '女', name: 'sex',inputValue: '0'}
		]

    });
    
	//获取单选组的值
	radiogroup.on('change', function(rdgroup, checked) {
		
		//获取单选按钮选中的值 
		//this.ownerCt.ownerCt//这里表示的是FormPanel的对象，自己定义！   
		var sTypeRadio = this.ownerCt.form.findField("sex").getGroupValue();
		alert(sTypeRadio);
	});
    
    //复选
    var checkgroup = new Ext.form.CheckboxGroup({
    	fieldLabel: '兴趣爱好',
    	//columns: 1,
        items: [
                {boxLabel: '看书', name: 'cb-auto-1', inputValue: '0'},
                {boxLabel: '上网', name: 'cb-auto-2', inputValue: '1', checked: true},
                {boxLabel: '听音乐', name: 'cb-auto-3', inputValue: '2'}
        ]   	
    });
    
    //获取复选组的值
    checkgroup.on('change', function(cbgroup, checked){
    	this.items.each(function(item){
    		if (item.checked) {
    			alert(item.boxLabel);
    		}
    	});     

    });
    
    //下拉列表开始
    //创建数据源
    var combostore  = new Ext.data.ArrayStore({
    	fields: ['id', 'name'],
    	data: [['1', '团员'],['2', '中共党员'],['3', '无党派']]
    });
    
    //创建Combobox
    var combobox = new Ext.form.ComboBox({
    	fieldLabel: '政治面貌',
    	store: combostore,
    	displayField: 'name',
    	valueField: 'id',
		triggerAction: 'all',
		emptyText: '请选择...',
		allowBlank: false,
		blankText: '请选择政治面貌',
		editable: false,
		mode: 'local'
    	
    }); 

	//Combobox获取值
	combobox.on('select', function () {
		alert(combobox.getValue());
	})
   
	var form = new Ext.form.FormPanel({
		frame: true,
		title: '表单标题',
		style: 'margin:10px',
		html: '
这里填写表单内容
',
		
		items: [txtusername, txtpassword, txtcheckcode, numberfield, 
				hidenfield, datefield, radiogroup, checkgroup, combobox
		],
		buttons: [btnSubmit, btnReset]
	});

    var win = new Ext.Window({
    //var win = new Ext.Window({
        title: '窗口',
        iconCls: 'loginicon',
        width: 500,
        height: 400,
        html: '
这里是窗体内容
',
        resizeble: true,
        modal: true,
        closable: true,
        maximizable: true,
        minimizable: true,
        items: form
    });
	win.show();
	
	//创建验证码
	var checkcode = Ext.getDom('checkcode');
	var checkimage = Ext.get(checkcode.parentNode);
	//checkimage.createChild({
		//tag: img,
		//src: 'image/checkcode.gif',
		//align: 'absbottom',
		//style: 'padding-left:23px;cursor:pointer;'
	//});


});

 

ownerCt：得到当前对象所在的容器。