extjs4.1.1 formPanel 布局

標籤：style   http   java   使用   os   io   檔案   資料   

我們先來看看前台JS：

Ext.onReady(function() {

Ext.QuickTips.init();// 浮動資訊提示

Ext.form.Field.prototype.msgTarget = ‘side‘;// 設定控制項的錯誤資訊顯示位置，主要可選的位置有：qtip,title,under,side,[elementId]

Ext.BLANK_IMAGE_URL = ‘resources/images/default/s.gif‘;// 替換圖片檔案地址為本地

var simpleForm = new Ext.FormPanel({

renderTo : document.body,

labelAlign : ‘left‘,

title : ‘表單例子‘,

buttonAlign : ‘right‘,

bodyStyle : ‘padding:5px‘,

width : 600,

frame : true,

labelWidth : 80,

items : [{

layout : ‘column‘,// columnlayout

border : false,// 沒有邊框

labelSeparator : ‘：‘,// 標題的分隔字元號我們用中文冒號代替英文的冒號（labelSeparator:‘：‘）。

// coulmnLayout裡的控制項將定義在items裡

items : [{

columnWidth : .5,// 設定了該列的寬度佔總寬度的50%（columnWidth:.5）

layout : ‘form‘,// formlayout用來放置控制項

border : false,// 沒有邊框

items : [{

xtype : ‘textfield‘,// 在formlayout裡有一個類型為textfield‘（xtype:‘textfield‘）的輸入控制項

fieldLabel : ‘姓名‘,// 控制項標題為姓名

name : ‘name‘,// 輸入框（input）的name屬性設定“name”

anchor : ‘90%‘// 輸入框的長度為列寬減去標題的寬度後的90%（anchor:‘90%‘），餘下的10%的是給顯示錯誤資訊表徵圖用的。

}]

}, {

columnWidth : .25,// 在加入性別的radio控制項時就要注意了，這裡需要加入兩個radio，第一radio是有標題的，第二是沒有的，而且兩個radio加起來的寬度應該正好是餘下的列寬（50%）

layout : ‘form‘,

border : false,

items : [{

style : ‘margin-top:5px‘,// 設定一個css屬性，頂部的外補丁為5px（style:‘margin-top:5px‘），原因是為了選擇按鈕和標題對齊，大家可以將該屬性去掉然後看看效果。

xtype : ‘radio‘,// Formlayout裡加入了一個類型為radio的控制項

fieldLabel : ‘性別‘,// 控制項的標題是性別

boxLabel : ‘男‘,// 控制項的選擇顯示文本是男

name : ‘sex‘,// input的name屬性值是sex

checked : true,// 該控制項預設是已選的

inputValue : ‘男‘,// 控制項的值（value）是男

anchor : ‘95%‘// input的寬度是95%

}]

}, {

columnWidth : .25,// 我們已經設定了3列，3列的列寬分別為50%、25%、25%

layout : ‘form‘,

labelWidth : 0,// 標題的寬度設定為0

labelSeparator : ‘‘,// 標題分隔字元號為空白

hideLabels : true,// 第二個raido控制項的列設定就有所不同，因為它不需要標題，所以要設定隱藏標題

border : false,

items : [{

style : ‘margin-top:5px‘,

xtype : ‘radio‘,

fieldLabel : ‘‘,

boxLabel : ‘女‘,

name : ‘sex‘,

inputValue : ‘女‘,

anchor : ‘95%‘

}]

}]

}

// 上面是第一行,以下每行布局同上！

, {

layout : ‘column‘,

border : false,

labelSeparator : ‘：‘,

items : [{

columnWidth : .5,

layout : ‘form‘,

border : false,

items : [{

xtype : ‘datefield‘,// 控制項的類型為datefield

fieldLabel : ‘出生日期‘,

name : ‘birthday‘,

anchor : ‘90%‘

}]

}, {

columnWidth : .5,

layout : ‘form‘,

border : false,

items : [{

xtype : ‘combo‘,// 控制項的類型設定成combo

// 這裡定義了一個sotre屬性，就是選擇值儲存的地方，因為是在用戶端的資料，所以使用了一個簡單儲存（SimpleStore）。

store : new Ext.data.SimpleStore({

// 通過一個數組定義了returnValue和displayText兩個欄位。retrunValue欄位指定是提交給背景值，displayText欄位指定是在下拉中顯示的選擇值。

fields : ["returnValue", "displayText"],

// 定義了幾組資料.每組資料都是根據fiedls的定義來組成的，數組裡第一個值就是retrunValue的值，第二個值就是displayText的值，例如[1,‘小學‘]，就表示retrunValue是1，displayText是小學。

data : [[1, ‘小學‘], [2, ‘初中‘],

[3, ‘高中‘], [4, ‘中專‘],

[5, ‘大專‘], [6, ‘大學‘]]

}),

valueField : "returnValue",// 設定下拉選擇框的值

displayField : "displayText",// 設定下拉選擇框的顯示文本

mode : ‘local‘,// 資料是在本地

forceSelection : true,// 必須選擇一個選項

blankText : ‘請選擇學曆‘,// 提交form時，該項如果沒有選擇，則提示錯誤資訊"請選擇學曆"

emptyText : ‘選擇學曆‘,// 在沒有選擇值時顯示為選擇學曆

hiddenName : ‘education‘,// 大家要注意的是hiddenName和name屬性，name只是下拉式清單的名稱，作用是可通過，而hiddenName才是提交到背景input的name。如果沒有設定hiddenName，在後台是接收不到資料的，這個大家一定要注意。

editable : false,// 該下拉式清單只允許選擇，不允許輸入

triggerAction : ‘all‘,// 因為這個下拉是只能選擇的，所以一定要設定屬性triggerAction為all，不然當你選擇了某個選項後，你的下拉將只會出現匹配選項值文本的選擇項，其它選擇項是不會再顯示了，這樣你就不能更改其它選項了。

allowBlank : false,// 該選項值不允許為空白

fieldLabel : ‘學曆‘,// 控制項的標題是學曆

name : ‘education‘,// 再次提醒，name只是下拉式清單的名稱

anchor : ‘90%‘// input的寬度是90%

}]

}]

}

// 上面是第二行，下面我們要建立一個checkbox選項輸入。checkbox的設定和radio的設定大同小異，大家注意列寬的定義就行。

, {

layout : ‘column‘,

border : ‘false‘,

labelSeparator : ‘：‘,

items : [{

columnWidth : .35,

layout : ‘form‘,

border : false,

items : [{

xtype : ‘checkbox‘,

fieldLabel : ‘許可權組‘,

boxLabel : ‘系統管理員‘,

name : ‘popedom‘,

inputValue : ‘1‘,

anchor : ‘95%‘

}]

}, {

columnWidth : .2,

layout : ‘form‘,

labelWidth : 0,

labelSeparator : ‘‘,

hideLabels : true,

border : false,

items : [{

xtype : ‘checkbox‘,

fieldLabel : ‘‘,

boxLabel : ‘管理員‘,

name : ‘pepedom‘,

inputValue : ‘2‘,

anchor : ‘95%‘

}]

}, {

columnWidth : .2,

layout : ‘form‘,

labelWidth : 0,

labelSeparator : ‘‘,

hideLabels : true,

border : false,

items : [{

xtype : ‘checkbox‘,

fieldLabel : ‘‘,

boxLabel : ‘普通使用者‘,

name : ‘pepedom‘,

inputValue : ‘3‘,

anchor : ‘95%‘

}]

}, {

columnWidth : .25,

layout : ‘form‘,

labelWidth : 0,

labelSeparator : ‘‘,

hideLabels : true,

border : false,

items : [{

xtype : ‘checkbox‘,

fieldLabel : ‘‘,

boxLabel : ‘訪客‘,

name : ‘pepedom‘,

inputValue : ‘4‘,

anchor : ‘95%‘

}]

}]

}

// 上面是第三行，下面的兩個輸入框主要是測試通過vtypes屬性來驗證輸入框的輸入的

, {

layout : ‘column‘,

border : false,

labelSeparator : ‘：‘,

items : [{

columnWidth : .5,

layout : ‘form‘,

border : false,

items : [{

xtype : ‘textfield‘,

fieldLabel : ‘電子郵件‘,

name : ‘email‘,

vtype : ‘email‘,// 這裡的定義和普通的文本輸入框沒什麼區別，只是多了一個vtypes的屬性定義。Vtypes裡總共定義了email、url、alpha和alphanum四種類型資料格式，email和url這個不用介紹了，呵呵。alpha是字母和底線的組合，alphanum是字母、底線和數位組合。

allowBlank : false,

anchor : ‘90%‘

}]

}, {

columnWidth : .5,

layout : ‘form‘,

border : false,

items : [{

xtype : ‘textfield‘,

fieldLabel : ‘個人首頁‘,

name : ‘url‘,

vtype : ‘url‘,

anchor : ‘90%‘

}]

}]

}

// 上面是第四行,下面要加入一個tabpanel，加入3個tab頁。

, {

xtype : ‘tabpanel‘,// 注意將xtype類型設定為‘tabpanel‘

plain : true,// 將標籤頁頭的背景設定為透明的

activeTab : 0,// 當前活動的標籤頁是第一頁

height : 235,// 高度設定為235px

defaults : {

bodyStyle : ‘padding:10px‘

},// tab頁的面板使用內補丁10px

items : [

// 第一頁主要有兩個輸入控制項，一個是vtypes類型alphanum的登入輸入框和一個密碼輸入框。

{

title : ‘登入資訊‘,// 標籤標題是登入資訊

layout : ‘form‘,// 控制項容器是formlayout

defaults : {

width : 230

},// 控制項的預設寬度是230px

defaultType : ‘textfield‘,// 預設控制項類型是textfield

items : [{

fieldLabel : ‘登入名稱‘,

name : ‘loginID‘,

allowBlank : false,

vtype : ‘alphanum‘,

allowBlank : false

}, {

inputType : ‘password‘,// 密碼輸入框需要定義input控制項的類型為password

fieldLabel : ‘密碼‘,

name : ‘password‘,

allowBlank : false

}]

},

// 第二個標籤頁裡有numberfield、timefield和textfield三個控制項

{

title : ‘數字時間字母‘,

layout : ‘form‘,

defaults : {

width : 230

},

defaultType : ‘textfield‘,

items : [{

xtype : ‘numberfield‘,// 只能輸入數位輸入控制項

fieldLabel : ‘數字‘,

name : ‘number‘

}, {

xtype : ‘timefield‘,// 時間輸入控制項

fieldLabel : ‘時間‘,

name : ‘time‘

}, {

fieldLabel : ‘純字母‘,

name : ‘char‘,

vtype : ‘alpha‘

}]

}, {

title : ‘文本地區‘,

layout : ‘fit‘,// 為了讓textarea自適應面板容器，使用了fitlayout作為它的布局

items : {

xtype : ‘textarea‘,// 設定類型為textarea

id : ‘area‘,

fieldLabel : ‘‘

}

}]

}],

// 為form添加按鈕了，在formpanel的buttons屬性中我們加入了一個儲存按鈕和取消按鈕

buttons : [{

// 在buttons裡定義的按鈕預設是Ext.Button，所以按鈕的屬性定義可以查看Ext.Button的API。在這裡兩個按鈕都沒用到其它屬性，只是設定了顯示文本（text）和單擊事件。

text : ‘儲存‘,

handler : function() {

// 在formpanel類中，form屬性指向的是formpanle裡的basicform對象，我們可通過formpanle.form來使用該basicform對象。在被例子，我們已經將formpanel對象賦值給了simpleForm這個變數，所以我們可以通過simpleForm.form訪問面板裡的basicform對象。

if (simpleForm.form.isValid()) {

// 儲存按鈕要做的就是先做basicform的用戶端驗證，驗證通過了則設定該按鈕狀態為disable，防止2次提交。然後調用simpleForm.form.doAction方法提交資料

this.disabled = true;

// doAction方法的第一個參數“submit”的意思是表示執行的是提交操作，提交的後台頁面是test.jsp（url:‘test.asp‘），提交方式是post（method:‘post‘），沒有其它提交參數（params:‘‘）

simpleForm.form.doAction(‘submit‘, {

url : ‘resForm.jsp‘,

method : ‘post‘,

params : ‘‘,

// 提交成功後執行success定義的函數，後台返回的資料格式是需要我們注意的，一定要json格式，而且必須包含“success:true”，不然不會執行success定義的函數。

// success定義的函數返回兩個參數，第一是form本身，第二個是ajax返回的響應結果，在action.result這個json數組了儲存了後台返回的資料。

success : function(form, action) {

// 例如返回的json結構是"{success:true,data:‘成功儲存！‘}"，

Ext.Msg.alert(‘操作‘,

action.result.data);

this.disabled = false;

},

// 定義failure函數，就是網路通訊存在問題的時候將顯示錯誤資訊。

failure : function() {

Ext.Msg.alert(‘操作‘, ‘儲存失敗！‘);

this.disabled = false;

}

});

}

// 如果想form按以前的老辦法提交，可以在formpanel的定義中加入一下設定：

// onSubmit: Ext.emptyFn,

// submit: function() {

// this.getEl().dom.submit();}

// 第一個設定的目的是取消formpanel的預設提交函數。第二就是設定新的提交方式為舊方式提交。

}

}, {

// 取消按鈕就是簡單的reset一下form的控制項

text : ‘取消‘,

handler : function() {

simpleForm.form.reset();

}

}]

});

});

再來看看前台HTML檔案：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />

<script type="text/javascript" src="resources/js/ext-base.js"></script>

<script type="text/javascript" src="resources/js/ext-all.js"></script>

<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="resources/js/form.js"></script>

</head>

<body></body>

</html>

最後是幕後處理表單提交的JSP組件:

resForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

<%="{success:true,data:‘成功儲存!‘}"%>

大家在學習表單的時候首先要學習一個一個小欄位控制項，然後是FormPanel的基本配置選項，有了瞭解之後再開始做FormPanel的布局以及和其它組件的搭配使用，最後當然就是關注它如何和伺服器端互動，譬如是採用原始的HTML Form提交的方式，還是AJAX非同步提交的方式。還有用戶端如何發送請求以及如何處理返回的JSON資料，伺服器如何接受參數以及返回JSON格式的處理結果等等。這些都通了之後，再看看它的源碼（JS好一點的也可以開始就從源碼下手），遇到問題再查查網路，查查API,這樣你就徹底地征服它了。

呵呵，就囉嗦這麼多了。我們下次繼續吧。