Ext2.0的form不單增加了時間輸入控件、隐藏輸入控件,還修改了建立方法,通過formpanel代替了原來form,column也根據新的布局定義更新了定義方式。總體來說,定義一個form更簡單便捷了。本文将通過一個執行個體介紹一下2.0的form的建立以及其大部分控件的使用方法,因水準有限,錯漏難免,忘大家多多諒解!
Ext2.0的form不單增加了時間輸入控件、隐藏輸入控件,還修改了建立方法,通過formpanel代替了原來form,column也根據新的布局定義更新了定義方式。總體來說,定義一個form更簡單便捷了。本文将通過一個執行個體介紹一下2.0的form的建立以及其大部分控件的使用方法,因水準有限,錯漏難免,忘大家多多諒解!
我們先來看看我們将要設計的form的情況:
呵呵,form有點雜亂,不過在這個fomr裡包含了絕大部分Ext2.0的控件,我将會和大家一起探讨一下這些控件的使用。
在建立一個form之前,我們先增加以下語句:
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
第一句的目的是為需要的元件提供提示資訊功能,form的主要提示資訊就是用戶端驗證的錯誤資訊了。
第二句的目的就是設定控件的錯誤資訊顯示位置,主要可選的位置有:
位置值-描述
qtip-當滑鼠移動到控件上面時顯示提示
title-在浏覽器的标題顯示,但是測試結果是和qtip一樣的
under-在控件的底下顯示錯誤提示
side-在控件右邊顯示一個錯誤圖示,滑鼠指向圖示時顯示錯誤提示
[element id]-錯誤提示顯示在指定id的HTML元件中
這個大家可以根據各人喜好設定,我習慣使用“side”,這裡有一點要注意的,就是注意控制控件的寬度,以防不夠寬度顯示錯誤圖示,這個下面會說到。
好了,現在建立我們的form,2.0的方法就是直接建立一個formpanel:
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表單例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [],
buttons: []
});
simpleForm.render(document.body);
在formpanle裡,我們定義了form控件的标題是在左邊的(labelAlign: 'left');form的标題欄顯示标題“表單的例子”;它的按鈕位置是在右對齊的(buttonAlign:'right');邊的類型設定了内更新檔5px(bodyStyle:'padding:5px');總寬度是600px;設定了面闆的邊角是圓弧過度的(frame:true),我設定這個屬性主要目的不是因為邊角,而是因為背景,如果不設定這個,背景顔色将為白色,設定了這個将會加入海藍色的背景圖,好看點;還設定了form控件的标題寬度是80px(labelWidth:80)。還有一些其它的設定選項,我這裡就不多說,大家可以參看2.0的API。
items數組的設定是我們的重點了,form上的所有控件都是在這裡設定的。
從form的結構圖中看到,form整體上是分了兩列的(實際上不是的,呵呵)。因為要分列,是以要使用columnLayout類。在使用columnLayout類之前,我們需要了解一下CSS中float屬性的作用,改屬性主要作用是設定對象是否及如何浮動,屬性值為none、left和right三個。column設定是left,意思就是對象浮在左邊的。那這個有什麼作用呢?其實這個和我們在word中輸入文字,預設文字是左對齊的,當一行文字的寬度超過頁面的寬度時将自動換行是一樣的。 我們通過一個例子來說明一下。
首先我們定義一個div,背景色是黑色,寬度和高度都是200:
<div style='background:black;width:200px;height:200px;'>
</div>
然後在裡面加入2個div,每個寬度和高度都是200,背景色一個是紅色,一個是綠色:
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;'></div>
<div style='background:green;width:50px;height:50px;'></div>
</div>
我們來看看效果:
在沒有使用float之前,兩個子div是分别各占一行的。好,現在我們在兩個子div中加入“float:left”在看看效果:
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>
兩個子div出現在同一行了。我們複制一下兩個子div,粘貼兩次,然後看看效果:
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>
6個子div有序的按左對齊方式排列在一起了,當一行的子div的寬度超過了父div的寬度時,子div自動換行到了第二行。
不知道大家是否看得明白?看不明白自己再動手改變一下子div的寬度和高度,看看效果。column的工作方式就是這樣的。明白這個很重要,因為在定義checkbox和radio的時候,如果想它們的選項在同一行,就要注意column的寬度,不然就無法讓他們在同一行。不過現在column是通過百分比來定義寬度的,我們隻要控制好百分比就行了。
好了,我們繼續寫form,因為要用到column,是以我們先在formpanel的itmes加入一個column的定義:
{
layout:'column',
border:false,
labelSeparator:':',
items:[]
}
代碼裡定義了在這裡使用的是columnlayout(layout:'column');沒有邊(border:false);标題的分隔符号我們用中文冒号代替英文的冒号(labelSeparator:':')。coulmnLayout裡的控件将定義在items裡。
我們首先在items裡加入一個常用輸入控件,是用來輸入姓名的:
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
}
我們設定了該列的寬度占總寬度的50%(columnWidth:.5);在布局裡放了一個formlayout用來放置控件(layout: 'form');formlayout也是沒有邊的(border:false)。在formlayout裡有一個類型為textfield'(xtype:'textfield')的輸入控件。控件标題為姓名(fieldLabel: '姓名'),輸入框(input)的name屬性設定“name”(name: 'name'),輸入框的長度為列寬減去标題的寬度後的90%(anchor:'90%'),餘下的10%的是給顯示錯誤資訊圖示用的。
在加入性别的radio控件時就要注意了,這裡需要加入兩個radio,第一radio是有标題的,第二是沒有的,而且兩個radio加起來的寬度應該正好是餘下的列寬(50%):
{
columnWidth:.25,
layout: 'form',
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '性别',
boxLabel:'男',
name: 'sex',
checked:true,
inputValue:'男',
anchor:'95%'
}]
},{
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '',
boxLabel:'女',
name: 'sex',
inputValue:'女',
anchor:'95%'
}]
}
從代碼中可以看到,除了列寬設定為25%外,其它的列設定和第一控件是一樣。Formlayout裡加入了一個類型為radio的控件。控件的标題是性别,控件的選擇顯示文本是男(boxLabel:'男),input的name屬性值是sex(name: 'sex'),該控件預設是已選的(checked:true),控件的值(value)是男(inputValue:'男'),input的寬度是95%。在這裡我還設定一個css屬性,頂部的外更新檔為5px(style:'margin-top:5px'),原因是為了選擇按鈕和标題對齊,大家可以将該屬性去掉然後看看效果。
第二個raido控件的列設定就有所不同,因為它不需要标題,是以要設定隐藏标題(hideLabels:true),标題的寬度設定為0(labelWidth:0),還要設定其标題分隔符号為空(labelSeparator:'')。其餘的設定和第一個radio的設定沒有不同,隻是input的值不同了。
我們已經設定了3列,3列的列寬分别為50%、25%、25%,根據float的原則,下一列将從第二行開始。
在第二行第一列我們要增加的是一個日期選擇控件:
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'datefield',
fieldLabel: '出生日期',
name: 'birthday',
anchor:'90%'
}]
}
日期控件的列寬也是50%,列的其它設定沒有變化。控件的類型為datefield,标題是出生日期,input的name屬性是birthday,intput寬度也是設定了90%,出來留出空位給錯誤資訊外,還可以讓控件與上一行的姓名的寬度相同,整列看起來比較整齊。
日期控件的設定和普通文本輸入的設定一樣簡單,這裡就不多說了。不過要說到的是漢化的問題。在2.0版自帶的本地化檔案ext-lang-zh.js中存在一些小bug,我們需要自己修改一下。
首先要修改的是周的顯示,原來的定義是:
Date.dayNames = [
"周日",
"周一",
"周二",
"周三",
"周四",
"周五",
"周六"
];
因為在日期選擇中顯示的區域不夠寬,隻能顯示一個漢字,是以需要将上面定義的把“周”去掉,修改為:
Date.dayNames = [
"日",
"一",
"二",
"三",
"四",
"五",
"六"
];
在年份和月份選擇中的按鈕文字還是英文“ok”和“cancel”的,這裡我們也需要修改一下:
if(Ext.DatePicker){
Ext.apply(Ext.DatePicker.prototype, {
todayText : "今天",
minText : "日期在最小日期之前",
maxText : "日期在最大日期之後",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : '下月 (Control+Right)',
prevText : '上月 (Control+Left)',
monthYearText : '選擇一個月 (Control+Up/Down 來改變年)',
todayTip : "{0} (Spacebar)",
okText : "确定",
cancelText : "取消",
format : "y年m月d日"
});
}
上面定義中黑色字型部分就是要加入的代碼。如果不喜歡預設格式是“y年m月d日”,需要修改:
if(Ext.form.DateField){
Ext.apply(Ext.form.DateField.prototype, {
disabledDaysText : "禁用",
disabledDatesText : "禁用",
minText : "該輸入項的日期必須在 {0} 之後",
maxText : "該輸入項的日期必須在 {0} 之前",
invalidText : "{0} 是無效的日期 - 必須符合格式: {1}",
format : "Y-m-d"
});
}
修改DatePicker不會改變DateField的格式的,這個自己根據情況決定,呵呵。
我們繼續,現在需要加入一個學曆的下拉選擇控件。下來選擇控件最重要的一個定義就是資料的定義的,資料定義錯誤,可能得不到我們需要的效果,也是很多朋友感覺最麻煩的地方。
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'combo',
store: new Ext.data.SimpleStore(
{
fields: ["retrunValue", "displayText"],
data: [[1,'國小'],[2,'國中'],[3,'高中'],[4,'中專'],[5,'大專'],[6,'大學']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'請選擇學曆',
emptyText:'選擇學曆',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '學曆',
name: 'education',
anchor:'90%'
}]
}
列的定義就不說了,沒變化。在items裡,類型設定成combo了,在這裡定義了一個sotre屬性,就是選擇值存儲的地方,因為是在用戶端的資料,是以使用了一個簡單存儲(SimpleStore)。在存儲裡,我們通過一個數組定義了retrunValue和displayText兩個字段。retrunValue字段指定是送出給背景的值,displayText字段指定是在下拉中顯示的選擇值。然後我們在data裡定義了幾組資料(data: [[1,'國小'],[2,'國中'],[3,'高中'],[4,'中專'],[5,'大專'],[3,'大學']]),我們可以看到,每組資料都是根據fiedls的定義來組成的,數組裡第一個值就是retrunValue的值,第二個值就是displayText的值,例如[1,'國小'],就表示retrunValue是1,displayText是國小。
下面就是很重要的一步了,設定下拉選擇框的值和顯示文本。本例中設定了下拉選擇框的送出值對象的是存儲中的retrunValue字段(valueField :"retrunValue"),顯示文本是存儲中的displayText字段(displayField: "displayText"),通過這兩個設定就可将存儲中的資料和下拉框對應起來。
因為資料是在本地,是以設定了模式為local(mode: 'local')。該下拉清單隻允許選擇,不允許輸入(editable: false),而且是必須選擇一個選項(forceSelection: true)。在沒有選擇值時顯示為選擇學曆(emptyText:'選擇學曆')。送出form時,該項如果沒有選擇,則提示錯誤資訊“請選擇學曆”(blankText:'請選擇學曆')。該選項值不允許為空(allowBlank:false)。大家要注意的是hiddenName和name屬性,name隻是改下拉的名稱,作用是可通過,而hiddenName才是送出到背景的input的name。如果沒有設定hiddenName,在背景是接收不到結構的,這個大家一定要注意。
因為這個下拉是隻能選擇的,是以一定要設定屬性triggerAction為all,不然當你選擇了某個選項後,你的下拉将隻會出現比對選項值文本的選擇項,其它選擇項是不會再顯示了,這樣你就不能更改其它選項了。
如果要為控件設定預設值,就設定屬性value,value的值要設定為送出給背景的值,不要設定為顯示文本。例如本例要設定大學為預設值得,則設定value的值為6。
現在到第三行了,我們要建立一個checkbox選項輸入:
{
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%'
}]
}
checkbox的設定和radio的設定大同小異,大家注意列寬的定義就行。
第四行的兩個輸入框主要是測試通過vtypes屬性來驗證輸入框的輸入的:
{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '電子郵件',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '個人首頁',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
}
這裡的定義和普通的文本輸入框沒什麼差別,隻是多了一個vtypes的屬性定義。Vtypes裡總共定義了email、url、alpha和alphanum四種類型資料格式,email和url這個不用介紹了,呵呵。alpha是字母和下劃線的組合,alphanum是字母、下劃線和數字的組合。
下面要加入一個tabpanel,加入3個tab頁。
{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
items:[]
}
要注意的是,這個tabpanel不是在上面coulmn的items裡加的,因為不在column裡。我們加在formpanel裡。把item類型設定為'tabpanel'就行了,然後将标簽頁頭的背景設定為透明的(plain:true),目前活動的标簽頁是第一頁(activeTab: 0),高度設定為235px(height:235),tab頁的面闆使用内更新檔10px(defaults:{bodyStyle:'padding:10px'})。
好了,現在在tabpanel的items加入标簽頁。第一頁主要有兩個輸入控件,一個是vtypes類型alphanum的登入輸入框和一個密碼輸入框。
{
title:'登入資訊',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: '登入名',
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
},{
inputType:'password',
fieldLabel: '密碼',
name: 'password',
allowBlank:false
}]
}
在标簽定義了,設定了标簽标題是登入資訊(title:'登入資訊'),控件容器是formlayout(layout:'form'),控件的預設寬度是230px(defaults: {width: 230}),預設控件類型是textfield(defaultType: 'textfield')。
兩個控件的定義與前面的textfield定義沒什麼差別,隻是密碼輸入框需要定義input控件的類型為password(inputType:'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'
}]
}
Numberfield顧名思義就是隻能輸入數字的輸入控件。在該例子,沒做最大值、最小值任何限制,如果要設定最大值和最小值,分别設定maxValue和minValue兩個屬性就行了。如果要設定數字輸入長度,例如身份證号碼,可以設定maxLength和minLength兩個屬性。可以通過設定maxText、minText、maxLengthText和minLengthText設定各自的驗證出錯資訊。可通過allowDecimals屬性設定是否隻允許輸入整型值,預設值是true,允許輸入浮點數。設定allowNegative設定是否隻允許輸入正數,預設值是true,允許輸入正負數。通過decimalPrecision屬性可設定小數點後的位數,預設值是2位。
timefield是新增加的時間輸入控件,起彌補日期輸入控件不能輸入時間的作用。它的定義也很簡單,設定類型為timefield就行了。timefield預設時間格式是12小時制的,我們可通過修改format屬性來修改其資料格式。通過設定increment屬性可設定下拉選擇值得時間區間,預設值是15分鐘的。還可以和數字輸入控件一樣設定最大值和最小值。下拉的設定和combobox是一樣的。
在目前的版本中,timefield類還沒有漢化,是以我們要在本地檔案中加入timefield的漢化定義:
if(Ext.form.TimeField){
Ext.apply(Ext.form.TimeField.prototype, {
format:'G:i:s',
minText : "該輸入項的時間必須大于或等于: {0}",
maxText : "該輸入項的時間必須小于或等于: {0}",
invalidText : "{0}不是有效的時間",
});
}
在這裡,我預設定義了時間格式是24小時制的,小時為個位數是不加字首0。
最後一個加入的是測試純字母輸入的,和email等是一樣的,我就不介紹了。
在最後一個tab頁中加入了一個textarea輸入:
{
title:'文本區域',
layout:'fit',
items: {
xtype:'textarea',
id:'area',
fieldLabel:''
}
}
和textfield一樣,隻要設定類型為textarea就可以了,唯一的差別是為了讓textarea和面闆自适應面闆,使用了fitlayout作為它的容器,是以在這裡我們不用設定textarea的寬度和高度。
最後一步就是為form添加按鈕了,在formpanel的buttons屬性中我們加入了一個儲存按鈕和取消按鈕:
buttons: [{
text: '儲存',
handler:function(){
if(simpleForm.form.isValid()){
this.disabled=true;
simpleForm.form.doAction('submit',{
url:'test.asp',
method:'post',
params:'',
success:function(form,action){
Ext.Msg.alert('操作',action.result.data); this.disabled=false;
},
failure:function(){
Ext.Msg.alert('操作','儲存失敗!');
this.disabled=false;
}
});
}
}
},{
text: '取消',
handler:function(){simpleForm.form.reset();}
}]
在formpanel類中,form屬性指向的是formpanle裡的basicform對象,我們可通過formpanle.form來使用該basicform對象。在被例子,我們已經将formpanel對象指派給了simpleForm這個變量,是以我們可以通過simpleForm.form通路面闆裡的basicform對象。
在buttons裡定義的按鈕預設是Ext.Button,是以按鈕的屬性定義可以檢視Ext.Button的API。在這裡兩個按鈕都沒用到其它屬性,隻是設定了顯示文本(text)和單擊事件。
儲存按鈕要做的就是先做basicform的用戶端驗證(simpleForm.form.isValid()),驗證通過了則設定該按鈕狀态為disable,防止2次送出。然後調用simpleForm.form.doAction方法送出資料。doAction方法的第一個參數“submit”的意思是表示執行的是送出操作,送出的背景頁面是test.asp(url:'test.asp'),送出方式是post(method:'post'),沒有其它送出參數(params:''),送出成功後執行success定義的函數,本例隻是顯示一個儲存成功資訊。背景傳回的資料格式是需要我們注意的,一定要json格式,而且必須包含“success:true”,不然不會執行success定義的函數。success定義的函數傳回兩個參數,第一是form本身,第二個是ajax傳回的響應結果,在action.result這個json數組了儲存了背景傳回的資料。例如本例背景傳回的json結構是“{success:true,data:~~~}”,其中data部分我将送出的資料将字段名和資料組合成一個字元串。在success函數中,我通過“Ext.Msg.alert('操作',action.result.data);”将data資料顯示出來。我們還定義failure函數,就是網絡通訊存在問題的時候将顯示錯誤資訊。
取消按鈕就是簡單的reset一下form的控件。
如果想form按以前的老辦法送出,可以在formpanel的定義中加入一下設定:
onSubmit: Ext.emptyFn,
this.getEl().dom.submit();
}
第一個設定的目的是取消formpanel的預設送出函數。第二就是設定新的送出方式為舊方式送出。
至此,我們已經簡單的學習一次2.0版中的form控件,希望大家能從中獲得收益。如果有什麼疑問和建議,請聯系我。多謝!
本例子的代碼請單擊這裡下載下傳,例子在form目錄下。
本例子的完整代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>簡單的表單例子</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" target="_blank" rel="external nofollow" >
</head>
<body>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../../ext-lang-zh_CN.js"></script>
<script>
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
labelAlign: 'left',
title: '表單例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
layout:'column',
border:false,
labelSeparator:' :',
columnWidth:.5,
layout: 'form',
border:false,
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
columnWidth:.25,
layout: 'form',
border:false,
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '性别',
boxLabel:'男',
name: 'sex',
checked:true,
inputValue:'男',
anchor:'95%'
}]
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '',
boxLabel:'女',
name: 'sex',
inputValue:'女',
anchor:'95%'
}]
columnWidth:.5,
layout: 'form',
border:false,
xtype:'datefield',
fieldLabel: '出生日期',
name: 'birthday',
anchor:'90%'
}]
columnWidth:.5,
layout: 'form',
border:false,
xtype:'combo',
fields: ["retrunValue", "displayText"],
data: [[1,'國小'],[2,'國中'],[3,'高中'],
[4,'中專'],[5,'大專'],[6,'大學']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'請選擇學曆',
emptyText:'選擇學曆',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
FieldLabel: '學曆',
name: 'education',
anchor:'90%'
}]
columnWidth:.35,
layout: 'form',
border:false,
xtype:'checkbox',
fieldLabel: '權限組',
boxLabel:'系統管理者',
name: 'popedom',
inputValue:'1',
anchor:'95%'
}]
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
xtype:'checkbox',
fieldLabel: '',
boxLabel:'管理者',
name: 'pepedom',
inputValue:'2',
anchor:'95%'
}]
columnWidth:.2,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
xtype:'checkbox',
fieldLabel: '',
boxLabel:'普通使用者',
name: 'pepedom',
inputValue:'3',
anchor:'95%'
}]
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
xtype:'checkbox',
fieldLabel: '',
boxLabel:'訪客',
name: 'pepedom',
inputValue:'4',
anchor:'95%'
}]
columnWidth:.5,
layout: 'form',
border:false,
xtype:'textfield',
fieldLabel: '電子郵件',
name: 'email',
vtype:'email',
allowBlank:false,
anchor:'90%'
}]
columnWidth:.5,
layout: 'form',
border:false,
xtype:'textfield',
fieldLabel: '個人首頁',
name: 'url',
vtype:'url',
anchor:'90%'
}]
}]
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
defaults:{bodyStyle:'padding:10px'},
title:'登入資訊',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
fieldLabel: '登入名',
name: 'loginID',
allowBlank:false,
vtype:'alphanum',
allowBlank:false
inputType:'password',
fieldLabel: '密碼 ',
name: 'password',
allowBlank:false
}]
title:'數字時間字母 ',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
xtype:'numberfield',
fieldLabel: '數字',
name: 'number'
xtype:'timefield',
fieldLabel: '時間',
name: 'time'
fieldLabel: '純字母',
name: 'char',
vtype:'alpha'
}]
title:'文本區域',
layout:'fit',
xtype:'textarea',
id:'area',
fieldLabel:''
}
}]
}],
text: '儲存',
this.disabled=true;
url:'test.asp',
method:'post',
params:'',
Ext.Msg.alert('操作',action.result.data);
this.disabled=false;
},
Ext.Msg.alert('操作','儲存失敗!');
this.disabled=false;
}
});
}
}
text: '取消',
handler:function(){simpleForm.form.reset();}
}]
});
simpleForm.render(document.body);
</script>
</body>
</html>
背景檔案的代碼(ASP):
<%@Language=VBScript CodePage=65001%>
<%
dim temp
For Each x In Request.Form
temp=temp& x & ":" & Request.Form(x) & ","
next
Response.Charset="utf-8"
Session.CodePage=65001
response.write "{success:true,data:'"&temp&"'}"
%>
CSS屬性float的測試檔案代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>float測試例子</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div style='background:black;width:200px;height:200px;'>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
<div style='background:red;width:50px;height:50px;float:left;'></div>
<div style='background:green;width:50px;height:50px;float:left;'></div>
</div>
</body>
</html>
本文轉自