ExtJS20开发与实践笔记-ExtJS中的Dialog与Form_第1页
ExtJS20开发与实践笔记-ExtJS中的Dialog与Form_第2页
ExtJS20开发与实践笔记-ExtJS中的Dialog与Form_第3页
ExtJS20开发与实践笔记-ExtJS中的Dialog与Form_第4页
ExtJS20开发与实践笔记-ExtJS中的Dialog与Form_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

ExtJS2.0中提供了一整套的web表示层UI解决方案，令我们可以非常轻易的实现平时较为复杂的javascript操作，在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。ExtJS2.0的配置及运行方式请参阅ExtJS2.0开发与实践笔记[0]-初识ExtJSDialogExt.js(此中包含了ExtJS的确定，分支选择，进度条，输入框等四个应用实例)曰田/****/日国varDialogExt二function(){白中/***追踪输出*@param(Object}str卜 */白中 vartrace二function(str)(//在ExtJS2.0中，log由Ext统一调度Ext.log(str);}；I //设置Ext.Button别名为ButtonI varButton=Ext.Button;I //设置Ext.MessageBox别名为MessageBoxI varMessageBox=Ext.MessageBox;//变量设置，用于保存DialogExt自身及当中键钮I var root;I var btn0;I var btnl;I var btn2;I var btn3;〃返回操作return(〃初始化函数init:function()(I 〃设定root等于thisroot=this;I 〃生成Ext按钮，绑定数据到Element，renderTo为绑定的按钮名，text为输出内容白由 btn0二new Button((renderTo:'a',text:'确定选项'});btn1=newButton((renderTo:'b',text:'yes/no选项'});白中 btn2=new Button((renderTo:'c',text:'输入框选项'});百由 btn3=new Button((renderTo:'d',text:'进度条选项'});〃确定选项白由 btn0.on('click',function。(MessageBox.alert('消息框'，'Ext很简单。’，I root.onResult);});//yes/no选项摊 btn1.on('click',function(evt)(MessageBox.confirm('提问’，'Ext是否很容易掌握？',I root.onResult);});〃输入框选项白中 btn2.on('click',function(evt)(MessageBmpt('输入框'，'输入内容：’，I root.onResult);});〃进度条选项白由 btn3.on('click',function。(〃生成进度条，分别设定了标题，信息，宽，是否自动前进进度，是否自动关闭进度5项摊 MessageBox.show({title:'进度条'，msg:'初始化中•••’，I width:240,I progress:true,I closable:false});//进度条定时处理日申 varf=function(v)(R申 returnfunction()(白中 if(v<=10)(MessageBox.updateProgress(v/10,'读取进度'+v+'/10');百由 }else(〃隐藏Ext消息框I MessageBox.hide();}}；}；〃进度条时间设定白由 for(vari=1;i<=11;i++)(I setTimeout(f(i),i*1000);}});},〃当前操作对象输出白中 onResult:function(button,text){I trace("点击按钮：〃+button+〃输出文本：〃+text);}};}();//设定onReady,Ext将在dom加载完毕后自动调用其中操作Ext.onReady(DialogExt.init,DialogExt,true);Dialog.html<html><head><metahttp-equiv=〃Content-Type"content=〃text/html;charset=UTF-8"><title>DialogExt</title><!--加载ExtJs资源[当调用Ext.log调试时，需要使用debug方式的js]--><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="adapter/ext/ext-base.js"></script><scripttype="text/javascript"src="ext-all-debug.js"></script><!--加载我的js文件--><scripttype="text/javascript"src="DialogExt.js"></script></head><body><!--设置Element，以供DialogExt.js调用--><tablecellspacing="5"><tr><td><divid="a"></div></td><td><divid="b"></div></td><td><divid="c"></div></td><td><divid=〃d〃></div></td></tr></table></body></html>效果图如下:form应用实例，在此我演示了Ext中简单的Form生成方式。FormExt.js曰田FormExt二function(){vartrace二function(str){Ext.log(str);};I//1.1版为Ext.form.FormI var Form二Ext.form.FormPanel;I var MessageBox=Ext.MessageBox;I var TextField=Ext.form.TextField;〃变量设置I var root;I var form;I var textField0;I var textField1;I var textField2;vartextField3;return(I //初始化FormExtinit:function()(root=this;〃生成窗体form=newForm((〃样式baseCls:'x-plain',I //label宽labelWidth:75,//数据提交地址I url:'save.jspa'});〃生成TextField百中 textField0二newTextField((I fieldLabel:'姓名'，name:'name',I width:175,allowBlank:false});百中 textField1二newTextField((I fieldLabel:'地址'，name:'address',I width:175});白由 textField2二newTextField((I fieldLabel:'年苗令'，name:'age',I width:175});百中 textField3二newTextField((fieldLabel:'email',name:'email',I 〃验证类型为emailI vtype :'email',I width :175});II 〃将TextField加载入formI form.add(textField0,textField1,textField2,textField3);

〃生成按钮form.addButton('保存'，function(){MessageBox.alertC消息框'，’保存数据’)});form.addButton('取消’，function()(卜 MessageBox.alertC消息框'，’取消操作')});I 〃将form内容实施到名称为frmExt的div上I form.render('frmExt');}};I}();//设定onReady,Ext将在dom加载完毕后自动调用其中操作Ext.onReady(FormExt.init,FormExt,true);FormExt.html<html><headFormExt.html<html><head><metahttp-equiv=〃Content-Type"content=〃text/html;charset=UTF-8"><title>FormExt</title><!--ExtJS资源引入--><linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"script><scripttype="text/javascript"<!--我的js文件--><scripttype="text/javascript"</head><body><!--frame--><divstyle="width:300px;"><divclass="x-box-tl"><divox-tc"></div></div></div><divclass="x-box-ml"><divox-mc">src=〃adapter/ext/ext-base.js〃></src=〃ext-all-debug.js〃></script>src=〃FormExt.js〃></script>class=〃x-box-tr〃><divclass=〃x-bclass=〃x-box-mr〃><divclass=〃x-b<h3style=〃margin-bottom:5px;〃>Ext的form</h3><divid=〃frmExt〃></div></div></div></div><divclass=〃x-box-bl〃><divclass=〃x-box-b

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论