Ext學習筆記9-表單

笨笨鼠→_→發表於2012-07-07

22-Ext中的表單(Ext.form.BasicForm)

如果要使用院士方式提交表單可以覆蓋表單的onSubmit及Submit方法
程式碼如下:

         var myForm = new Ext.form.BasicForm('form-el-id',{
                     onSubmit: Ext.emptyFn,             //覆蓋onSubmit方法為空函式
                     submit: function(){                     //覆蓋submit方法
                             this.getEl().dom.submit(); //呼叫底層表單元素的submit方法進行表單提交
                      }
         })

Ext.form.BasicForm主要配置專案表

配置項	類型	說明
baseParams	Object	傳遞到請求中的引數,例如:{id: '123', foo: 'bar'}
errorReader	DataReader	當表單提交時用來讀取錯誤資訊的資料讀取器,這不是一個必選項, 在表單內部已經內建了一個Json格式的資料讀取器
fileUpload	Boolean	設定表單是否進行檔案上傳
method	String	設定表單的提交方式,有效值包括GET和POST
reader	DataReader	設定當表單執行load操作讀取資料時的資料讀取器,這不是必選項, 在表單內部已經內建了一個Json格式的資料讀取器
timeout	Number	設定表單動作的超時時間
trackResetOnLoad	Boolean	設定為true則在表單初次建立時將清除最近一次載入的資料或使用setValues()設定資料
url	String	設定表單執行請求時預設的提交路徑
waitMsgTarget	Mixed	預設情況下,表單在執行動作過程中的等待提示框是一個 Ext.MessageBox.wait元件,通過該屬性可以制定其他目標元素

Ext.form.BasicForm主要方法表

方法名	說明
clearInvalid() : BasicForm	清除表單中所有的無效驗證資訊
doAction(String/Object actionName, [Object options]) : BasicForm	執行一個預定的動作(Ext.form.Action.Submit或Ext.form.Action.Load) 或者自定義的擴充套件自Ext.form.Action的動作, 以執行一個特殊的請求處理
findField(String id) : Field	通過id, dataIndex, name, hiddenName 查詢表單欄位
isDirty() : Boolean	如果表單在第一次讀取後被更改過將返回true
isValid() : Boolean	如果客戶端驗證成功將返回true
load(Object options) : BasicForm	執行表單讀取動作. 配置物件options將被傳遞到action(動作)中,細節參考doAction配置項
loadRecord( Record record ) : BasicForm	從一個資料記錄(Ext.data.Record)中讀取資料到表單中
markInvalid( Array/Object errors ) : BasicForm	成批設定表單欄位為驗證無效 ,引數可以是陣列[{id : 'fieldId', msg : 'The message'}...], 或者json物件{id : msg, id2 : msg2}
reset() : BasicForm	重置表單
setValues( Array/Object values ) : BasicForm	成批設定表單欄位, 引數可以是陣列 [{id : 'name', value : 'tom'}, {id : 'age', value : '24'}], 也可以是一個json物件{id:value, id2:value2}
submit(Object options) : BasicForm	執行表單提交動作配置物件options將被傳遞到action(動作)中,細節參考doAction配置項
updateRecord( Record record ) : BasicForm	持久化表單資料到記錄集中

注: 上表列舉了主要的Ext.form.BasicForm方法, 這些方法繼承到FormPanel中,FormPanel中可以直接使用這些方法

Ext.form.FormPanel支援的主要表單元件(最下面的)


xtype            類Class                                                   說明
-------------    ------------------                                 ----------------------------
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel                              //表格組建
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel                                     //頁籤
treepanel        Ext.tree.TreePanel                         //樹形皮膚
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components 工具條元件
---------------------------------------                       -------------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components 表單元件
---------------------------------------                          ----------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox                                 核取方塊
combo            Ext.form.ComboBox                                    下拉選單框
datefield        Ext.form.DateField                                      日期選擇框
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden                                            隱藏域
htmleditor       Ext.form.HtmlEditor                                  HTML文字編輯器
numberfield      Ext.form.NumberField                            數字輸入框
radio            Ext.form.Radio                                                單選按鈕
textarea         Ext.form.TextArea                                       文字域
textfield        Ext.form.TextField                                        單行文字框
timefield        Ext.form.TimeField                                      時間選擇器
trigger          Ext.form.TriggerField                                 觸發按鈕文字框

Ext.form.FormPanel主要配置專案表

配置項	類型	說明
buttons	Array	一個按鈕(Ext.Button)配置物件的陣列,按鈕將被新增到表單頁尾中
buttonAction	String	按鈕的對其方式, 有效值包括: left, center 和right, 預設值為center
footer	Boolean	是否建立表單頁尾
header	Boolean	是否建立表單標題欄,如果設定了title屬性則會自動建立標題欄
headerAsTest	Boolean	在標題欄(header)中是否顯示title, 預設為true
items	Mixed	一個子元素或子元素的陣列
labelAlign	String	表單標籤對齊方式,有效值包括left, top, 和right, 預設為left.如果當前表單包含子容器, 並且在子容器中沒有設定該屬性,則該屬性的直至會級聯到子容器中
labelWidth	Number	表單標籤的寬度
title	Stirng	表單標題

Ext.form.FormPanel常用方法表

方法名	說明
getForm() : Ext.form.BasicForm	獲取表單皮膚對應的基本表單物件
load( Object options ) : void	載入表單內容,該方法是Extform.BasicForm.load的代理, ,細節參考doAction配置項
startMonitoring() : void	開始監控表單的有效狀態
stopMonitoring() : void	停止監控表單的有效狀態

Ext.form.Field表單欄位
     --- Ext.form.Field是表單欄位的基類, 它擴充套件自Ext.Box.Component,其他表單欄位都需要從Ext.form.Field類進行擴充套件,
           如:Ext.form.TextField, Ext.form.Checkbox, Ext.form.Hidden 都是擴充套件來的表單欄位元件
     --- 下表列出Ext.form.Field的主要配置專案,和常用方法 , 這些配置項將被其子類繼承

配置項	類型	說明
name	String	欄位名
id	String	控制元件的唯一標識,預設系統會自動生成一個唯一標識
value	String	欄位的初始化值
readOnly	Boolean	是否只讀,預設為false
validateOnBlur	Boolean	欄位在失去焦點時是否被驗證,預設為true
validationDelay	Number	驗證的延時時間,以毫秒為單位,預設為250
disabled	Boolean	設定欄位是否可用,預設為false
fieldLabel	String	欄位對應的標籤說明,預設為空白字串('')
hideLabel	Boolean	是否隱藏欄位標籤,預設為false
hideMode	String	有效值包括visibility, offsets(偏移), display
hideParent	Boolean	設定為true則顯示或隱藏元件的容器.預設為false
labelSeparator	String	欄位標籤與欄位之間的分割符,預設為':', 這項設定會覆蓋 Ext.form.FormPanel中的對應配置項
msgTarget	String	設定錯誤資訊顯示的位置, 有效值包括: qtip: 顯示一個浮動的提示資訊 title: 顯示一個瀏覽器的浮動提示資訊 under: 在欄位下方顯示一個提示資訊 side:在欄位右邊顯示一個提示資訊

注:可以統一設定提示資訊
Ext.QuickTips.init();//初始化提示資訊
Ext.form.Field.prototype.msgTarget="side";//讓提示資訊在邊上顯示

Ext.form.TextField文字區
--- 它擴充套件自Ext.form.Field類, 它是一個基本的文字輸入欄位
--- Ext.form.TextField主要配置專案表

配置項	類型	說明
allowBlank	Boolean	是否允許為空,預設為true
blankText	String	是否允許為空驗證失敗後顯示的提示資訊
emptyText	String	在一個空欄位中預設顯示的資訊
grow	Boolean	設定欄位是否根據內容欄位進行伸展和收縮,預設為false
growMax	Number	欄位伸展的最大寬度,預設為800
growMin	Number	欄位伸縮的最小寬度,預設為30
inputType	String	欄位型別,預設為text,還可是:image,password,或者file
maxLength	Number	欄位允許輸入的最大長度
maxLengthText	String	最大長度驗證失敗後顯示的提示資訊
minLength	Number	欄位允許輸入的最小長度
minLengthText	String	最小長度驗證失敗後顯示的提示資訊
regex	String	一個javascript正規表示式物件
regexText	String	正規表示式驗證失敗後顯示的提示資訊,預設為空('')
selectOnFocus	Boolean	設定當欄位得到焦點時是否自動選擇已存在的文字,預設為false
vtype	String	一個驗證型別的名字,清參考Ext.Form.Vtypes vtype的值有: 1.alpha,只能輸入英文字母 2.alphanum,只能輸入英文字母和數字 3.email,電子郵件 4.url,網址
vtypeText	String	一個自定義的提示資訊,用來代替vtype本身的錯誤提示資訊
validator	Function	一個自定義驗證函式,預設為(null),這個函式將在所有基本驗證通過之後被呼叫

Ext.form.TextArea多行文字域

配置項

型別

說明

prventScrollbars

Boolean
設定當文字內容溢位時是否顯示滾動條,設定為true則隱藏滾動條,
相當於設定overflow:hidden, 預設為false

Ext.form.Number數字輸入框

配置項	類型	說明
allowDecimals	Boolean	是否允許輸入小數,預設為true
allowNegative	Boolean	是否允許輸入負數,預設為true
baseChars	String	輸入的有效數字集合,預設為:'0123456789'
decimalPrecision	Number	輸入數字的精度,預設保留小數點後2位
decimalSeparator	String	十進位制分割符,預設為'.'
maxValue	Number	允許輸入的最大數值
maxText	String	輸入值超過最大值之後的提示資訊
minValue	Number	允許輸入的最小數值
minText	String	輸入小於最小數值的提示資訊
manText	String	輸入非有效數值之後的提示資訊

Ext.form.CheckBox核取方塊與Extform.Radio單選框
--- Ext.form.CheckBox主要配置專案表

配置項

類型

說明

boxLabel

String

緊靠核取方塊的文字描述

checked

Boolean

設定核取方塊預設是否被選中,預設為false

--- 關於CheckBox和Radio的佈局

示例:
Ext.onReady(function(){

    var _formPanel = new Ext.FormPanel({
        title:'點選按鈕與核取方塊佈局',
        bodyStyle:'padding:5',
        width:650,
        height:300,
        labelWidth:50,
        frame:true,
        applyTo:'hello',
        items:[ {
                xtype: 'checkboxgroup',   //這裡採用了xtype:'checkboxgroup'
                fieldLabel: '愛好',
                columns: [155,155,155],         //兩排排列這樣可以設定其寬度和列數去掉該引數則橫排排列

                items: [
                    {boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
                    {boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}

                ]
            },{
                xtype: 'checkboxgroup',
                fieldLabel: '愛好',

               columns:2,                     //單個數字可以設定列數
                items: [
                    {boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
                    {boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}

                ]
            },{
                xtype: 'radiogroup',       //使用了radiogroup
                fieldLabel: '愛好',

               //columns:2,                     //單個數字可以設定列數
                items: [
                    {boxLabel: '游泳', name: 'cb-custwidth', inputValue: 1},
                    {boxLabel: '洗澡', name: 'cb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: '散步', name: 'cb-custwidth', inputValue: 3}

                ]
            }]
    });

});

Ext.for.TriggerField觸發欄位
--- Ext.form.TriggerField元件擴充套件自Ext.form.TextField元件,增加了一個可以單擊的觸發按鈕,這個觸發按鈕沒有預設的動作,
必須指派處理函式

配置項

類型

說明

hideTrigger Boolean 是否隱藏觸發按鈕,預設為false
triggerClass String 應用於觸發按鈕上的樣式
onTriggerClick Function 觸發函式

Ext.form.ComboBox組合框

配置項	類型	說明
allQuery	String	一個法網伺服器用來查詢全部資訊的自負串，預設為空字串('')
displayField	String	一個被顯示在下拉框中的欄位名
editable	Boolean	設定下來框是否可以進行編輯,預設為true,如果設定為false則效果相當與一個傳統的選擇(select)框
forceSelection	Boolean	設定輸入值是否是嚴格為帶選列表中存在的值, true則要求輸入值必須在列表中存在, false則允許使用者輸入任何值,預設為false
handleHeight	Number	下拉選單中拖動手柄的高度,預設為8,只在resizable配置項為true時才生效
hiddenName	String	隱藏欄位的名字,如果提供該引數則一個隱藏欄位將被建立,用來儲存所選值, 當表單提交時在伺服器端可以通過該名字取得列表中的所選值
lazyInit	Boolean	延時初始化下拉選單,預設為true,當下拉框得到焦點才會初始化下拉選單
listAlign	String	列表的對其方式
lazyRender	Boolean	延時渲染,預設為false
listClass	String	應用在下拉選單元素上的樣式
listWidth	Number	下倆列表的寬度,預設為下拉框的寬度
loadingText	String	當下拉框載入資料時顯示的提示資訊,只有當mode='remote'時才會生效
maxHeight	Number	下拉選單框的最大高度,預設為300(畫素)
minChars	Number	下拉選單框自動選擇前使用者需要輸入的最小字元數量 mode='remote' 預設為4 mode='local' 預設為0 editable=false會使自動完成功能失效
minListWidth	Number	設定下拉選單的最小寬度,預設為70(畫素),如果listWidth的寬度大於最小寬度, 則該項設定將會被忽略
mode	String	設定下拉選單框的資料讀取模式 local:本地 remote:遠端
pageSize	Number	設定下拉選單框的分頁大小.如果大於0則在下拉選單的頁尾位置會自動建立一個分業工具欄該項只有在mode='remote'時生效
queryDelay	Number	設定從鍵入自負結束到傳送查詢之間的查詢延時時間 mode='remote' 預設為500(毫秒) mode='local'預設為10(毫秒)
queryParam	String	查詢的名字,預設為'query',將被傳遞到查詢字串中
selectOnFocus	Boolean	當獲取焦點時立刻選擇一個已經存在的列表項,預設為false, 此項只有在editable=true時才會生效
store	Ext.data.Store	列表框繫結的資料來源,預設為空(undfined)
title	String	如果設定該項,則會為下拉選單建立頭部元素
transform	Mixed	將頁面中已存在元素轉換為組合框
triggerAction	String	設定單擊觸發按鈕時執行的預設操作,有效值包括'all'和'query' 預設為'query' ,如果設定值為'all'則會執行allQuery中設定的查詢
typeAhead	Boolean	設定在輸入過程中是否自動選擇配置的剩餘部分文字,預設為false
typeAheadDelay	Number	設定輸入過程中自動匹配剩餘文字的延時時間,預設為250毫秒
value	String	初始化組合框中的值
valueField	String	組合框的值欄位
valueNotFoundText	String	值不存在時顯示的提示資訊
emptyText	Stirng	值為空的時候在文字框中顯示的的提示資訊
resizable	Boolean	是否可以改變下拉框的大小

ComboBox示例1:(本地資料來源的組合框)
   Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var store = new Ext.data.SimpleStore({                                           //定義組合框中顯示的資料來源
   fields: ['province', 'post'],
   data : [['北京','100000'],['通縣','101100'],['昌平','102200'],
           ['大興','102600'],['密雲','101500'],['延慶','102100'],
           ['順義','101300'],['懷柔','101400']]
  });
  var form = new Ext.form.FormPanel({
   title:'Ext.form.ComboBox本地資料來源示例',
   labelSeparator :'：',                                             //分隔符
   labelWidth : 80,                                                    //標籤寬度
   bodyStyle:'padding:5 5 5 5',                                //表單邊距
   frame : true,
   height:100,
   width:270,
   applyTo :'form',
   items:[
   new Ext.form.ComboBox({
    id:'post',
    fieldLabel:'郵政編碼',
    triggerAction: 'all',                                             //單擊觸發按鈕顯示全部資料
    store : store,                                                          //設定資料來源
    displayField:'province',                                       //定義要顯示的欄位
    valueField:'post',                                                  //定義值欄位
    mode: 'local',                                                         //本地模式
    forceSelection : true,                                           //要求輸入值必須在列表中存在
    resizable : true,                                                     //允許改變下拉選單的大小
    typeAhead : true,                                                   //允許自動選擇匹配的剩餘部分文字
    value:'102600',                                                     //預設選擇大興
    handleHeight : 10                                                 //下拉選單中拖動手柄的高度
   })
   ]
  })
});

ComboBox示例2:(遠端資料來源的組合框)

//客戶端程式碼
Ext.onReady(function(){

  Ext.QuickTips.init();
  var store = new Ext.data.SimpleStore({
   proxy : new Ext.data.HttpProxy({                            //讀取遠端資料的代理
    url : 'http://localhost:8080/test/test_ajax.do'    //遠端地址
   }),
   fields : ['bookName']                                                //欄位
  });
  var form = new Ext.form.FormPanel({
   title:'Ext.form.ComboBox遠端資料來源示例',
   labelSeparator :'：',                                   //分隔符
   labelWidth : 80,                                          //標籤寬度
   bodyStyle:'padding:5 5 5 5',                      //表單邊距
   frame : true,
   height:100,
   width:300,
   applyTo :'hello',
   items:[
   new Ext.form.ComboBox({
    id:'book',
    allQuery:'allbook',                                       //查詢全部資訊的查詢字串
    loadingText : '正在載入書籍資訊',        //載入資料時顯示的提示資訊
    minChars : 3,                                                //下拉選單框自動選擇前使用者需要輸入的最小字元數量
    queryDelay : 300,                                         //查詢延遲時間
    queryParam : 'searchbook',                       //查詢的名字
    fieldLabel:'書籍列表',
    triggerAction: 'all',                                      //單擊觸發按鈕顯示全部資料
    store : store,                                                   //設定資料來源
    displayField:'bookName',                            //定義要顯示的欄位
    mode: 'remote'                                              //遠端模式,
   })
   ]
  })
});

//伺服器程式碼(struts Action)   --- 伺服器程式用於生成滿足客戶端組合框需求的資料,格式為:[['a'],['b'],['c']]

response.setCharacterEncoding("UTF-8");   //解決中文亂碼問題
   System.out.println("===============來了===============");
  String bookName = request.getParameter("searchbook");

String jav = "['java程式設計思想'],['java入門'],['javascript程式設計']";
  String cpp = "['c++程式設計思想'],['c++入門'],['c++程式設計']";
  String php = "['php程式設計'],['php入門'],['php從入門到精通']";
  String books = "";
  if(bookName.equals("allbook")){
    books = "["+jav+","+cpp+","+php+"]";
   response.getWriter().write(books);
  }else{
    bookName = bookName.substring(0,3);//取查詢字串的前3個字元
     System.out.println(bookName);

  if(bookName.equals("jav")){
      books = "["+jav+"]";
   }else if(bookName.equals("c++")){
       books = "["+cpp+"]";
   }else if(bookName.equals("php")){
       books = "["+php+"]";
   }else{
      books = "[['沒有資料']]";
    }
    response.getWriter().write(books);
     System.out.println(books);
  }
  return null;

ComboBox示例3:(帶分頁功能的組合框示例)

//客戶端程式碼

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  Ext.QuickTips.init();
  var store = new Ext.data.JsonStore({
   url : 'bookSearchServerPage.jsp',                       //遠端地址
   totalProperty : 'totalNum',
   root : 'books',
   fields : ['bookName']
  });
  var form = new Ext.form.FormPanel({
   title:'Ext.form.ComboBox分頁示例',
   labelSeparator :'：',//分隔符
   labelWidth : 80,//標籤寬度
   bodyStyle:'padding:5 5 5 5',//表單邊距
   frame : true,
   height:100,
   width:270,
   applyTo :'form',
   items:[
   new Ext.form.ComboBox({
    id:'book',
    width:233,
    fieldLabel:'書籍列表',
    store : store,                                               //設定資料來源
    allQuery:'allbook',                                  //查詢全部資訊的查詢字串
    triggerAction: 'all',                                 //單擊觸發按鈕顯示全部資料
    listWidth : 233,                                         //指定列表寬度   為了將分頁工具欄全部顯示出來
    editable : false,                                           //禁止編輯
    loadingText : '正在載入書籍資訊',    //載入資料時顯示的提示資訊
    displayField:'bookName',                        //定義要顯示的欄位
    mode: 'remote',                                         //遠端模式
    pageSize : 3                                               //分頁大小
   })
   ]
  })
});

//伺服器端程式碼 --- 因為在分業過程伺服器將向頁面返回包含總條目數和當前頁明晰的符合資料,
                                       所以要採用json格式作為伺服器與客戶端交換的標準

response.setCharacterEncoding("UTF-8");

  System.out.println("===============來了===============");

  String bookName = request.getParameter("query");
  int start = Integer.parseInt(request.getParameter("start"));            //分頁開始元素的陣列下標值從零開始
  int limit = Integer.parseInt(request.getParameter("limit"));            //每頁的大小
int start = Integer.parseInt(request.getParameter("start"));
  int limit = Integer.parseInt(request.getParameter("limit"));
  String [] booksArray = {"java程式設計思想","java入門","javascript程式設計",
          "c++程式設計思想","c++入門","c++程式設計",
          "php程式設計","php入門","php從入門到精通"};
  StringBuffer books = new StringBuffer();
  books.append("{totalNum:'"+booksArray.length+"',")
           .append("books:[");
  if(bookName.equals("allbook")){
   for(int i= start; i<start+limit;i++){
    books.append("{bookName:'"+booksArray[i]+"'}");
    if(i != (start+limit-1)){
     books.append(",");
    }
   }
   books.append("]}");
   System.out.println(books.toString());
   response.getWriter().write(books.toString());
  }else{
   response.getWriter().write("[totalNum:0,books:['資料不存在']]");
  }
  return null;

ComboBox示例4:(轉換一個HTML標準select為combobox)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var form = new Ext.form.FormPanel({
   title:'轉換select元件為Ext.form.ComboBox的示例',
   labelSeparator :'：',
   labelWidth : 80,
   bodyStyle:'padding:5 5 5 5',
   frame : true,
   height:80,
   width:270,
   applyTo :'div1'
   items:[
   new Ext.form.ComboBox({
    name:'level',
    fieldLabel:'職稱等級',
    lazyRender : true,                   //這裡必須設定lazyRend er:true 否則不能正差顯示
    triggerAction: 'all',                //單擊觸發按鈕顯示全部資料
    transform : 'levelName'
   })
   ]
  })
});

Ext.form.TimeField時間選擇框
--- 主要配置專案表

配置項	型別	說明
altFormats	String	多個時間輸入格式組成的字串,不同的格式之間使用\|進行分割. 將使用這些格式來解析使用者的輸入資訊, 預設值為:'g:ia\|g:iA\|Gi a\|g:i A\|h:i\|g:i\|H:i\|ga\|ha\|gA\|h a\|g a\|g A\|gi\|hi\|gia\|hia\|g\|H'
format	String	顯示格式,預設為'g:i A'
maxValue	Date/String	列表中允許的最大時間,引數可以是javascript日期物件或字串
maxText	Stirng	當時間大於最大值時的錯誤提示資訊
minVAlue	Date/String	列表中允許的最小時間,引數可以是javascript日期物件或字串
minText	String	當時間小於最大值時的錯誤提示資訊
increment	Number	在時間類表中兩個相鄰選項見的時間間隔,預設為15分鐘
invalidText	String	不符合altFormats的提示

示例程式碼:
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  Ext.QuickTips.init();
  Ext.form.Field.prototype.msgTarget = 'side';//統一指定錯誤資訊提示方式
  var form = new Ext.form.FormPanel({
   title:'Ext.form.TimeField示例',
   labelSeparator :'：',//分隔符
   labelWidth : 80,//標籤寬度
   bodyStyle:'padding:5 5 5 5',//表單邊距
   frame : true,
   height:100,
   width:300,
   applyTo :'form',
   items:[
   new Ext.form.TimeField({
    id:'time',
    width : 150,
    maxValue : '18:00',                                    //最大時間
    maxText : '所選時間應小於{0}',           //大於最大時間的提示資訊
    minValue : '10:00',                                    //最小時間
    minText : '所選時間應大於{0}',           //小於最小時間的提示資訊
    maxHeight : 70,                                           //下拉選單的最大高度
    increment : 60,                                            //時間間隔為60分鐘
    format : 'G時i分s秒',                                //G標示為24時計時法
    invalidText :'時間格式無效',                 //格式無效提示
    fieldLabel:'時間選擇框'
   })
   ]
  })
});

Ext.form.DateField日期選擇框
--- 擴充套件自Ext.form.TriggerField元件
--- 主要配置專案表

配置項	型別	說明
altFormats	String	多個日期輸入格式租車個的自負串,不同格式之間用"\|"進行分割. 將使用這些格式來解析用用的輸入資訊. 預設值為:'m/d/Y\|m-d-y\|m-d-Y\|m/d\|m-d\|md\|mdy\|mdY\|d\|Y-m-d'
disabledDates	Array	禁止選擇的日期組成的陣列,配置格式見下表, disabledDates的格式設定必須要與format的格式相同
disabledDatesText	String	選擇禁選日期時的提示資訊
disabledDays	Arrat	選擇禁選的興起組成的陣列, 0代星期日, 1代表星期一,以此類推, 預設值為空
disabledDaysText	String	選擇禁選日期時的提示資訊
format	String	日期顯示格式,預設為:"m/d/y"
maxValue	Date/String	允許選擇的最大日期設定的格式要與altFormats中的預設格式相同
maxText	String	選擇禁選日期時的提示資訊
minValue	Date/String	允許選擇的最小日期設定的格式要與altFormats中的預設格式相同
minText	String	選擇禁選日期時的提示資訊

--- disabledDates配置格式及說明

示例	說明
["03/08/2003", "09/16/2003"]	禁止選擇2003年3月8日和2003年9月16日
["03/08", "09/16"]	禁止選擇每年的3月8日和9月16日
["^03/08"]	匹配日期的開始部分,禁止選擇每年的3月8日
["03/../2006"]	禁止選擇2006年3月的任何一天
["^03"]	禁止選擇任何3月中的任何一天

--- 日期選擇框(Ext.form.DateField)示例:
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  Ext.QuickTips.init();
  Ext.form.Field.prototype.msgTarget = 'side';//統一指定錯誤資訊提示方式
  var form = new Ext.form.FormPanel({
   title:'Ext.form.DateField示例',
   labelSeparator :'：',//分隔符
   labelWidth : 80,//標籤寬度
   bodyStyle:'padding:5 5 5 5',//表單邊距
   frame : true,
   height:100,
   width:300,
   applyTo :'form',
   items:[
   new Ext.form.DateField({
    id:'date',
    format:'Y年m月d日',//顯示日期的格式
    maxValue :'12/31/2008',//允許選擇的最大日期
    minValue :'01/01/2008',//允許選擇的最小日期
    disabledDates : ["2008年03月12日"],//禁止選擇2008年03月12日
    disabledDatesText :'禁止選擇該日期',
    disabledDays : [0,6],//禁止選擇星期日和星期六
    disabledDaysText : '禁止選擇該日期',
    width : 150,
    fieldLabel:'日期選擇框'
   })
   ]
  })
});

Ext.form.HtmlEditor HTML編輯器
--- 主要配置專案表

配置項	類型	說明
createLinkText	String	建立連線提示框中預設的提示資訊
defaultLinkValue	String	建立連線的預設值,預設為http://
fontFamilies	Array	一個字型陣列
buttonTips	Object	編輯器工具欄中按鈕的提示資訊配置物件集合,用來自定義工具欄的提示資訊,具體配置方式參見下示例

示例:
Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  Ext.QuickTips.init();//使用HtmlEditor之前必須初始化提示
  var form = new Ext.form.FormPanel({
   title:'Ext.form.HtmlEditor示例',
   labelWidth : 70,//標籤寬度
   labelSeparator :'：',//分隔符
   width : 530,
   frame : true,
   applyTo :'form',
   items:[new Ext.form.HtmlEditor({
    name:'htmlContent',
    id : 'htmlContent',
    height:150,
    width : 440,
    fieldLabel:'HTML欄位',
    createLinkText : '建立超連結',//建立連線的提示資訊
    defaultLinkValue : "http://www.",//連線的預設格式
    enableAlignments : true,//起用左、中、右對齊按鈕
    enableColors : true,//起用前景色、背景色選擇按鈕
    enableFont : true,//起用字型選擇按鈕
    enableFontSize : true,//起用字型增大和縮寫按鈕
    enableFormat : true,//起用粗體、斜體、下劃線按鈕
    enableLinks : true,//起用建立連線按鈕
    enableLists : true,//起用列表按鈕
    enableSourceEdit : true,//起用原始碼編輯按鈕
    fontFamilies:['宋體','隸書','黑體'],//字型列表
    buttonTips :{
     bold : {
      title: 'Bold (Ctrl+B)',
      text: '粗體'
     },
     italic : {
      title: 'Italic (Ctrl+I)',
      text: '斜體'
     },
     underline : {
      title: 'Underline (Ctrl+U)',
      text: '下劃線'
     },
     increasefontsize : {
      title: 'Grow Text',
      text: '增大字型'
     },
     decreasefontsize : {
      title: 'Shrink Text',
      text: '縮小字型'
     },
     backcolor : {
      title: 'Text Highlight Color',
      text: '背景色'
     },
     forecolor : {
      title: 'Font Color',
      text: '前景色'
     },
     justifyleft : {
      title: 'Align Text Left',
      text: '左對齊'
     },
     justifycenter : {
      title: 'Center Text',
      text: '居中對齊'
     },
     justifyright : {
      title: 'Align Text Right',
      text: '右對齊'
     },
     insertunorderedlist : {
      title: 'Bullet List',
      text: '專案符號'
     },
     insertorderedlist : {
      title: 'Numbered List',
      text: '數字編號'
     },
     createlink : {
      title: 'Hyperlink',
      text: '超連線'
     },
     sourceedit : {
      title: 'Source Edit',
      text: '切換原始碼編輯模式'
     }
    }
   })]
  })
});

Ext.form.FieldSet欄位集
--- 擴充套件自Ext.Panel皮膚
--- 主要配置專案表

配置項	類型	說明
checkboxName	String	指定欄位集中用於展開或隱藏欄位集皮膚的checkbox(選擇框) 的名字,該屬性只有在checkboxToggle為true時生效
checkboxToggle	Boolean	設定是否顯示欄位集的checkbox選擇框,通過設定該選擇框可以實現隱藏或顯示欄位集的功能.預設為false
labelWidth	Number
collapsed	Boolean	初始狀態是否是關閉還是展開的, 預設為true即展開的

示例:

Ext.onReady(function(){

  var form = new Ext.form.FormPanel({
   title:'Ext.form.FieldSet示例',
   labelWidth : 40,//標籤寬度
   width : 220,
   //height:400,
   frame : true,
   renderTo :'hello',
   items:[
   new Ext.form.FieldSet({
    title:'產品資訊',
    height:80, //注意:需要設定高度
    labelSeparator :'：',//分隔符
    items:[
     new Ext.form.TextField({
      fieldLabel:'產地'
     }),
     new Ext.form.NumberField({
      fieldLabel:'售價'
     })
    ]
   }),
   new Ext.form.FieldSet({
    title:'產品描述',
    height:90,           //注意:需要設定高度
    checkboxToggle : true,
    checkboxName : 'description',
    collapsed:true, //初始時是關閉的
    items:[
     new Ext.form.TextArea({
      fieldLabel:'簡介',
      width : 130
     })
    ]
   })
   ]
  })
});

Ext學習筆記10-表單續
2012-07-07
筆記
Object C學習筆記9-字串NSMutableString
2014-02-15
Object筆記字串
Ext2.x學習筆記
2020-04-05
筆記
Ext學習筆記6-Ajax
2012-07-07
筆記
Pytest學習筆記9-失敗重跑
2021-07-03
筆記
Ext學習筆記11-佈局
2012-07-07
筆記
Flutter學習筆記（13）--表單元件
2019-08-01
Flutter筆記元件
Ext學習筆記1-基礎概念
2012-07-07
筆記
Ext學習筆記2-物件導向
2012-07-07
筆記物件
Ext學習筆記3-事件及元件
2012-07-07
筆記事件元件
Ext學習筆記5-window窗體
2012-07-07
筆記
django book2 表單學習筆記
2014-02-25
Django筆記
angular學習筆記(二十)-表單驗證
2014-05-27
Angular筆記
Symfony2學習筆記之表單
2014-08-06
筆記
SpringMVC學習筆記9-靜態資源對映
2020-12-14
SpringMVC筆記
Ext學習筆記8-資料模型及工具欄選單欄
2012-07-07
筆記模型
EXTJS 視窗Ext.Window()學習筆記
2014-07-31
JS筆記
Ext學習筆記7-對話方塊
2012-07-07
筆記
<react學習筆記(9)>表單控制元件
2018-12-27
React筆記控制元件
HTML5 學習筆記表單屬性
2015-06-06
HTML筆記
bootstrap學習筆記一登入水平表單
2014-07-16
boot筆記
temp表學習筆記
2008-01-30
筆記
CUUG 外部表學習筆記
2014-01-04
筆記
分割槽表學習筆記
2012-10-17
筆記
Git 簡單使用學習筆記
2018-08-28
Git筆記
mysql修改表欄位學習筆記
2018-07-25
MySql筆記
MySql 學習筆記四：表的拆分
2016-10-07
MySql筆記
jQuery 表單驗證學習手記
2021-09-09
jQuery
WORD SMART單詞學習筆記4
2016-05-17
筆記
numpy的學習筆記\pandas學習筆記
2018-03-18
筆記
hive學習筆記之四：分割槽表
2021-07-02
Hive筆記
表的聯結、運算子學習筆記
2010-12-01
筆記
DB2學習筆記 - 表空間
2007-02-04
DB2筆記
設計模式學習筆記——單例模式
2020-12-06
設計模式筆記單例
hive學習筆記之三：內部表和外部表
2021-07-01
Hive筆記
表單驗證——筆記
2017-10-11
筆記
IT學習筆記
2009-10-14
筆記
學習筆記
2024-04-14
筆記

配置項	型別	說明
prventScrollbars	Boolean	設定當文字內容溢位時是否顯示滾動條,設定為true則隱藏滾動條, 相當於設定overflow:hidden, 預設為false

配置項	類型	說明
hideTrigger	Boolean	是否隱藏觸發按鈕,預設為false
triggerClass	String	應用於觸發按鈕上的樣式
onTriggerClick	Function	觸發函式

Ext學習筆記9-表單

相關文章