好久沒有寫系列博文了，突然感覺有點生疏了。最近忙於畢業的有關事宜，加上也算是參加了工作，雖然是跟着老師，但也算是正式進入開發的行列，最近忙於某銀行的一個項目，用了EXTJS，由於項目催的比較緊，所以也沒有時間去系統的學習它，只能是邊學邊用了。Extjs這東西給我的感覺，在功能和UI上確實都很強大，作出的界面比自己寫html+css+js要好看的多。但用了一段時間之後不得不讓我吐槽，太難用了，一些配置太繁瑣，很多東西都很零碎，但沒辦法，誰讓人家功能強大，所以也藉此機會總結一些它常用的功能，方便以後使用和新入門的童鞋查看。首先今天爲大家帶來的是extjs開發環境的配置和表單的使用。這裏主要是以java web開發環境配置爲主。
1.首先到官網下載相關文件：http://www.sencha.com/products/extjs
2.解壓後把全部文件添加到webroot文件夾下，其實可以只加有關文件，具體加哪些，自己google。
3.引入ExtJs的樣式文件
<link type="text/css" rel="Stylesheet" href="extjs/resources/css/ext-all.css" />
引入ExtJs的框架文件，該文件方便調試，在實際應用中，直接引用ext-all.js文件-->
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
4.下載下來的文件中有幫助文檔，extjs的幫助文檔非常好用，很多功能都有現成的實例，你也可以訪問官網上的文檔來查看：http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/api
OK，這樣，就算是搭建好了extjs4的開發環境了。貌似很簡單哈。下面我們就來看一下表單的寫法。詳解全在註釋裏面，自己看啦。
var myForm = Ext.create('Ext.form.Panel',{
//創建一個toolbar，這裏主要是把保存按鈕（即爲提交表單按鈕）放在這裏
tbar:[ {
xtype:'button',
icon:'../images/save.gif',
text:'保存',
handler:function(){//註冊點擊保存按鈕觸發的事件
myForm.submit();//提交表單
}}
],
width:'100%',height:"100%",
defaultType:'textfield',//設置表單默認類型
bodyStyle:'padding:5px',
msgTarget:'side',
renderTo:Ext.getBody(),//把表單渲染到body裏面
standardSubmit:true,//設置表單爲標準提交
url:'InstitutionAction!saveOrUpdate',//設置表單提交地址
//items屬性裏面包含表單的所用控件
items:[
{
fieldLabel:'機構代碼',
name:'institution.id',
//設置不能爲空，如果此輸入框爲空時，表達那不能提交
allowBlank:false,
value:'${institution.id}',
readOnly:true//設置爲只讀
}},
{
fieldLabel:'機構名稱',
name:'institution.name',
allowBlank:false,
value:'${institution.name}'},
{
fieldLabel:'機構地址',
name:'institution.address',
allowBlank:false,
value:'${institution.address}'
},
{
fieldLabel:'負責人',n
ame:'institution.manager',
value:'${institution.manager}'
},
{
fieldLabel:'聯繫電話',
name:'institution.phone',
value:'${institution.phone}'
}
]
});