经过两天的测试，发现了不少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不难，制作标签也不难，但是需要开发一套经过测试完整的标签却是很巨大的工程，需要长时间的投入和大量的工作。其实说白了就是需要一个坚持的动力吧。