沉睡森林@漂在北京

本处文章除注明“转载”外均为原创,转载请注明出处。

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  152 随笔 :: 4 文章 :: 114 评论 :: 0 Trackbacks

经过两天的测试,发现了不少tags的问题,但是还好,都被解决了。下面贴一点成果出来,很简陋,但是还是可以解决简单的问题的。下面的是在jsp里面写的tags代码,相当的简单。

<%@ 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>

 

下面是经过解析后生成的html页面

 

<html>

<head>

<link rel="stylesheet" type="text/css" href="http://127.0.0.1:8080/greatwall/script/ext/resources/css/ext-all.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>

 

代码引用了一个greatwall-form.js文件,具体的内容如下:

/**

 * 提交制定的表单

 * @param {String} formName 需要提交的表单名称

 */

function submitForm(formName) {

       if (!formName) {

              Ext.Msg.alert('错误', '传入的表单名称错误!');

              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() {

                     }

              });

       }

}

 

/**

 * 重置表单数据

 * @param {String} formName 需要重置的表单名称

 */

function resetForm(formName){

       if (!formName) {

              Ext.Msg.alert('错误', '传入的表单名称错误!');

              return;

       }

       var formPanel = Ext.getCmp(formName);     

       if(formPanel.form){

              formPanel.form.reset();

       }else{

              Ext.Msg.alert('错误', '传入的表单名称不存在!');

       }

}

 

/**

 * 利用表单域名称获取表单域的值,名称错误或者不存在该表单域时返回null

 * @param {String} fieldName 表单域名称

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

 */

function getFormFieldValue(fieldName) {

       if (!fieldName) {

              Ext.Msg.alert('错误', '传入的表单域名称错误!');

              return null;

       }

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

              Ext.Msg.alert('错误', '传入的表单域不存在!');

              return null;

       }

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

}

 

页面最终打开的效果就不多说了,利用第二段代码就可以看到效果了。还是比较高兴的,对ext的运用提高了不少。下一步需要开始制作grid还有layout了。个人感觉ext不难,制作标签也不难,但是需要开发一套经过测试完整的标签却是很巨大的工程,需要长时间的投入和大量的工作。其实说白了就是需要一个坚持的动力吧。

posted on 2008-11-14 16:11 王总兵 阅读(796) 评论(1)  编辑  收藏 所属分类: Ext

评论

# re: Ext标签开发整理 2009-06-26 17:38 kanful
我们公司已经完了了对ext的封装,不只是grid layout,还有很多,几乎能用的。有兴趣,联系49415958.  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: