ExtJS5学习笔记

2015年6月7日16:18:08htmlheadtitleHelloExtjs5/titlelinkrel=stylesheettype=text/csshref=ext-theme-neptune/build/resources/ext-theme-neptune-all.cssscripttype=text/javascriptsrc=ext-all.js/scriptscripttype=text/javascriptsrc=ext-theme-neptune/build/ext-theme-neptune.js/script/headbodyscriptExt.onReady(function(){Ext.MessageBox.alert('标题','HelloWorld!');});/script/body/html说明：(1)Ext.onReady():ExtJSApplication的入口...就相当于Java或C#的main函数.(2)Ext.MessageBox.alert()：弹出对话框。2015年6月7日16:22:40htmlheadtitleHelloExtjs5/titlelinkrel=stylesheettype=text/csshref=ext-theme-neptune/build/resources/ext-theme-neptune-all.cssscripttype=text/javascriptsrc=ext-all.js/scriptscripttype=text/javascriptsrc=ext-theme-neptune/build/ext-theme-neptune.js/scriptstyletype=text/css.x-form-unit{height:22px;line-height:22px;padding-left:2px;display:inline-block;display:inline;}/style!--scripttype=text/javascriptsrc=hellowword.js/script--/headbodyscriptExt.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:false,vtype:'email',x:5,y:5,name:'to',anchor:'-5'//anchorwidthbyrightoffset},{fieldLabel:'Subject',fieldWidth:60,x:5,y:35,name:'subject',anchor:'-5'//anchorwidthbyrightoffset},{x:5,y:65,xtype:'textarea',style:'margin:0',hideLabel:true,name:'msg',anchor:'-5-5'//anchorbyrightanfbottomoffset}]});varwin=Ext.create('Ext.window.Window',{autoShow:true,title:'ResizeMe',width:500,height:300,minWidth:300,minHeight:200,layout:'fit',plain:true,items:form,maximizable:true,minimizable:true,listeners:{minimize:function(win,opts){win.collapse();}},buttons:[{text:'Send'},{text:'Cancel'}]});});/script/body/html2015年6月7日15:52:55htmlheadtitleHelloExtjs5/titlelinkrel=stylesheettype=text/csshref=ext-theme-neptune/build/resources/ext-theme-neptune-all.cssscripttype=text/javascriptsrc=ext-all.js/scriptscripttype=text/javascriptsrc=ext-theme-neptune/build/ext-theme-neptune.js/script!--scripttype=text/javascriptsrc=hellowword.js/script--/headbodyscriptExt.onReady(function(){//初始化标签中的Ext:Qtip属性。Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget='side';//提交按钮处理方法varbtnsubmitclick=function(){Ext.MessageBox.alert('提示','你点了确定按钮!');}//重置按钮点击时处理方法varbtnresetclick=function(){Ext.MessageBox.alert('提示','你点了重置按钮!');}//重置按钮鼠标悬停处理方法varbtnresetmouseover=function(){Ext.MessageBox.alert('提示','你鼠标悬停在重置按钮之上!');}//提交按钮varbtnsubmit=newExt.Button({text:'提交',handler:btnsubmitclick});//重置按钮varbtnreset=newExt.Button({text:'重置',listeners:{'mouseover':btnresetmouseover,'click':btnresetclick}});//用户名inputvartxtusername=newExt.form.TextField({width:340,allowBlank:false,maxLength:20,name:'username',fieldLabel:'用户名称',blankText:'请输入用户名',maxLengthText:'用户名不能超过20个字符'});//密码inputvartxtpassword=newExt.form.TextField({width:340,allowBlank:false,maxLength:20,inputType:'password',name:'password',fieldLabel:'密码',blankText:'请输入密码',maxLengthText:'密码不能超过20个字符'});//----------------------数字字段开始----------------------//varnumberfield=newExt.form.NumberField({fieldLabel:'身高',width:380,decimalPrecision:1,minValue:0.01,maxValue:200,unitText:'cm',allowBlank:false,blankText:'请输入身高'});//----------------------数字字段结束----------------------////----------------------隐藏域字段开始----------------------//varhiddenfield=newExt.form.Hidden({name:'userid',value:'1'});//----------------------隐藏域字段结束----------------------////----------------------日期字段开始----------------------//vardatefield=newExt.form.DateField({fieldLabel:'出生日期',format:'Y-m-d',editable:false,allowBlank:false,blankText:'请选择日期'});//----------------------日期字段结束----------------------////表单varform=newExt.form.FormPanel({frame:true,title:'表单标题',style:'margin:10px',html:'divstyle=padding:10px这里表单内容/div',items:[txtusername,txtpassword,numberfield,hiddenfield,datefield],buttons:[btnsubmit,btnreset]});//窗体varwin=newExt.Window({title:'窗口',width:476,height:374,html:'div这里是窗体内容/div',resizable:true,modal:true,closable:true,maximizable:true,minimizable:true,buttonAlign:'center',items:form});win.show();});/script/body/html说明：(1)varnumberfield=newExt.form.NumberField():创建一个新的NumberField数字文本框对象。(2)99行，decimalPrecision:1：设置小数点后面的位数，当位数超过时系统会自动截断。(3)100行，minValue:0.01：设置数字文本框最小值。(4)101行，maxValue:200:设置最大值。(5)102行，unitText:'cm'：注意，这个属性并非Extjs文本框自带的属性，因为我们要在“身高”的后面加上单位，所以在23行---43行对文本框进行了重写，重写时添加了属性unitText，并且在样式表中加了样式x-form-unit。(6)varhiddenfield=newExt.form.Hidden()：创建一个新的Hidden对象，隐藏字段用作参数占位符，一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。(7)109行，name:'userid'：Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。(8)110行，value:'1'：发送的值。(9)vardatefield=newExt.form.DateField()：创建一个新的Datefield日期对象,Extjs的日期为英文类型，所以要加入翻译成中文的js，代码第8行位置。(10)116行，format:'Y-m-d'：日期格式。(11)117行，editable:false：设置为不可编辑。2015年6月7日15:54:49htmlheadtitleHelloExtjs5/titlelinkrel=stylesheettype=tex