沉睡森林@漂在北京

          本處文章除注明“轉(zhuǎn)載”外均為原創(chuàng),轉(zhuǎn)載請(qǐng)注明出處。

            BlogJava :: 首頁(yè) :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            152 隨筆 :: 4 文章 :: 114 評(píng)論 :: 0 Trackbacks

          經(jīng)過(guò)兩天的測(cè)試,發(fā)現(xiàn)了不少tags的問(wèn)題,但是還好,都被解決了。下面貼一點(diǎn)成果出來(lái),很簡(jiǎn)陋,但是還是可以解決簡(jiǎn)單的問(wèn)題的。下面的是在jsp里面寫的tags代碼,相當(dāng)?shù)暮?jiǎn)單。

          <%@ page contentType="text/html;charset=UTF-8" %>

          <%@ taglib uri="/WEB-INF/greatwall.tld" prefix="w" %>

           

          <w:html>

          <w:head>

          <w:title>Example of Form Demo</w:title>

          </w:head>

          <w:body>

          <w:form name="testForm" title="testForm" url="txn990051.do" method="post" >

                 <w:text  name="username" fieldLabel="username"  allowBlank="false"     />

                 <w:text  name="email" fieldLabel="email"     />

                 <w:text  name="qq" fieldLabel="qq"    />

                 <w:text  name="msn" fieldLabel="msn"   />

                 <w:submit />

                 <w:reset />

          </w:form>

          </w:body>

          </w:html>

           

          下面是經(jīng)過(guò)解析后生成的html頁(yè)面

           

          <html>

          <head>

          <link rel="stylesheet" type="text/css" />

          <script type="text/javascript" src="http://127.0.0.1:8080/greatwall/script/ext/ext-base.js"></script>

          <script type="text/javascript" src="http://127.0.0.1:8080/greatwall/script/ext/ext-all.js"></script>

          <script type="text/javascript" src="http://127.0.0.1:8080/greatwall/script/ext/ext-lang-zh_CN.js"></script>

          <script type="text/javascript" src="http://127.0.0.1:8080/greatwall/script/greatwall-form.js"></script>

          <title>Example of Form Demo</title>

          </head>

          <script>

          </script>

          <body>

          <script>

          Ext.BLANK_IMAGE_URL = 'http://127.0.0.1:8080/greatwall/script/ext/resources/images/default/s.gif';

          var _bodyWidth = Ext.getBody().getWidth()-12;

          Ext.onReady(function(){

                 Ext.QuickTips.init();

                 Ext.form.Field.prototype.msgTarget = 'qtip';

                 var testForm = new Ext.FormPanel({name:'testForm',id:'testForm',layout:'table',style:'height:100%',width:_bodyWidth+12,layoutConfig: {columns:4},defaults:{border:false,layout:'form',frame:false,labelAlign:'right',labelWidth:75,width:_bodyWidth/2,height:30}, method:'post',url:'txn990051.do',title:'testForm',frame:true});

                 testForm.addButton({text:'確定',handler:function(){submitForm('testForm')}});

                 testForm.addButton({text:'重置',handler:function(){resetForm('testForm')}});

                 testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'username',allowBlank:false,name:'username',anchor:"100%"}});

                 testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'email',name:'email',anchor:"100%"}});

                 testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'qq',name:'qq',anchor:"100%"}});

                 testForm.add({colspan:2,width:_bodyWidth/2.0,items:{xtype:'textfield',fieldLabel:'msn',name:'msn',anchor:"100%"}});

                 testForm.render(Ext.getBody());

          });

          </script>

          </body>

          </html>

           

          代碼引用了一個(gè)greatwall-form.js文件,具體的內(nèi)容如下:

          /**

           * 提交制定的表單

           * @param {String} formName 需要提交的表單名稱

           */

          function submitForm(formName) {

                 if (!formName) {

                        Ext.Msg.alert('錯(cuò)誤', '傳入的表單名稱錯(cuò)誤!');

                        return;

                 }

                 var formPanel = Ext.getCmp(formName);

                 if (formPanel.form.isValid()) {

                        formPanel.form.doAction("submit", {

                               method : formPanel.form.method,

                               url : formPanel.form.url,

                               params : formPanel,

                               success : function() {

                               },

                               failure : function() {

                               }

                        });

                 }

          }

           

          /**

           * 重置表單數(shù)據(jù)

           * @param {String} formName 需要重置的表單名稱

           */

          function resetForm(formName){

                 if (!formName) {

                        Ext.Msg.alert('錯(cuò)誤', '傳入的表單名稱錯(cuò)誤!');

                        return;

                 }

                 var formPanel = Ext.getCmp(formName);     

                 if(formPanel.form){

                        formPanel.form.reset();

                 }else{

                        Ext.Msg.alert('錯(cuò)誤', '傳入的表單名稱不存在!');

                 }

          }

           

          /**

           * 利用表單域名稱獲取表單域的值,名稱錯(cuò)誤或者不存在該表單域時(shí)返回null。

           * @param {String} fieldName 表單域名稱

           * @return {String} 返回表單域的值

           */

          function getFormFieldValue(fieldName) {

                 if (!fieldName) {

                        Ext.Msg.alert('錯(cuò)誤', '傳入的表單域名稱錯(cuò)誤!');

                        return null;

                 }

                 if (Ext.getCmp(fieldName) == null) {

                        Ext.Msg.alert('錯(cuò)誤', '傳入的表單域不存在!');

                        return null;

                 }

                 return Ext.getCmp(fieldName).getValue();

          }

           

          頁(yè)面最終打開的效果就不多說(shuō)了,利用第二段代碼就可以看到效果了。還是比較高興的,對(duì)ext的運(yùn)用提高了不少。下一步需要開始制作grid還有layout了。個(gè)人感覺(jué)ext不難,制作標(biāo)簽也不難,但是需要開發(fā)一套經(jīng)過(guò)測(cè)試完整的標(biāo)簽卻是很巨大的工程,需要長(zhǎng)時(shí)間的投入和大量的工作。其實(shí)說(shuō)白了就是需要一個(gè)堅(jiān)持的動(dòng)力吧。

          posted on 2008-11-14 16:11 王總兵 閱讀(852) 評(píng)論(1)  編輯  收藏 所屬分類: Ext

          評(píng)論

          # re: Ext標(biāo)簽開發(fā)整理 2009-06-26 17:38 kanful
          我們公司已經(jīng)完了了對(duì)ext的封裝,不只是grid layout,還有很多,幾乎能用的。有興趣,聯(lián)系49415958.  回復(fù)  更多評(píng)論
            

          主站蜘蛛池模板: 瑞丽市| 淮南市| 溆浦县| 五大连池市| 彰武县| 荣昌县| 沧州市| 景德镇市| 宁乡县| 丹东市| 海门市| 清原| 连城县| 莲花县| 石城县| 北辰区| 涿鹿县| 乌兰县| 榕江县| 贵定县| 武鸣县| 大田县| 鄯善县| 新建县| 两当县| 鲁山县| 沧源| 红安县| 河间市| 金华市| 县级市| 阿城市| 平度市| 大英县| 萨迦县| 山东| 仙游县| 仙居县| 黄梅县| 苍山县| 景洪市|