java程式員菜鳥進階（十）Extjs4常用功能（一）——extjs開發環境的配置和表單的使用

           好久沒有寫系列博文了，突然感覺有點生疏了。最近忙於畢業的有關事宜，加上也算是參加了工作，雖然是跟著老師，但也算是正式進入開發的行列，最近忙於某銀行的一個項目，用了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:'負責人',name:'institution.manager',value:'${institution.manager}'},              {fieldLabel:'聯絡電話',name:'institution.phone',value:'${institution.phone}'}           ]           });

我參加了大學生IT部落格大賽，希望有51CTO帳號的童鞋多多支援：http://blog.51cto.com/contest/college2013/3545281。