ExtJS入門教程02,form也可以很優雅

2021-09-06 14:39:06 字數 2477 閱讀 1413

form中的子項,通常都是field控制項,而這些field控制項通常都會使用一些相同的配置,例如labelwidth、labelalign等,如果在每乙個field中設定這些屬性就會顯得比較繁瑣,這個時候我們就需要用到fielddefaults配置項:

,

items: [,]

}

向form中繫結資料的方法有好幾種,我們先來看看如何通過非同步的方式從伺服器來獲取資料的:

win.down(

"form"

).getform().load();

伺服器端返回的資料格式如下:

}

這個時候我們的form就會自動將data中的username和comment繫結到介面中:

前面提到,通過ajax非同步載入是眾多載入方式中的一種,這時候小夥伴開始問了,那麼其他的載入方式呢?

其他還有兩種,是用來載入本地(記憶體)資料的,例如我們已經存在了乙個data資料:

var 

data = ;

我們要把這個data繫結到form中,該怎麼做呢?看下面的**:

win.down(

"form"

).getform().setvalues(data);

一樣的效果,不再截圖了。

接下來是第三種方式,載入record資料。首先,我們的record是需要先定義model的,不了解model是什麼的朋友請移步》extjs 4.2 教程-04:資料模型

首先定義乙個資料模型:

ext.define(

"commentmodel"

, ,

]});

有了模型以後,我們需要來建立乙個模型的物件:

var 

comment = ext.create(

"commentmodel"

, );

接下來我們就該完成繫結了:

win.down(

"form"

).getform().loadrecord(comment);

這個時候是不是有些怕麻煩的小夥伴已經開始抱怨了,這麼麻煩啊……

其實不是這個樣子的,麻煩自然有麻煩的道理。使用這種繫結方法,我們可以方便的更新模型物件的資料:

win.down(

"form"

).updaterecord();

var

record = win.down(

"form"

).getrecord();

ext.messagebox.alert(

"提示"

, record.get(

"username"

));

看到了吧小夥伴,我們可以使用form逆向的更新record,是不是方便了很多呢?

submit()方法和load()方法的用法非常相似,我們可以通過submit方法非常方便的將form表單資料提交到伺服器:

win.down(

"form"

).submit(

});

我們來跟蹤一下伺服器接收到的資料:

小夥伴看看我們上面的form介面,右側空出很大一片,是不是很醜?

可能你會覺得為form和field加上width屬性,問題自然就解決了,但是如果我們改變了window的寬度呢?仍然去修改form和field嗎?

小夥伴們,是時候使用layout了!

關於extjs的layout,不明白的小夥伴可以參考我之前的文章》extjs 4.2 教程-08:布局系統詳解

接下來我們為window和form新增上布局配置:

,

items: [,]

}

再次開啟視窗,看看是不是好了很多:

接下來我們演示乙個較為複雜的form:

ext.onready(

function

() ,

items: [,]

},,]},

]},buttons: [,]

});win.show();

});

這是乙個稍微複雜一點的form,它用到了fieldcontainer來組織字段,效果如下:

小夥伴們,我決定把form的驗證放到明天的文章中進行介紹,請原諒我偷懶。謝謝各位!

ExtJS入門教程02,form也可以很優雅

form中的子項,通常都是field控制項,而這些field控制項通常都會使用一些相同的配置,例如labelwidth labelalign等,如果在每乙個field中設定這些屬性就會顯得比較繁瑣,這個時候我們就需要用到fielddefaults配置項 items 向form中繫結資料的方法有好幾種...

ExtJs 入門教程(我感覺挺好的)

extjs 入門教程一 學習方法 extjs 入門教程二 hello world extjs 入門教程三 窗體 window元件 extjs 入門教程四 表單 formpanel extjs 入門教程五 文字框 textfield extjs 入門教程六 按鈕 button extjs 入門教程七 ...

ExtJs 入門教程三 窗體 Window元件

1.如下 1 2327 2841 422.效果如下 3.window 元件常用的 屬性 方法及事件 一 屬性 plain 布林型別,true表示強制與背景色保持協調,預設值為false。resizable 布林型別,使用者是否可以調整窗體大小,預設值為true表示可以調整大小。maxinizable...