ext2.0笔记

1.ExtJS2.0开发与实践笔记[0]——初识ExtJS简短的前言：随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源JavascriptLibrary开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多或少的增加了我们的学习难度。为此，我准备在blog中逐步整理学习心得，已备查找需要及看客指正。什么是ExtJS?按照Ext开发团队的说法，ExtJS从应用角度上讲是一个用户界面库，而不是一个JavaScriptLibrary。原本作为Yahoo!UILibrary(也就是YUI)的扩展而被开发出来，但从1.1版本开始由于支持者的增多，已经得到了必要的扩充，不再依赖于YUI。ExtJS可以与prototype.js和jquery等成熟的js库一起使用，也可以作为单独的应用部署到开发中去，AdobeAIR与iPhone开发工具都提供了对Ext的支持。就我个人的观点而言，在业务处理上讲ExtJS2.0已非常完备，足以满足绝大多数web表示层应用的需求；但是对于解释执行的javascript来讲性能损耗问题却始终无法避免，因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。我们可以通过来获得最新版本的ext框架发展简史：YUI-Ext「Yahoo!UILibrary」的扩展。Ext1.0「Yahoo!UILibrary」的扩展，同时也支持prototype.js和jquery等。Ext1.1不再依赖「Yahoo!UILibrary」，能够不依赖任何第三方组件而单独使用。Ext2.0极大丰富界面库的一版，还在继续扩充中。如何开发ExtJS2.0应用？针对ExtJS2.0，由于其通过浏览器解释执行，所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件，也可以通过IDE进行调试开发。目前Eclipse上已经有很多能够支持ExtJS2.0的插件，如Spket等，此处不一一例举。ExtJS2.0的“HelloWorld”在Aptana中使用ExtJS2.0，我们至少需要ExtJS2.0中的如下文件：Adapter文件夹框架及外部资源适配器，我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局。Resources文件夹一个文件夹，包含了css,image等Ext必须的资源ext-all.js文件一个压缩的单文件ExtJS文件集合首先，我们在helloworld.js中建立如下内容查看复制到剪切板打印1.2./**3.*通过Ext输出HelloWorld,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用4.*Ext.onReady]5.*6.*@param{Object}''7.*@param{Object}'HelloWorld!'8.*/9.Ext.onReady(function(){10.//以Ext的alert打印'HelloWorld!'11.Ext.MessageBox.alert('','HelloWorld!');12.});而后，我们建立helloworld.html文件，内容如下查看复制到剪切板打印1.2.html3.head4.metahttp-equiv=Content-Typecontent=text/html;charset=utf-85.titleHelloExt/title6.!--ExtJS资源加载--7.linkrel=stylesheettype=text/csshref=resources/css/ext-all.css/8.scripttype=text/javascriptsrc=adapter/ext/ext-base.js/script9.scripttype=text/javascriptsrc=ext-all.js/script10.!--我的js文件--11.scripttype=text/javascriptsrc=helloworld.js/script12./head13.body14.ExtJS的HelloWorld测试15./body16./html输出运行效果如下图怎么样，超级简单，是人就会吧？下一回，我将针对ExtJS的特性开始做深入讲解2.ExtJS2.0开发与实践笔记[1]——ExtJS中的Dialog与FormExtJS2.0中提供了一整套的web表示层UI解决方案，令我们可以非常轻易的实现平时较为复杂的javascript操作，在此我以表示层开发中使用较多的Dialog与Form功能进行一次ExtJS2.0的实现演示。DialogExt.js(此中包含了ExtJS的确定，分支选择，进度条，输入框等四个应用实例)查看复制到剪切板打印1./**2.*3.*/4.varDialogExt=function(){5./**//**6.*追踪输出7.*@param{Object}str8.*/9.vartrace=function(str){10.//在ExtJS2.0中，log由Ext统一调度11.Ext.log(str);12.};13.//设置Ext.Button别名为Button14.varButton=Ext.Button;15.//设置Ext.MessageBox别名为MessageBox16.varMessageBox=Ext.MessageBox;17.18.//变量设置，用于保存DialogExt自身及当中键钮19.varroot;20.varbtn0;21.varbtn1;22.varbtn2;23.varbtn3;24.25.//返回操作26.return{27.//初始化函数28.init:function(){29.//设定root等于this30.root=this;31.//生成Ext按钮，绑定数据到Element，renderTo为绑定的按钮名，text为输出内容32.btn0=newButton({renderTo:'a',text:'确定选项'});33.btn1=newButton({renderTo:'b',text:'yes/no选项'});34.btn2=newButton({renderTo:'c',text:'输入框选项'});35.btn3=newButton({renderTo:'d',text:'进度条选项'});36.37.//确定选项38.btn0.on('click',function(){39.MessageBox.alert(40.'消息框',41.'Ext很简单。',42.root.onResult);43.});44.45.//yes/no选项46.btn1.on('click',function(evt){47.MessageBox.confirm(48.'提问',49.'Ext是否很容易掌握？',50.root.onResult);51.});52.53.//输入框选项54.btn2.on('click',function(evt){55.MessageBox.prompt(56.'输入框',57.'输入内容：',58.root.onResult);59.});60.61.//进度条选项62.btn3.on('click',function(){63.//生成进度条，分别设定了标题，信息，宽，是否自动前进进度，是否自动关闭进度5项64.MessageBox.show({65.title:'进度条',66.msg:'初始化中…',67.width:240,68.progress:true,69.closable:false70.});71.72.//进度条定时处理73.varf=function(v){74.returnfunction(){75.if(v=10){76.MessageBox.updateProgress(77.v/10,'读取进度'+v+'/10');78.}else{79.//隐藏Ext消息框80.MessageBox.hide();81.}82.};83.};84.//进度条时间设定85.for(vari=1;i=11;i++){86.setTimeout(f(i),i*1000);87.}88.});89.},90.//当前操作对象输出91.onResult:function(button,text){92.trace(点击按钮:+button+输出文本:+text);93.}94.};95.}();96.//设定onReady,Ext将在dom加载完毕后自动调用其中操作97.Ext.onReady(DialogExt.init,DialogExt,true);Dialog.html查看复制到剪切板打印1.2.html3.head4.metahttp-equiv=Content-Typecontent=text/html;charset=UTF-85.titleDialogExt/title6.!--加载ExtJs资源[当调用Ext.log调试时，需要使用debug方式的js]--7.linkrel=stylesheettype=text/csshref=resources/css/ext-all.css/8.scripttype=text/javascriptsrc=adapter/ext/ext-base.js/script9.scripttype=text/javascriptsrc=ext-all-debug.js/script10.!--加载我的js文件--11.scripttype=text/javascriptsrc=DialogExt.js/script12./head13.body14.!--设置Element，以供DialogExt.js调用--15.tablecellspacing=516.tr17.tddivid=a/div/td18.tddivid=b/div/td19.tddivid=c/div/td20.tddivid=d/div/td21./tr22./table23./body24./html效果图如下：form应用实例，在此我演示了Ext中简单的Form生成方式。查看复制到剪切板打印1.2.FormExt=function(){3.vartrace=function(str){4.Ext.log(str);5.};6.//1.1版为Ext.form.Form7.varForm=Ext.form.FormPanel;8.varMessageBox=Ext.MessageBox;9.varTextField=Ext.form.TextField;10.//变量设置11.varroot;12.varform;13.vartextField0;14.vartextField1;15.vartextField2;16.vartextField3;17.return{18.//初始化FormExt19.init:function(){20.root=this;21.//生成窗体22.form=newForm({23.//样式24.baseCls:'x-plain',25.//label宽26.labelWidth:75,27.//数据提交地址28.url:'save.jspa'29.});30.//生成TextField31.textField0=newTextField({32.fieldLabe