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>

html代码我还得自己写

最后效果