dojox/form/Manager (part 2)

簡介

這篇還是講 dojox/form/Manager（表單管理員）。上篇介紹 dojox/form/Manager 時，所用的範例裡，所有的輸入欄位都用宣告法建立，表單的處理也很簡單。但碰到比較複雜的表單時，有些欄位要和其它欄位連動，因此得用程式法動態建立輸入欄位，這時又該如何處理呢？

用宣告法所建立的表單管理員及其它位於表單管理員容器中，也就是 <form></form> 之間，用宣告法所建立的輸入欄位，在剖析器 (parser) 對 HTML 進行剖析時，剖析器會同時將這些輸入欄位的 dijit 納入表單管理員的管理。但是那些透過程式法建立的輸入欄位，在剖析器剖析 HTML 時並不存在，因此也無法納入表單管理員的管理。所以，在用程式法建立完輸入欄位後，要跟表單管理員註冊 (register)，表單管理員才知道要將這個新建的 dijit 納入管理。如果又動態的將該欄位刪除，也得向表單管理員取消註冊 (unregister)，以脫離表單管理員的管理。因為向表單管理員註冊，就會被納管，所以 dijit 的掛載點就算不在表單管理員的容器之中也沒有關係。

範例

這個範例的情境和上篇一樣，不同的是，只用程式法建立了一個文字輸入欄位，不管輸入什麼值，按下 submit 按鈕後，欄位值都會被改成 Blablabla。

CSS

<style>
input, textarea {
    font-family:monospace;
}
</style>

上列的 CSS 碼將輸入欄位的字型改成定寬 (Fixed-Width) 字型，這樣欄位的寬度比較好計算。

HTML

<body class="claro">
    
        Type a word:
        
    
    
    
</body>

Script

第 20 行定義 name 屬性，這個屬性一定要給，而且一定得在這裡給，不然 gatherFormValues() 會抓不到這個欄位的值。要特別注意的是，在 HTML 這個 dijit 的掛載點那裡不能給 name 屬性，不然只有 formWidgetValue() 可以取得該欄位的值，gatherFormValues() 卻抓不到。

第 25~26 行將這個 dijit 向表單管理員註冊納管。如果要取消註冊，就用 form.unregesterWidget(word) 來取消註冊。表單管理員納管的所有 dijit，都放在表單管理員的 formWidgets 屬性下。

其它的用法，就沒什麼兩樣了。

熊伯的外接硬碟

2015年9月30日星期三