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

提交評論