003-Webbuilder應用HTML表單

HTML和控件的混合程式設計

通常普通的表單界面使用UI控件來建構，對于複雜的界面也可以使用HTML來直接建構，WebBuilder中提供特定的文法可以把相關的控件比如日期控件插入到指定的DOM位置。HTML和控件的混合程式設計一方面可以使界面的建構更加靈活，另一方面可以充分利用元件庫件的強大功能，使兩者有機結合起來。

顯示html

所有的UI控件都具有html屬性，設定該屬性即可在該控件中顯示HTML.比如設定panel的html屬性可以在panel中顯示任意的HTML

把控件插入到HTML中

通過以下4種方法可以把控件插入到HTML中：

在dom的obj屬性中添加控件的JSON表達式

<div obj="{itemId:'name', allowBlank:'false', xtype:'textfield'}"></div>      

但是我這樣做隻能夠調用控件，但是控件裡面的屬性都拿不到。

在dom的obj屬性中綁定控件

<div obj="_controlItemId"><div>      

_controlItemId為添加到子產品根節點的控件，其itemId為controlItemId,_controlItemId指向控件的配置對象。注意使用該方法綁定的控件，控件的createInstance屬性必須為false

子產品根節點的控件位置

【sex,】【edu】就是根節點控件

下拉框引用鍵值配置器配置

調用鍵值配置器中存在的鍵值對時，必須設定keyName，keyName就是鍵名，比如我們這裡用到的sex和edu分别對應性别和學曆

隻要有鍵名就可以調用

預設鍵值使用順序

我在測試的時候發現，在填充pickList後

[['k1','v1'],['k2','v2'],['k3','v3']]      

即使keyName依舊存在對簡直配置器的引用，也會優先調用pickList靜态填充的内容。

在dom的内容中綁定控件

在dom的内容中可以添加以“##”為字首的控件綁定表達式，例如：

<p>##_controlItemId</p>      

_controlItemId為添加到子產品根節點的控件，其itemId為controlItemId,_controlItemId指向控件的配置對象。注意該方法綁定的控件，控件的createInstance屬性必須為false

在dom的内容中添加控件的JSON表達式

<p>##{itemId:'birthdate', xtype:'datefield', width:160}</p>      

使插入到HTML的控件立即生效

通常容器控件和其他一些控件如panel，comp提供屬性createObject,用于是否自動生成html中插入的控件執行個體。如果該屬性為true,當控件生成時，html中插入的控件執行個體也将同步生成。

此外也可以通過APi方法control.updateObject()

app.viewport1.update("<table## 标題><tr><td>這是動态生成的頁面</td><td obj="{itemId:'name', xtype:'textField', allowBlank:false, width:160}"></tr></table>")
app.viewpoint1.updateObject();//立即生成html中的執行個體      

注釋：最後一點好像沒用。

前端代碼

放在html屬性處：

<div style="padding:20px;">
  <h1 style="text-align:center;">員工錄用審批表</h1>
  <table style="border:3px solid #555;line-height:30px;" class="wb_tb" border="1" cellpadding="4">
    <tr>
      <td rowspan="6" align="center" width="25px">錄用員工資料</td>
      <td width="80px">姓名</td><td obj="{itemId:'name',allowBlank:false}"></td> 
      <td width="80px">性别</td><td obj="_sex"></td>
      
      <td width="80px">出生日期</td><td obj="{itemId:'birthdate',xtype:'datefield'}"></td>
    </tr>
    <tr>
      <td>學曆</td><td obj="_edu"></td>
      <td>畢業院校</td><td obj="{itemId:'school'}"></td>
      <td>專業</td><td obj="{itemId:'major'}"></td>
    </tr>
    <tr>
      <td>錄用部門</td><td colspan="3" obj="{itemId:'dept'}"></td>
      <td>錄用職位</td><td obj="{itemId:'duty'}"></td>
    </tr>
    <tr>
      <td>試用期期限</td><td colspan="3" obj="{itemId:'trial'}"></td>
      <td>入公司日期</td><td obj="{itemId:'entryDate',xtype:'datefield'}"></td>
    </tr>
    <tr>
      <td>試用期工資</td><td colspan="3" obj="{itemId:'salary1',xtype:'numberfield'}"></td>
      <td>轉正工資</td><td obj="{itemId:'salary2',xtype:'numberfield'}"></td>
    </tr>
    <tr>
      <td>現居住地</td><td colspan="5" obj="{itemId:'address'}"></td>
    </tr>
    <tr>
      <td rowspan="3">審批意見</td>
      <td>部門經理</td><td colspan="5" obj="{itemId:'comment1',xtype:'textarea'}"></td>
    </tr>
    <tr><td>總經辦</td><td colspan="5" obj="{itemId:'comment2',xtype:'textarea'}"></td>
    <tr><td>首席執行官</td><td colspan="5" obj="{itemId:'comment3',xtype:'textarea'}"></td>
  </table>
</div>      

最後效果