ExtJS5学习笔记Word文件下载.docx
《ExtJS5学习笔记Word文件下载.docx》由会员分享，可在线阅读，更多相关《ExtJS5学习笔记Word文件下载.docx（33页珍藏版）》请在冰点文库上搜索。
）;
}）;
/body>
/html>
说明：
（1）Ext.onReady（）:
ExtJSApplication的入口...就相当于Java或C#的main函数.
（2）Ext.MessageBox.alert（）：
弹出对话框。
22:
40
styletype="
.x-form-unit
{
height:
22px;
line-height:
padding-left:
2px;
display:
inline-block;
inline;
}
/style>
!
--<
hellowword.js"
-->
Ext.require（[
'
Ext.form.*'
Ext.layout.container.Absolute'
Ext.window.Window'
]）;
Ext.onReady（function（）{
varform=Ext.create（'
Ext.form.Panel'
{
layout:
absolute'
url:
save-form.php'
defaultType:
textfield'
border:
false,
items:
[{
fieldLabel:
SendTo'
fieldWidth:
60,
msgTarget:
side'
allowBlank:
vtype:
email'
x:
5,
y:
name:
to'
anchor:
-5'
//anchorwidthbyrightoffset
},{
Subject'
35,
subject'
5,
65,
xtype:
textarea'
style:
margin:
0'
hideLabel:
true,
msg'
-5-5'
//anchorbyrightanfbottomoffset
}]
varwin=Ext.create（'
autoShow:
title:
ResizeMe'
width:
500,
300,
minWidth:
minHeight:
200,
fit'
plain:
true,
form,
maximizable:
minimizable:
listeners:
minimize:
function（win,opts）{
win.collapse（）;
}
},
buttons:
text:
Send'
},{
Cancel'
}）;
2015年6月7日15:
52:
55
//初始化标签中的Ext:
Qtip属性。
Ext.QuickTips.init（）;
Ext.form.Field.prototype.msgTarget='
;
//提交按钮处理方法
varbtnsubmitclick=function（）{
提示'
你点了确定按钮!
//重置按钮"
点击时"
处理方法
varbtnresetclick=function（）{
你点了重置按钮!
鼠标悬停"
varbtnresetmouseover=function（）{
你鼠标悬停在重置按钮之上!
//提交按钮
varbtnsubmit=newExt.Button（{
提交'
handler:
btnsubmitclick
//重置按钮
varbtnreset=newExt.Button（{
重置'
listeners:
mouseover'
:
btnresetmouseover,
click'
btnresetclick
//用户名input
vartxtusername=newExt.form.TextField（{
340,
maxLength:
20,
username'
用户名称'
blankText:
请输入用户名'
maxLengthText:
用户名不能超过20个字符'
//密码input
vartxtpassword=newExt.form.TextField（{
inputType:
password'
密码'
请输入密码'
密码不能超过20个字符'
//----------------------数字字段开始----------------------//
varnumberfield=newExt.form.NumberField（{
身高'
380,
decimalPrecision:
1,
minValue:
0.01,
maxValue:
unitText:
cm'
请输入身高'
//----------------------数字字段结束----------------------//
//----------------------隐藏域字段开始----------------------//
varhiddenfield=newExt.form.Hidden（{
userid'
value:
1'
//----------------------隐藏域字段结束----------------------//
//----------------------日期字段开始----------------------//
vardatefield=newExt.form.DateField（{
出生日期'
format:
Y-m-d'
editable:
请选择日期'
//----------------------日期字段结束----------------------//
//表单
varform=newExt.form.FormPanel（{
frame:
表单标题'
10px'
html:
divstyle="
padding:
10px"
这里表单内容<
/div>
[txtusername,txtpassword,numberfield,hiddenfield,datefield],
[btnsubmit,btnreset]
//窗体
varwin=newExt.Window（{
窗口'
476,
374,
div>
这里是窗体内容<
resizable:
modal:
closable:
minimizable:
buttonAlign:
center'
form
win.show（）;
（1）varnumberfield=newExt.form.NumberField（）:
创建一个新的NumberField数字文本框对象。
（2）99行，decimalPrecision:
1：
设置小数点后面的位数，当位数超过时系统会自动截断。
（3）100行，minValue:
0.01：
设置数字文本框最小值。
（4）101行，maxValue:
200:
设置最大值。
（5）102行，unitText:
：
注意，这个属性并非Extjs文本框自带的属性，因为我们要在“身高”的后面加上
单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"
unitText"
，并且在样式表中加了样式"
x-form-unit"
。
（6）varhiddenfield=newExt.form.Hidden（）：
创建一个新的Hidden对象，隐藏字段用作参数占位符，
一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：
用户ID等。
（7）109行，name:
Hidden对象的名称，这个名称是在服务端接收值的名称。
发送参数格式如下：
userid:
1。
（8）110行，value:
发送的值。
（9）vardatefield=newExt.form.DateField（）：
创建一个新的Datefield日期对象,Extjs的日期为英文类型，
所以要加入翻译成中文的js，代码第8行位置。
（10）116行，format:
日期格式。
（11）117行，editable:
false：
设置为不可编辑。
54:
49
140,
80,
//----------------------单选组开始----------------------//
varradiogroup=newExt.form.RadioGroup（{
性别'
100,
sex'
inputValue:
boxLabel:
男'
checked:
true
女'
//获取单选组的值
radiogroup.on（'
change'
function（rdgroup,checked）{
alert（checked.getRawValue（））;
//----------------------单选组结束----------------------//
//----------------------复选组开始----------------------//
varcheckboxgroup=newExt.form.CheckboxGroup（{
兴趣爱好'
170,
看书'
上网'
听音乐'
2'
//获取复选组的值
checkboxgroup.on（'
function（cbgroup,checked）{
for（vari=0;
i<
checked.length;
i++）{
alert（checked[i].getRawValue（））;
//----------------------复选组结束----------------------//
[txtusername,txtpassword,numberfield,hiddenfield,datefield,radiogroup,checkboxgroup],
（1）varradiogroup=newExt.form.RadioGroup（）:
创建一个新的单选按钮组。
（2）name:
单选按钮组是按照name属性来区分的，同一组中的单选按钮才能单选，
如果name属性设置错误，该按钮将会被认为是其他组。
（3）inputValue:
选择框的值。
（4）boxLabel:
选择框后面的文字说明。
（5）checked.getRawValue（）：
获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，
而复选框可以多选，所以要循环取出。
14:
metaht
升级会员 