Extjs_最常用的表单
1：表单字段实例
Ext.onReady(function () { Ext.QuickTips.init(); var f = new Ext.form.Panel({ title: '表单', height: 220, width: 400, frame: true, renderTo: 'div1', defaults: { //autoFitError:false //展示错误时是否自动调整字段组件宽度 labelSeparator: ':', labelWidth: 50, width: 150, allowBlank: false,//是否允许为空 blankText:'不允许为空', //labelAlign: 'left', //msgTarget:'qtip ' //显示一个浮动的提示信息 //msgTarget: 'under' //下主主显示 //msgTarget: 'none' //不显示 //msgTarget: 'errorMsg' //在errorMsg里面显示 msgTarget: 'side' //在右边显示 }, items: [{xtype:'textfield',fieldLable:'姓名'}, { xtype: 'numberfield', fieldLable: '年龄' }] }); });
2:Ext.form.Text文本域
Ext.onReady(function () { Ext.QuickTips.init(); var loginForm = new Ext.form.Panel({ title: 'Ext.form.file.Text', bodyStyle: 'padding:5 5 5 5', frame: true, height: 120, width: 200, renderTo: 'div1', defaultType: 'textfield', defaults: { labelSeparator: ':', labelWidth: 50, width: 120, allowBlank: false, labelAlign: 'left', msgTarget:'side' }, items: [{ fieldLabel: '用户名', name: 'userName', selectOnFocus: true, regex: /^([\w+]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, regexText: '验证错误', }, { name: 'password', fieldLabel: '密码', inputType: 'password' }], buttons: [{ text: '登陆', handler: function () { loginForm.form.setValues({ userName: 'user@com', password: '123456' }); } }] });
3:Ext.form.TextArea文本框
Ext.onReady(function () { Ext.QuickTips.init(); var testForm = new Ext.form.Panel({ title: 'TextArea测试', bodyStyle: 'padding: 5 5 5 5', frame: true, height: 150, width: 250, renderTo: 'div1', items: [{ xtype: 'textarea', fieldLabel: '备注', id: 'memo', labelSeparator: ': ', labelWidth: 60, width:200 }], buttons: [{ text: '确定', handler: function () { var memo = testForm.getForm().findField('memo'); alert(memo.getValue()); } }] }); });
4:Ext.form.Number,少写了一个new字。。结果找了半个小时才找到错在哪里，伤不起的Ext
Ext.onReady(function () { Ext.QuickTips.init(); var loginform =new Ext.form.Panel({ title: 'Ext.form.file.Number', bodyStyle: 'padding:5 5 5 5', renderTo: 'div1', frame: true, height: 150, width: 250, defaultType: 'numberfield', defaults: { labelSeparator: ': ', labelWidth: 80, width: 200, labelAlign: 'left', msgTarget: 'side', allowBlank: false }, items: [{ fieldLabel: '整数', hideTrigger: true,//隐藏微调设置 allowDecimals: false, nanText: '请输入有效的整数' }, { fieldLabel: '小数', decimalsPrecision: 2,//精确到小数两位 allowDecimals: true, nanText: '请输入有效的小数' }, { fieldLabel: '数字限制', baseChars: '12345' }, { fieldLabel: '数值限制', maxValue: 100, minValue: 50 }] }); });
5:Ext.form.CheckBox && Ext.form.radio
Ext.onReady(function () { new Ext.form.Panel({ title: 'checkBox and radio', bodyStyle: 'padding:5 5 5 5', frame: true, height: 150, width: 250, renderTo: 'div1', defaults: { labelSeparator: ': ', labelWidth: 80, width: 200, labelAlign:'left' }, items: [ { xtype: 'radio', name: 'sex', fieldLabel: '性别', boxLabel:'男', }, { xtype: 'radio', name: 'sex',//name相同，则为一组 fieldLabel: '性别', boxLabel:'女' }, { xtype: 'checkboxfield', name: 'swim', fieldLabel: '爱好', boxLabel:'游泳' }, { xtype: 'checkboxfield', name: 'walk', fieldLabel: '爱好', boxLabel:'散步' }] }); });
6:Ext.form.CheckboxGoup && Ext.form.radioGrop
Ext.onReady(function () { new Ext.form.Panel( { title: '啊啊啊。。好多啊', bodyStyle: 'padding:5 5 5 5 ', frame: true, height: 100, width: 270, renderTo: 'div1', defaults: { labelSeparator: ': ', labelWidth: 50, width: 200, labelAlign:'left' }, items: [{ xtype: 'radiogroup', fieldLabel: '性别', columns: 2, items:[ { boxLabel: '男', name: 'sex', inputValue: 'male' }, { boxLabel: '女', name: 'sex', inputValue: 'female' } ] }, { xtype: 'checkboxgroup', fieldLabel: '爱好', columns: 3, items: [ { boxLabel:'游泳',name:'swim' }, { boxLabel: '散步', name: 'walk' }, { boxLabel: '阅读', name: 'reading' }, { boxLabel: '游戏', name: 'game' }, { boxLabel: '电视', name: 'tv' } ] }] } ); });
7:Ext.form.Trigger解发字段
Ext.onReady(function () { var test =new Ext.form.Panel( { title: 'Trriger演示', bodyStyle: 'padding:5 5 5 5 ', frame: true, height: 100, width: 270, renderTo: 'div1', defaults: { labelSeparator: ': ', labelWith: 70, width: 200, labelAlign:'right' }, items: [{ xtype: 'triggerfield', id: 'memo', fieldLabel: '触发字段', hideTrigger: false, onTriggerClick: function () { var memo = test.getForm().findField('memo'); alert(memo.getValue()); Ext.getCmp('memo').setValue('test'); } }] }); });
8：Ext.form.Picker 拾取器字段，是抽象类，不能实例化，只能用子类
10:Ext.form.field.Time时间选择框，继承自Picker组件
8:Ext.form.Spinner微调字段
Ext.onReady(function () { new Ext.form.Panel({ title: 'Spinner', bodyStyle: 'padding:5 5 5 5', frame: true, height: 70, width: 250, renderTo: 'div1', defaults: { labelSeparator: ': ', labelWidth: 70, width: 200, labelAlign:'left' }, items: [{ xtype: 'spinnerfield', fieldLabel:'微调啦', id: 'salary', value: 100, onSpinUp: function () { var salaryCmp = Ext.getCmp('salary'); salaryCmp.setValue(Number(salaryCmp.getValue()) + 1); }, onSpinDown: function () { var salaryCmp = Ext.getCmp('salary'); salaryCmp.setValue(Number(salaryCmp.getValue()) - 1); } }] }); });
9:Ext.form.Time
Ext.onReady(function () { Ext.QuickTips.init(); Ext.create("Ext.form.Panel", { title: 'time显示', renderTo: Ext.getBody(), bodyPadding: 5, frame: true, height: 100, width: 300, items: [{ fieldLabel: '时间选择框', xtype: 'timefield', width: 220, labelSeparator: ': ', msgTarget: 'side', autoFitError: false, maxValue: '18:00', maxText: '时间应该小于{0}', minValue:'10:00', minText: '时间应该大于{0}', pickerMaxHeight: 70, increment: 60, format: 'G时i分s秒',//G表示24小时记时法,g12,H24带0,h12带0 invalidText:'时间格式无效' }] }); });
10:Ext.form.Date
Ext.onReady(function () { Ext.QuickTips.init(); Ext.create("Ext.form.Panel", { title: 'date 示例', frame: true, height: 100, width: 300, renderTo: Ext.getBody(), bodyPadding: 5, items: [{ fieldLabel: '日期选择框', xtype: 'datefield', labelSeparator: ': ', msgTarget: 'side', autoFitError: false, format: 'Y年m月d日', maxValue: '12/31/2008', minValue: '01/01/2008', disabledDates:['2008年03月12日'], disabledDatesText: '禁止选择该日期', disabledDays: [0, 6], disabledDaysText: '禁止选择该日期', width: 220, value:'12/31/2008' }] }); });
11:Ext.form.Hidden-------------暂时不这写了。。写的想吐了。
