Ext.onReady(function() {
// 动态切换图片,不赋值,讲联网ext官网查询
Ext.BLANK_IMAGE_URL = '../ext-2.2/resources/images/default/s.gif';
// 初始化信息提示框
Ext.QuickTips.init();
// turn on validation errors beside the field globally
// 定义统一错误提示的样式 1、qtip 2、title 3、under 4、side
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/* * ================ Simple form ======================= */
bd.createChild({
tag : 'h2',
html : '简单的 form panel'
});
var formPanel = new Ext.form.FormPanel({
title:'Ext.form.FormPanel',
height:400,
width:800,
frame:true,
labelSeparator:':',
labelWidth:60,
labelAlign:'right',
items:[
new Ext.form.TextField({
fieldLabel:'userName',
allowBlank:false,
blankText:'填写姓名'
}),
new Ext.form.NumberField({
fieldLabel:'age',
allowBlank:false,
blankText:'填写年龄',
emptyText:'age',
maxLength:2,
maxLengthText:'不能超过100岁',
baseChars:'789'//接受有效数字的一组基础字符
//msgTarget:'qtip'
}),
new Ext.form.TextArea({
id:'textAreaId',
width:150,
fieldLabel:'remark'
}),
new Ext.form.Checkbox({ // checkbox、radio 横排
name:'cb1',
fieldLabel:'爱好',
boxLabel:'游泳',
checked:true,
readOnly:true
}),
new Ext.form.Checkbox({
name:'cb2',
boxLabel:'爬山',
disabled:true
}),
new Ext.form.Checkbox({
name:'cb3',
boxLabel:'旅游'
}),
new Ext.form.Radio({ // checkbox、radio 横排
name:'sex',
fieldLabel:'性别',
boxLabel:'男'
}),
new Ext.form.Radio({
name:'sex',
boxLabel:'女',
hiddenLabel:true
}),//触发字段
new Ext.form.TriggerField({
id:'trigerFieldId',
fieldLabel:'触发字段',
hideTrigger:false,
onTriggerClick:function(e){
alert(formPanel.findById('trigerFieldId').getValue());
}
})
],
buttons:[{
text:'btn1',
handler:showValue
}]
});
function showValue(){
var ta = formPanel.findById('textAreaId');
alert(ta.getValue());
}
formPanel.render(document.body);
});
分享到:
相关推荐
Ext的FormPanel组件说明formPanel的详细使用说明
Ext table布局实例 formpanel的table布局
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
在使用ExtJs开发时会遇到这样的问题,后台传来一个java对象,里面有一个date类型的数据,现在要显示到页面上,我们该如何写才能不用将date转换成string的直接在页面上显示。下面解决办法:例如:在员工查询页面上,...
第一部分 Ext Core 第1章 Ext Core重要概念 2 1.1 Ext.Element 2 1.1.1 获取HTMLElement节点的Ext.Element实例 2 1.1.2 CSS样式操作 3 1.1.3 DOM查询与遍历 4 1.1.4 DOM操作 6 1.1.5 事件处理 9 1.1.6 尺寸大小 13 ...
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
-增加示例(iframe/parent_postback_run3.aspx),如何通过简单的Javascript代码回发父页面(feedback:eroach)。 -修正一些书写错误(feedback:bmck)。 -从Region控件中删除SplitColor属性,增加CollapseMode, ...
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
ExtJs中表单formPanel的横向布局
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第...
var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...
自我扩展FormPanel 和Store实现自动数据触发感知功能实现与store绑定功能