ExtJs 第二章，Ext.form.Basic表單操作

本文轉載自查看原文 2014-09-04 21:47 2864 Web/ Ext.form/ Ext.form.field.Baisc/ Extjs

1、認識Ext.form.Panel表單面板

Ext.form.field.CheckBox 復選框 checkboxfield
Ext.form.CheckBoxGroup 復選框組 checkboxgroup
Ext.form.field.ComboBox 下拉列表框 combo
Ext.form.field.Date 日期選擇框 datefield
Ext.form.field.Display 文本展示組件 displayfield
Ext.form.FieldContainer 字段容器 fieldcontainer
Ext.form.FieldSet 字段集 fieldset
Ext.form.field.Hidden 隱藏域 hiddenfield
Ext.form.field.HtmlEditor HTML文本編輯器 htmleditor
Ext.form.Label 標簽字段 label
Ext.form.field.Number 數字選擇框 numberfield
Ext.form.field.Radio 單選框 radio
Ext.form.field.RadioGroup 單選框組 radiogroup
Ext.form.field.Spinner 微調組件 spinnerfield
Ext.form.field.TextArea 多行文本框 textareafield
Ext.form.field.Text 單行文本框 textfield
Ext.form.field.Time 事件選擇框 teimefield
Ext.form.field.Trigger 觸發按鈕文本框 triggerfield
Ext.form.field.File 文件上傳字段 filefield

2、Ext.form.Panel主要配置項目表

buttons Array 一個按鈕（Ext.button.Button）配置對象的數組，按鈕將被添加到表單的頁腳當中示例：buttons:[{text:"Button1"}]
layout String 表單布局，默認為anchor
minButtonWidth Number 表單按鈕的最小寬度默認為75px
pollForChanges Boolean 是否循環檢查表單值的變化
pollInterval Number 循環檢查表單的時間間隔，默認為500毫秒
items Mixed 一個子元素或子元素的數組
title String 表單標題

3、Ext.form.FormPanel常用方法表

checkChange:void 強制檢查表單每個字段是否發生了變化
getForm():Ext.from.BasicForm 獲取表單面板對應的基本表單對象
load(Object options):void 加載表單內容，該方法是Ext.form.Basic-load的代理
startPolling(Number interval):void 開始循環檢查表單是否發生了變化參數說明：循環管檢查的時間，單位是毫秒
stopPolling:void 停止startPolling啟動的內置任務
submit(Object options):void 提交表單內容，該方法是Ext.form.Basic-submit的代理

4、Ext.form.field.Base基礎表單字段,及主要配置項目表

　　主要提供對表單一般功能的支持，包括默認事件的處理、渲染、公共功能的定義等表單的必須的屬性。它通過混入(mixin)Ext.from.field.Field獲得表單的處理和驗證功能，通過混入(mixin)Ext.from.field.Labelable 獲得了標簽錯誤信息的顯示功能。大多數情況下都是使用它的子類例如：Ext.form.field.Text、Ext.form.field.Checkbox 不是直接創建Ext.form.field.Base的實例。如果需要創建自定義的表單Ext.from.field.Base

dirtyCls String 設置表單值被修改后的樣式
fieldCls String 設置表單字段的樣式默認為'x-form-field'
foucsCls String 設置表單字段獲得焦點時的樣式 'x-form-foucs'
id String 控件的唯一標示，默認系統會自動生成一個唯一標示
inputid String 這個id將會被應用於生成的input元素
invalidText String 設置表單字段值無效並且沒有提供信息時的文字
inputType String 字段類型默認為text
name 字段名（字段提交到后台的名稱）默認為undefined
readOnly Boolean 設置字段是否是只讀

5、混入Ext.form.field.Field

　　mixin:Ext.form.field.Field

disabled Boolean true為禁用組件，禁用狀態下的組件不能被提交
submitValue 設置表單字段非禁用狀態下是否提交表單值默認為true
validateOnChange 設置值在發生變化時，是否立即校驗值的有效性默認為true
value 字段的初始化值

6、混入Ext.form.Labelable

　 mixin:Ext.form.Labelable

activeError String 如果設置該值，組件在第一次被渲染時，該值被作為錯誤信息展示默認為Undefined 組件創建之后可以通過 setActiveError或unsetActiveError進行修改
activeErrorsTpl Ext.XTemplate 錯誤信息模板
autiFitErrors Boolean 設置是否自動調節組件體的范圍，以便在組件范圍內顯示'side'或'under'狀態的錯誤信息，默認為true
fieldLabel String 設置字段標簽，它將同labelSparator一起被添加，它的位置決定於labelAlign，labelWidth和labelPad配置項，默認為undefined
hideEmptyLabel Boolean 設置為true則自動隱藏內容為空的標簽
hideLabel 設置為true則完全隱藏表單標簽（fieldLabel和labelSeparator）默認為false
labelAlign String 設置表單標簽fieldLabel的位置：left,right,top
labelPad Number 設置表單標簽和表單字段之間的空白距離，默認為5像素
labelSeparator String 設置表單標簽和表單字段之間的分隔符，默認為undefined
lableStyle String 樣式字符竄，默認為undefined
labelWidth Number 設置表單標簽的寬度僅當labelAlign設置為left或right時生效，默認為100像素
labelableRebderTpl Array/string/Ext.XTmplate 表單標簽模板
msTarget String 設置錯誤信息提示位置，包括：qtip:顯示一個浮動的提示信息，title：顯示一個瀏覽器的浮動提示信息，under:在字段下方顯示一個提示信息，side:在字段的右邊顯示一個提示信息，none：不顯示提示信息,[element id]:直接將錯誤信息添加到指定的元素的innerHTML屬性
preventMark Boolean true則不顯示錯誤信息默認為false

創建表單

8、Ext.from.field.Text組件主要配置項目表

　　Ext.from.field.Text組件擴展自Ext.form.field.Base它是一個基本的文本輸入字段，可以直接用來代替input type="text"

allowBlank Boolean 是否允許為空，默認為true
blankText String 驗證失敗后顯示的提示信息
disableKeyFilter Boollean 設置為true 則禁用鍵盤輸入過濾
emptyCls String 設置應用空字段的樣式默認是“x-form-empty-field”
emptyText String 在一個空字段中默認顯示的信息
enableKeyEvents Boolean 是否啟用按鍵事件代理默認為false
enforceMaxLength Boolean 是否強制限制輸入的最大長度默認為false
grow Boolean 是否隨着內容的增多而自動增長默認為false
growMax Number 字段生長的最大寬度，默認為800
growMin Number 字段生長的最小寬度，默認為30
makRe RegExp 一個輸入掩碼的正則表達式，它將過濾掉不匹配的鍵盤輸入
maxLength Number 允許輸入的最大長度默認為 Number.MAX_VALUE
regex RexExp 一個用於驗證的javascript正則表達式
regexText String 正則表達式驗證失敗后的提示信息，默認為空
selectOnFocus Boolean 文本框獲取焦點的時候是否選中文字默認為false
stripChartsRe regExps 去除字符正則表達式，過濾掉不希望出現的字符
validator Function 一個自定義的驗證函數，當前值被傳入，驗證通過返回trur否則返回錯誤信息
vtype String 一個自定義類型的名字
vtypeText String 一個自定義的提示信息，用來代替vtype本身的提示信息

 1 //登錄表單
 2         var form2_login = new Ext.form.Panel({
 3             title: "Ext.from.field.Text示例", //表單標題
 4             bodyStyle: "padding:5 5 5 5", //表單邊距
 5             frame: true, //是否渲染表單
 6             height: 150, // 高度
 7             width: "auto", //寬度
 8             renderTo: "form2", //渲染到 [element id]
 9             defaultType: "textfield", //設置表單的默認類型
10             defaults: {//同意設置表單屬性的默認屬性
11                 lableSeparator: ":", //分隔符
12                 labelWidth: 50, //標簽寬度
13                 width: 150, //字段寬度
14                 allowBlank: false, //是否允許為空
15                 labelAlign: "left", //對齊方式
16                 msgTarget: "side"//在字段右邊顯示一個提示信息
17             },
18             items: [
19                 {
20                     fieldLabel: "用戶名", //顯示的值
21                     name: "userName", //name提交到后台的name
22                     selectOnFocus: true, //獲取焦點之后是否選中文本
23                     regex: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, //郵箱的正則
24                     regexText: "郵箱格式不正確"//驗證錯誤之后的提示信息
25                 },
26                 {
27                     name: "password",
28                     fieldLabel: "密碼",
29                     inputType: "password"//設置輸入類型為password
30                 }
31             ],
32             buttons: [
33                 {
34                     text: "登錄",
35                     handler: function () {
36                         form2_login.form.setValues({ userName: "xulei@com", password: "123456" })
37                     }
38                 }
39             ]
40  
41         }); //登錄表單

登錄表單

10、Ext.from.field.TextArea組件主要配置項目表

Ext.from.field.TextArea組件擴展自Ext.form.field.Text組件，可以直接用來代替input type="textarea"，基本的配置與Ext.from.field.Text相同，這里主要列出他的特殊的配置

cols Number 設置textarea原始的cols屬性，默認為4
enterIsSpecial Boolean 設置是否允許輸入控制字符
growAppend String 默認追加一個新行
growMax Number 字段伸展的最大高度，默認為1000
growMin Number 字段伸張的最小高度，默認為60
preventScrollbars Boolean 設置為true隱藏滾動條，默認為false

 1 //Ext.from.field.TextArea示例
 2        var from3_textarea = new Ext.form.Panel({
 3            title: "Ext.from.field.TextArea示例", //標題
 4            bidyStyle: "padding:5 5 5 5 ",
 5            frame: true, //是否渲染表單
 6            height: 120,
 7            width: "auto",
 8            renderTo: "form3", //渲染到哪里 [element id]
 9            items: [
10                {
11                    xtype: "textarea",
12                    fieldLabel: "備注", //顯示的文字
13                    id: "form3_textarea_meno", //id
14                    labelSeparator: ":", //分隔符
15                    labelWidth: 60, //標簽的寬度
16                    width: 200//字段的寬度
17                }
18            ],
19            buttons: [
20                {
21                    text: "確定",
22                    handler: getValues2
23                }
24   
25            ]
26        }); //Ext.from.field.TextArea示例結束
27   
28   
29        function getValues() {
30            var meno = from3_textarea.getForm().findField("form3_textarea_meno"); //得到多行文本域組件的對象
31            alert(meno.getValue()); //取得控件值
32        }
33   
34        function getValues2() {
35            var meno = from3_textarea.form.getValues();
36            alert(meno);
37        }

Ext.from.field.TextArea示例

12、Ext.from.field.Number組件主要配置項目表

　　　　Ext.from.field.Number是一個數字輸入組件，實現了自動的按鍵過濾盒數字驗證

allowDecimals Boolean 是否允許輸入小數，默認為true
autoStripChars Boolean 是否允許過濾掉不允許輸入的字符，默認為false
baseChars String 輸入的有效數字集合,默認為"0123456789"
decimalPrecision Number 輸入字符的精度，默認保留小數點后2位
step Number 步長，默認為1

 1 //創建Ext.form.field.Number示例
 2         var form4_number = new Ext.form.Panel({
 3             title: "Ext.form.field.Number示例", //標題
 4             bodyStyle: "padding:5 5 5 5",
 5             renderTo: "form4",
 6             height: 150,
 7             frame: true,
 8             width: "auto",
 9             defaultType: "numberfield",
10             defaults: {
11                 lableSeparator: ":",
12                 lableWidth: 50,
13                 width: 200,
14                 labelAlign: "left",
15                 msgTarget: "side"
16             },
17             items: [
18                 {
19                     fieldLabel: "整數",
20                     hideTrigger: true, //是否隱藏微調按鈕
21                     allowDecimals: false, //不允許輸入小數
22                     nanText: "請輸入有效的整數"//無效數字提示
23                 },
24                 {
25                     fieldLabel: "小數",
26                     allowDecimals: true, //允許輸入小數
27                     decimalPrecision: 2, //保留小數點后2位
28                     nanText: "請輸入有效的小數"//無效數字提示
29                 },
30                 {
31                     fieldLabel: "數字限制",
32                     baseChars: "12345"//數字輸入范圍
33                 },
34                 {
35                     fieldLabel: "數值限制",
36                     maxValue: 100, //最大值
37                     minValue: 50//最小值
38                 }
39  
40             ]
41  
42         }); //創建Ext.form.field.Number示例結束

創建Ext.form.field.Number示例

13、Ext.form.field.Picker主要配置項目表

Ext.form.field.Picker 通常不能被是實例化，而是使用它的子類，在子類中需要實現createPicker方法來創建於字段選擇的一個拾取器組件. ExtJs4.0中實現的拾取器組件共有三個，分別是：Ext.form.field.ComboBox(組合框)、 Ext.form.field.Date(日期選擇控件)、Ext.form.field.Time(時間選擇框)

editable Boolean 設置為false不允許用戶編輯，默認為true
mathFieldWidth Boolean 拾取器是否自動匹配字段寬度，默認為true
pickerAlign String 拾取器的對其位置，默認為“tl-bl?”

14、Ext.form.field.ComboBox主要配置項目表

Ext.form.field.ComboBox繼承自Ext.form.field.Picker組件，它支持自動完成、遠程加載數據、分頁等屬性它的配置在所有的組件中是比較復雜的。在一個實例中很難表達清楚，所以會在多個示例中展示。

allQuery String 一個發往服務器的用來查詢全部信息的字符串，默認為空字符串
autoSelect Boolean 設置是否自動選擇第一個列表項
defaultListConfig Object listConfig對象包括：emptyText:當輸入的值在列表項中不存在的時候的提示信息，默認為空文本、loadingText:默認加載提示為“Loadin…”、minWidth:70，下拉列表最小寬度為70像素、maxHeight:300,下拉列表最大高度為300像素、 shadow:"sides"默認的陰影顯示位置
delimiter String 在多選模式下用於分隔顯示的分隔符
displayField String 設置顯示在下拉列表中的字段名
valueField String 組合框的值字段
forceSelection Boolean 設置輸入的值是否必須是下列表中待選的值，true：輸入的值必須要在列表中存在，默認為false
listConfig Object 下拉列表配置對象，將其傳遞到Ext.view.BoundList的構造函數中
minChars Number 下拉列表自動選擇前用戶需要輸入的最小字符串數量，queryMode="remote" 默認為4；queryMode="local"默認為0；editable=false會使自動完成功能失效
multiSelect Boolean 設置是否允許多選，多個選中項按delimiter配置項中的分隔符進行拼接，顯示在字段紅，默認為false
pageSize Number 分頁大小設置下拉列表的的分頁大小，如果大於0會在下拉列表的頁腳位置自動創建一個分頁組件。該項只在mode="remote"時生效
queryDelay Number 設置從鍵入結束到發送查詢之間的查詢延遲時間 queryMode="remote"默認為500毫秒；queryMode="local"默認為10毫秒
queryMode String 設置下拉列表框中數據讀取模式 local：讀取本地數據；remote：讀取遠程數據
queryParam String 查詢的名字，默認為“query”將被傳遞到查詢字符串中
selectOnTab Boolean 是否使用鍵盤的Tab鍵選擇列表項，默認為true
store Ext.data.Store/Array 列表項中綁定的數據，默認為undefined
triggerAction 單擊按鈕時觸發的默認操作，有效值包括 all和query，設置query會使用raw value進行查詢，設置all會執行allQuery中的配置進行查詢
typeAhead Boolean 在輸入過程中是否自動選擇匹配的剩余部分文本，默認為false
typeAheadDelay 設置輸入過程匯總自動匹配剩余文本的延遲時間，默認為250毫秒
valueNotFoundText String 值不存在時的提示信息

 1 //Ext.form.field.ComboBox local 本地數據源
 2        //創建數據模型
 3        Ext.regModel("PostInfo", {
 4            fields: [
 5                { name: "province" },
 6                { name: "post" }
 7            ]
 8        });
 9  
10        ///創建組合框中顯示的數據源
11        var postStore = Ext.create("Ext.data.Store", {
12            model: "PostInfo",
13            data: [
14                { province: "北京", post: "100000" },
15                { province: "通縣", post: "101100" },
16                { province: "昌平", post: "102200" },
17                { province: "大興", post: "102600" },
18                { province: "密雲", post: "101500" },
19                { province: "延慶", post: "102100" },
20                { province: "順義", post: "101300" },
21                { province: "懷柔", post: "101400" }
22            ]
23        });
24  
25        var form9_combobox_local = new Ext.form.Panel({
26            title: "Ext.form.field.ComboBox local 本地數據源",
27            bodyStyle: "padding:5 5 5 5",
28            frame: true,
29            height: 100,
30            renderTo: "form9",
31            width: "auto",
32            defaults: {
33                labelSeparator: ":",
34                lableWidth: 60,
35                width: 200,
36                lableAlign: "left"
37            },
38            items: [
39                {
40                    xtype: "combo",
41                    listConfig: {
42                        emptyText: "未找到匹配項", //當值不在列表項中的提示信息
43                        maxHeight: 60//設置下列表中的最大高度為60像素
44                    },
45                    name: "form9_combobox_local_post",
46                    fieldLabel: "郵政編碼",
47                    triggerAction: "all", //單擊觸發按鈕時顯示全部信息
48                    store: postStore,
49                    displayField: "province", //顯示的字段
50                    valueField: "post", //value字段
51                    queryMode: "local", //本地模式
52                    forceSelection: true, //要求輸入的值必須在列表中存在
53                    typeAhead: true, //允許自動匹配
54                    value: "102600"//默認選擇項
55                }
56            ]
57        }); //Ext.form.field.ComboBox local 本地數據源結束

Ext.form.field.ComboBox local 本地數據源

 1 //Ext.form.field.ComboBox remote 遠程數據源
 2  
 3        //常見數據模型
 4        Ext.regModel("BookInfo", {
 5            fields: [
 6                { name: "BookName" }
 7            ]
 8        });
 9  
10        ///使用數據代理創建 數據源
11        var form10_data = Ext.create("Ext.data.Store", {
12            model: "BookInfo",
13            proxy: {
14                type: "ajax", //Ext.data.AjaxProxy
15                url: "../../../ajax/Ext.form.field/ComboBox.ashx",
16                reader: {
17                    type: 'json'
18                },
19                writer: {
20                    type: 'json'
21                }
22            }
23        });
24  
25        var form10_combobox_remote = new Ext.form.Panel({
26            title: "Ext.form.field.ComboBox remote 遠程數據源",
27            frame: true,
28            height: 100,
29            width: "auto",
30            renderTo: "form10",
31            bodyStyle: "padding:5 5 5 5",
32            defaults: {
33                labelSeparator: ":",
34                labelWidth: 70,
35                Width: 200,
36                labelAlign: "left"
37            },
38            items: [
39                {
40                    xtype: "combo",
41                    fieldLabel: "書籍列表",
42                    listConfig: {
43                        loadingText: "正在加載書籍信息",
44                        emptyText: "未找到匹配項",
45                        maxHeight: 60
46                    },
47                    allQuery: "allbook", //第一次加載點擊觸發時顯示所有（key="searchbook" value="allbook"后台接收）
48                    minChars: 3, //下拉列表中需要用戶輸入的最小字符的數量
49                    queryDelay: 300, //延遲時間
50                    queryParam: "searchbook", //輸入值異步提交時 key="searchbook" value="輸入的值"
51                    triggerAction: "all", //單擊觸發按鈕顯示全部數據
52                    store: form10_data,
53                    displayField: "BookName",
54                    valueField: "BookName",
55                    queryMode: "remote"
56                }
57            ]
58        });
59  
60        //Ext.form.field.ComboBox remote 遠程數據源結束

Ext.form.field.ComboBox remote 遠程數據源

服務器

 1 <%@ WebHandler Language="C#" Class="ComboBox" %>
 2  
 3 using System;
 4 using System.Web;
 5 using System.Web.Script.Serialization;
 6 using System.Collections.Generic;
 7 using System.Linq;
 8  
 9 public class ComboBox : IHttpHandler
10 {
11     private JavaScriptSerializer jss = new JavaScriptSerializer();
12     private List<BookInfo> Data
13     {
14         get
15         {
16             List<BookInfo> list = new List<BookInfo>()
17             {
18                 new BookInfo(){ BookName="java編程思想"},
19                 new BookInfo(){ BookName="javascript程序設計"},
20                 new BookInfo(){ BookName="c++編程思想"},
21                 new BookInfo(){ BookName="c++入門"},
22                 new BookInfo(){ BookName="c++程序設計"},
23                 new BookInfo(){ BookName="php程序設計"},
24                 new BookInfo(){ BookName="php入門"},
25                 new BookInfo(){ BookName="php從入門到精通"}
26             };
27             return list;
28         }
29     }
30  
31  
32     public void ProcessRequest(HttpContext context)
33     {
34         context.Response.ContentType = "text/json";
35         string result = string.Empty;
36         string bookName = context.Request["searchbook"];
37         if (bookName.Equals("allbook"))
38         {
39             result = jss.Serialize(Data);
40         }
41         else
42         {
43             List<BookInfo> list = Data.Where(c => c.BookName.StartsWith(bookName)).ToList();
44             result = jss.Serialize(list);
45         }
46         context.Response.Write(result);
47     }
48  
49     public bool IsReusable
50     {
51         get
52         {
53             return false;
54         }
55     }
56  
57 }
58  
59 public class BookInfo
60 {
61     public string BookName { get; set; }
62 }

服務器端代碼

25、Ext.form.field.Timer主要配置項目表

　　 Ext.form.field.Timer擴展自Ext.form.field.Picker組件，是一個帶下拉選擇框的時間輸入字段，並且具有自動的時間驗證功能。

altFormats String 多個時間輸入格式組成的字符串
format String 顯示的格式默認為 g:i A
increment Number 在事件列表中兩個相鄰選項間的事件間隔
invalidText String 再輸入無效時間的時候的提示默認"{value} is not a time"
maxValue Date/String 列表中允許的最大時間，參數可以是javascript時間對象獲字符串
maxText String 輸入的時間大於最大時間的時候給的提示
minValue Date/String 列表中允許的最小時間，參數可以是javascript時間對象獲字符串
minText String 輸入的時間小於最大時間的時候給的提示
pickerMaxHeight Number 時間拾取器的最大高度，默認為300像素
submitFormat String 設置提交到服務器的日期格式,默認為 format

g 小時 12小時計數法不帶前綴0 1-12
G 小時 24小時計數法不帶前綴0 0-23
h 小時 12小時計數法帶前綴0 1-12
H 小時 24小時計數法帶前綴0 0-23
i 分鍾，帶前綴0 00-59
s 秒鍾，帶前綴0 00-59
a 午前午后的表示小寫表示 am pm
A 午前午后的表示大寫表示 AM PM
u 毫秒，帶前綴0 001-999

 1 //Ext.form.field.Timer
 2         //使用create創建對象，而不是使用new關鍵字
 3         var form11_timer = Ext.create("Ext.form.Panel", {
 4             title: "Ext.form.field.Timer示例",
 5             frame: true,
 6             renderTo: "form11",
 7             bodyStyle: "padding:5 5 5 5",
 8             height: 100,
 9             width: 300,
10             items: [
11                 {
12                     fieldLabel: "時間選擇器",
13                     xtype: "timefield",
14                     width: 200,
15                     labelSeparator: ":",
16                     msgTarger: "side",
17                     autoFitErrors: false, //展示錯誤信息時是否自動調整字段組件寬度
18                     maxValue: "18:00",
19                     maxText: "時間應小於{0}",
20                     minValue: "10:00",
21                     minText: "時間應大於{0}",
22                     pickerMaxHeight: 70,
23                     increment: 60, //相隔60分鍾
24                     format: "G時i分s秒",
25                     invalidText: "時間格式無效"
26                 }
27             ]
28         }); //Ext.form.field.Timer結束

Ext.form.field.Timer

27、Ext.form.field.Date配置項目表

altFormats String 多個時間輸入格式組成的字符串
disabledDates Array 禁止選擇的日期組成的數組說明：["03/08/2014","03/09/2014"]:禁止選擇2014年3月8號和2014年3月9日；["03/08","03 /09"]：禁止選擇每年的3月8日和3月9日；["03/../2014"]:禁止選擇2014年的3月的任何一天；["^03"]:禁止選擇任何年份 3月中的任何一天
disabledDatesText String 選擇禁選日期的時候給的提示
disabledDays Array 禁止選擇的星期0代表星期日，以次類推
disabledDaysText String 擇禁選星期的時候給的提示
format String 日期顯示的格式默認為 m/d/y
invalidText String 再輸入無效時間的時候的提示
maxValue Date/String 列表中允許的最大時間，參數可以是javascript時間對象獲字符串
maxText String 輸入的時間大於最大時間的時候給的提示
minValue Date/String 列表中允許的最小時間，參數可以是javascript時間對象獲字符串
minText String 輸入的時間小於最大時間的時候給的提示
showTody boolean 設置是否顯示”今天“選擇按鈕，默認為true
submitFormat String 設置提交到服務器的日期格式,默認為 format

 1 //Ext.form.field.Date 示例
 2         var form12_date = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.Date 示例",
 4             frame: true,
 5             height: 100,
 6             width: "auto",
 7             renderTo: "form12",
 8             bodyPadding: 5,
 9             items: [
10                 {
11                     fieldLabel: "選擇日期",
12                     labelSeparator: ":",
13                     xtype: "datefield",
14                     msgTarget: "side",
15                     autoFitErrors: false,
16                     format: "Y年m月d日",
17                     maxValue: "12/31/2014",
18                     minValue: "01/01/2014",
19                     disabledDates: ["2014年08月08日"],//設置的格式必須與 format格式相同，否則不會起作用
20                     disabledDatesText: "禁止選擇該日期",
21                     disabledDays: [0, 6], //禁止選擇周末
22                     disabledDaysText: "禁止選擇周末",
23                     width: 320,
24                     value: "12/31/2014"
25                 }
26             ]
27 
28         }); //Ext.form.field.Date 示例

Ext.form.field.Date 示例

28、Ext.form.field.Hidden 示例

該字段用於在表單中存儲隱藏字段，因為是字段隱藏，該組件沒有圖形化的表現形式，可以直接用來替換html表單中的input type="hidden". 下圖中的年齡一欄被隱藏，但是並不會影響它的提交。

 1  //Ext.form.field.Hidden
 2         var form13_hidden = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.Hidden示例",
 4             frame: true,
 5             bodyStyle: "padding:5 5 5 5",
 6             height: 100,
 7             width: "auto",
 8             renderTo: "form13",
 9             defaultType: "textfield",
10             defaults: {
11                 labelSeparator: ":",
12                 labelWidth: 70,
13                 width: 200,
14                 labelAlign: "left"
15             },
16             items: [
17                 {
18                     name: "username",
19                     fieldLabel: "姓名"
20                 },
21                 {
22                     name: "age",
23                     xtype: "hidden"
24                 },
25                 {
26                     name: "sex",
27                     fieldLabel: "性別"
28                 }
29             ]
30         }); //Ext.form.field.Hidden

Ext.form.field.Hidden

30、Ext.form.field.HtmlEditor配置項目表

　　是一個HTML文本編輯器

createLinkText String 創建鏈接提示框中的默認提示信息
defaultLinkValue String 創建連接的默認值，默認為http://
defaultValue String 編輯器的默認值
enableAlignments Boolean 是否啟用左中右對齊按鈕
enableColors Boolean 是否啟用背景色前景色按鈕，默認為true
enableFont boolean 是否啟用字體選擇按鈕，默認為true；在蘋果瀏覽器中不被支持
enableFontDSize boolean 是否啟用字體調節器默認為true
enableFormat boolean 是否啟用字體選擇器默認為true
enableLinks boolean 是否啟用創建鏈接按鈕默認為true
enableSourceEdit boolean 是否啟用代碼編輯按鈕默認為true;在蘋果瀏覽器中不被支持
fontFamilies Array 一個字體數組
buttonTips Object 編輯器工具按鈕中的提示信息配置對象集合

 1 ///Ext.form.field.HtmlEdit示例
 2         var form14_htmledit = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.HtmlEdit示例",
 4             frame: true,
 5             renderTo: "form14",
 6             items: [
 7                 {
 8                     fieldLable: "HTML編輯器",
 9                     xtype: "htmleditor",
10                     value: "ExtJs4登場",
11                     createLinkText: "創建超鏈接",
12                     defaultLinkValue: "http://www.", //鏈接的默認格式
13                     enableAlignments: true, //啟用左 中 右 按鈕
14                     enableColors: true,
15                     enableFont: true,
16                     enableFontSize: true,
17                     eaableFormat: true,
18                     enableLinks: true,
19                     enableLists: true,
20                     enableSoureEdit: true,
21                     fontFamilies: ["宋體", "隸書", "黑體", "微軟雅黑"],
22                     buttonTips: {
23                         bold: {
24                             title: "Bold (Ctrl + B)",
25                             text: " 粗體"
26                         },
27                         italic: {
28                             title: "italic (Ctrl + I)",
29                             text: " 斜體"
30                         },
31                         underline: {
32                             title: "underline (Ctrl + U)",
33                             text: " 下划線"
34                         },
35                         increasefontsize: {
36                             title: "Grow Text",
37                             text: " 增大字體"
38                         },
39                         decreasefontsize: {
40                             title: "Shrink Text",
41                             text: "縮小字體"
42                         },
43                         backcolor: {
44                             title: "Text Heightlight Color",
45                             text: "背景色"
46                         },
47                         forecolor: {
48                             title: "font color",
49                             text: "前景色"
50                         },
51                         justifyleft: {
52                             title: "Align text left",
53                             text: "左對齊"
54                         },
55                         justifycenter: {
56                             title: "Align text center",
57                             text: "居中對齊"
58                         },
59                         justifyright: {
60                             title: "Align text right",
61                             text: "具有對齊"
62                         },
63                         insertunorderedlist: {
64                             title: "Bullet list",
65                             text: "項目符號"
66                         },
67                         insertorderedlist: {
68                             title: "Numbered list",
69                             text: "數字符號"
70                         },
71                         createlink: {
72                             title: "Hyperlink",
73                             text: "超鏈接"
74                         },
75                         sourceedit: {
76                             title: "source edit",
77                             text: "切換代碼編輯模式"
78                         }
79 
80                     }
81 
82                 }
83             ]
84         }); ///Ext.form.field.HtmlEdit示例

Ext.form.field.HtmlEdit示例

32、Ext.form.field.Display 只讀文本字段

1 . htmlEncode Boolean 設置對展示的內容是否進行html編碼默認為false

 1  //Ext.form.field.Display
 2         var form15_display = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.Panel",
 4             width: 200,
 5             frame: true,
 6             renderTo: "form15",
 7             bodyPadding: 5,
 8             items: [
 9                 {
10                     fieldLabel: "展示字段",
11                     xtype: "displayfield",
12                     value: "<b>ExtJs4登場</b>",
13                     labelWidth: 70,
14                     labelSeparator: ":"
15                 }
16             ]
17         }); //Ext.form.field.Display

Ext.form.field.Display

 1 //Ext.form.field.Display
 2         var form15_display = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.Panel",
 4             width: 200,
 5             frame: true,
 6             renderTo: "form15",
 7             bodyPadding: 5,
 8             items: [
 9                 {
10                     fieldLabel: "展示字段",
11                     xtype: "displayfield",
12                     value: "<b>ExtJs4登場</b>",
13                     labelWidth: 70,
14                     labelSeparator: ":"
15                 }
16             ]
17         }); //Ext.form.field.Display

Ext.form.field.Display

34、Ext.form.Label標簽字段

forId String 設置與標簽地段進行關聯的目標組件的inputid
HTML String 設置顯示子啊標簽字段的innerhtml
text String 標簽的文本

35、Ext.form.field.Fiel文件上傳字段

buttonConfig Object 按鈕配置項
buttonMargin Number 設置按鈕與文本之間的距離默認為3像素，只有在buttonOnly=false時生效
buttonOnly booleab 設置是否只顯示上傳按鈕，設置true文本框則不顯示出來默認為false
buttonText string 設置按鈕文字默認為‘Browse……’

 1 //Ext.form.field.File 示例
 2         var form16_file = Ext.create("Ext.form.Panel", {
 3             title: "Ext.form.field.File 示例",
 4             frame: true,
 5             bodyPadding: 5,
 6             width: 500,
 7             height: 100,
 8             renderTo: "form16",
 9             defaults: {
10                 labelSeparator: ":",
11                 lableWidth: 70,
12                 width: 200,
13                 allowBlank: false, //不允許為空
14                 labelAlign: "left",
15                 msgTarget: "side"
16             },
17             items: [
18                 {
19                     xtype: "filefield",
20                     name: "photo",
21                     fieldLabel: "照片",
22                     anchor: "100%",
23                     buttonText: "選擇照片"
24                 }
25             ],
26             buttons: [
27                 {
28                     text: "上傳文件",
29                     handler: function () {
30                         var formObj = form16_file.getForm();
31                         if (formObj.isValid()) { //是否通過驗證
32                             form.submit({
33                                 url: "/ajax/Ext.form.field/File.ashx",
34                                 waitMsg: "正在上傳文件，請稍后……",
35                                 succuss: function (fp, o) {
36                                     Ext.Msg.alert("提示", "你的照片文件'" + o.result.files + "'已經上傳！");
37                                 },
38                                 failed: function () {
39                                     Ext.Msg.alert("提示", "上傳失敗！");
40                                 }
41                             });
42                         }
43 
44                     }
45                 }
46             ]
47 
48         }); //Ext.form.field.File 示例

Ext.form.field.File 示例

后台代碼

 1 <%@ WebHandler Language="C#" Class="File" %>
 2 
 3 using System;
 4 using System.Web;
 5 
 6 public class File : IHttpHandler
 7 {
 8 
 9     public void ProcessRequest(HttpContext context)
10     {
11         context.Response.ContentType = "text/plain";
12         string result = "{success:true,files:'sfsfsfs'}";
13         context.Response.Write(result);
14     }
15 
16     public bool IsReusable
17     {
18         get
19         {
20             return false;
21         }
22     }
23 
24 }

后端代碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 深入淺出ExtJS 第二章 Ext框架基礎操作系統——第二章（一）第二章第二章習題二第二章-導數第二章、診斷群論第二章（2）第二章函數第二章 Sysrepo常用操作命令 JDBC | 第二章: JDBC之批量更新,添加,和刪除操作