ExtJS20開(kāi)發(fā)與實(shí)踐筆記-ExtJS中的Dialog與Form_第1頁(yè)
ExtJS20開(kāi)發(fā)與實(shí)踐筆記-ExtJS中的Dialog與Form_第2頁(yè)
ExtJS20開(kāi)發(fā)與實(shí)踐筆記-ExtJS中的Dialog與Form_第3頁(yè)
ExtJS20開(kāi)發(fā)與實(shí)踐筆記-ExtJS中的Dialog與Form_第4頁(yè)
ExtJS20開(kāi)發(fā)與實(shí)踐筆記-ExtJS中的Dialog與Form_第5頁(yè)
已閱讀5頁(yè)，還剩4頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

ExtJS2.0中提供了一整套的web表示層UI解決方案，令我們可以非常輕易的實(shí)現(xiàn)平時(shí)較為復(fù)雜的javascript操作，在此我以表示層開(kāi)發(fā)中使用較多的Dialog與Form功能進(jìn)行一次ExtJS2.0的實(shí)現(xiàn)演示。ExtJS2.0的配置及運(yùn)行方式請(qǐng)參閱ExtJS2.0開(kāi)發(fā)與實(shí)踐筆記[0]-初識(shí)ExtJSDialogExt.js(此中包含了ExtJS的確定，分支選擇，進(jìn)度條，輸入框等四個(gè)應(yīng)用實(shí)例)曰田/****/日國(guó)varDialogExt二function(){白中/***追蹤輸出*@param(Object}str卜 */白中 vartrace二function(str)(//在ExtJS2.0中，log由Ext統(tǒng)一調(diào)度Ext.log(str);}；I //設(shè)置Ext.Button別名為ButtonI varButton=Ext.Button;I //設(shè)置Ext.MessageBox別名為MessageBoxI varMessageBox=Ext.MessageBox;//變量設(shè)置，用于保存DialogExt自身及當(dāng)中鍵鈕I var root;I var btn0;I var btnl;I var btn2;I var btn3;〃返回操作return(〃初始化函數(shù)init:function()(I 〃設(shè)定root等于thisroot=this;I 〃生成Ext按鈕，綁定數(shù)據(jù)到Element，renderTo為綁定的按鈕名，text為輸出內(nèi)容白由 btn0二new Button((renderTo:'a',text:'確定選項(xiàng)'});btn1=newButton((renderTo:'b',text:'yes/no選項(xiàng)'});白中 btn2=new Button((renderTo:'c',text:'輸入框選項(xiàng)'});百由 btn3=new Button((renderTo:'d',text:'進(jìn)度條選項(xiàng)'});〃確定選項(xiàng)白由 btn0.on('click',function。(MessageBox.alert('消息框'，'Ext很簡(jiǎn)單?！?，I root.onResult);});//yes/no選項(xiàng)攤 btn1.on('click',function(evt)(MessageBox.confirm('提問(wèn)’，'Ext是否很容易掌握？',I root.onResult);});〃輸入框選項(xiàng)白中 btn2.on('click',function(evt)(MessageBmpt('輸入框'，'輸入內(nèi)容：’，I root.onResult);});〃進(jìn)度條選項(xiàng)白由 btn3.on('click',function。(〃生成進(jìn)度條，分別設(shè)定了標(biāo)題，信息，寬，是否自動(dòng)前進(jìn)進(jìn)度，是否自動(dòng)關(guān)閉進(jìn)度5項(xiàng)攤 MessageBox.show({title:'進(jìn)度條'，msg:'初始化中???’，I width:240,I progress:true,I closable:false});//進(jìn)度條定時(shí)處理日申 varf=function(v)(R申 returnfunction()(白中 if(v<=10)(MessageBox.updateProgress(v/10,'讀取進(jìn)度'+v+'/10');百由 }else(〃隱藏Ext消息框I MessageBox.hide();}}；}；〃進(jìn)度條時(shí)間設(shè)定白由 for(vari=1;i<=11;i++)(I setTimeout(f(i),i*1000);}});},〃當(dāng)前操作對(duì)象輸出白中 onResult:function(button,text){I trace("點(diǎn)擊按鈕：〃+button+〃輸出文本：〃+text);}};}();//設(shè)定onReady,Ext將在dom加載完畢后自動(dòng)調(diào)用其中操作Ext.onReady(DialogExt.init,DialogExt,true);Dialog.html<html><head><metahttp-equiv=〃Content-Type"content=〃text/html;charset=UTF-8"><title>DialogExt</title><!--加載ExtJs資源[當(dāng)調(diào)用Ext.log調(diào)試時(shí)，需要使用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><!--設(shè)置Element，以供DialogExt.js調(diào)用--><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應(yīng)用實(shí)例，在此我演示了Ext中簡(jiǎn)單的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;〃變量設(shè)置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,//數(shù)據(jù)提交地址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 〃驗(yàn)證類(lèi)型為emailI vtype :'email',I width :175});II 〃將TextField加載入formI form.add(textField0,textField1,textField2,textField3);

〃生成按鈕form.addButton('保存'，function(){MessageBox.alertC消息框'，’保存數(shù)據(jù)’)});form.addButton('取消’，function()(卜 MessageBox.alertC消息框'，’取消操作')});I 〃將form內(nèi)容實(shí)施到名稱(chēng)為frmExt的div上I form.render('frmExt');}};I}();//設(shè)定onReady,Ext將在dom加載完畢后自動(dòng)調(diào)用其中操作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. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論