天天看點

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

在上一篇《extjs window 入門》中,我們已經看到了如何将一個form元件放到window中,今天我們來看看form的一些優雅的工作方式。

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

向form中綁定資料的方法有好幾種,我們先來看看如何通過異步的方式從伺服器來擷取資料的:

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

這個時候我們的form就會自動将data中的username和comment綁定到界面中:

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

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

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

我們要把這個data綁定到form中,該怎麼做呢?看下面的代碼:

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

首先定義一個資料模型:

有了模型以後,我們需要來建立一個模型的對象:

接下來我們就該完成綁定了:

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

其實不是這個樣子的,麻煩自然有麻煩的道理。使用這種綁定方法,我們可以友善的更新模型對象的資料:

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

submit()方法和load()方法的用法非常相似,我們可以通過submit方法非常友善的将form表單資料送出到伺服器:

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

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

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

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

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

接下來我們為window和form添加上布局配置:

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

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

接下來我們示範一個較為複雜的form:

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

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

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

如果認為此文對您有幫助,别忘了支援一下哦!

聲明:本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論,與本人所在機關沒有直接利益關系。非商業,未授權,貼子請以現狀保留,轉載時必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接。

轉載:http://www.cnblogs.com/youring2/p/extjs-starter-02-form.html

繼續閱讀