經過兩天的測試，發現了不少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"
/>
<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不難，制作標簽也不難，但是需要開發一套經過測試完整的標簽卻是很巨大的工程，需要長時間的投入和大量的工作。其實說白了就是需要一個堅持的動力吧。