Extjs中常用表單介紹與應用

知道表單面板如何建立 了解表單面板中xtype的型別的應用 知道表單面板如何驗證，繫結，取值 綜合應用表單面板（玩轉它）

目標:

知道表單面板如何建立

了解表單面板中xtype的型別的應用

知道表單面板如何驗證，繫結，取值

綜合應用表單面板（玩轉它）

內容:

首先我們要理解的是formpanel也是繼承panel元件的。所以它有著panel的屬性

要建立乙個表單面板其實很簡單 var myformpanel=new ext.form.formpanel();

表單面板和面板一樣只是作為乙個容器出現的，需要我們使用items加入各控制項元素來豐富我們的表單面板，

defaults:{},此屬性提取了items中各元件項的共同屬性

對於xtype:在表單面板中非常有用，沒有必要每次都用new 來建立乙個元件，它定義了元件的型別，同時讓元件在載入後渲染。

複製**

**如下:

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

label ext.form.label

numberfield ext.form.numberfield

radio ext.form.radio

textarea ext.form.textarea

textfield ext.form.textfield

timefield ext.form.timefield

trigger ext.form.triggerfield

對於表單驗證，extjs提供了非常強大的支援，在後面的例項中大家可以發現

例項分析講解：

一，建立表單面板

複製**

**如下:

function read2() ],

frame:true,

bodystyle:'padding:10px 0px 1px 1px',

labelseparator:':',

labelalign:'right',

renderto:ext.getbody(),//為什麼這裡不可以用'id1'

defaults:,//提取共同屬性

注意：renderto:'id1' 這個時候表單面板顯示失效 想來很久不知道是怎麼一回事

二，基本表單組建的應用於說明 (通常情況下我們都是利用xtype來說明 items中元件的型別)

fieldset的應用

複製**

**如下:

表單面板中基本元件的介紹

複製**

**如下:

表單資料提交到伺服器 submit

submit: function(),

新增提交按鈕

buttons:[,]

新增提交方法：

本課**：

表單面板的綜合應用

複製**

**如下:

2 3

4 5

6

Extjs中常用表單介紹與應用

道表單面板如何建立 了解表單面板中xtype的型別的應用 知道表單面板如何驗證，繫結，取值 綜合應用表單面板 玩轉它 目標 知道表單面板如何建立 了解表單面板中xtype的型別的應用 知道表單面板如何驗證，繫結，取值 綜合應用表單面板 玩轉它 內容 首先我們要理解的是formpanel也是繼承pan...

Extjs常用函式介紹

extjs常用函式介紹 ext.util.format類 ext.util.format.capitalize teststr 將首字串的第乙個字母大寫！ext.util.format.ellipsis teststr,9 那麼就將字串擷取總長度為9，但最後三個字元卻要用.表示 ext.util.f...

常用表單介紹

1.extjs文字框 普通文字框之間的對比 var textfield new ext.textfield a za z0 9 可以使用正則來做驗證 regextext 使用者名稱不合法 必須以字母開頭,長度6 12位 驗證錯誤之後的提示資訊 width 300,寬度 height 300,高度 e...