dojo中的tableContainer

今天来熟悉一下tableContainer的使用，通常他会和表单空间配合使用，如textbox之类的东东。

dojo中的tableContainer效果跟html中的table差不多，但是使用的时候还是有几点需要注意的。

例子来自dojo的官网文档，只要几个关键点注意了，还是相当好用的。

想要用dojo，还是需要多学多记，从一点一滴的小的模块开始。

官网的文档真是个好东西，以前苦苦寻找dojo的书籍资料，后来才发现，官网的文档就是相当好的资料，真得好好研究研究。附个连接地址吧：http://dojotoolkit.org/documentation/

1.textbox的label问题

html中，我们习惯自己手写比如下面的代码：

<label for="username">用户名:</label>
<input type="text" id="username" name="username"/>

dojo中可以这样用：

<div data-dojo-type="dijit/form/TextBox" title="用户名:" id="username" name="username"></div>

title属性可以起到html中的label的作用。

2.textbox的label的css问题

我比较习惯label居右，like this：

怎么定义css样式呢？

html中可以这样（align属性）：

<table>
    <tr>
        <td align="right"></td>
    </tr>
</table>

dojo中可以这样（tableContainer的customClass属性）：

<div data-dojo-type="dojox/layout/TableContainer" data-dojo-props="cols:4, customClass:'labelsAndValues'" id="tc1">
	  <div data-dojo-type="dijit/form/TextBox" title="First Name:" colspan="2" value="Tom"></div>
	  <div data-dojo-type="dijit/form/TextBox" title="Last Name:" colspan="2" value="Clarke"></div>
	  <textarea data-dojo-type="dijit/form/Textarea" id="texteditor" style="width:100%;" colspan="4" title="Personal Details">Hi, I'm a hacker, I have no  personal details to speak of, but I can write a widget in under a minute!
	  </textarea>
	 <div data-dojo-type="dijit/form/CheckBox" title="Employed"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Is Married"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Has Children"></div>
	 <div data-dojo-type="dijit/form/CheckBox" title="Loves Dojo" checked="true"></div>
</div>

然后定义css（注意.labelsAndValues-labelCell和.labelsAndValues-valueCell）， like this：

<style type="text/css">
		.labelsAndValues-labelCell</strong></span> {
		  background-color: lightgrey;
		  text-align: right;
		}
		
		.labelsAndValues-valueCell</strong></span> {
		  padding-left: 0px;
		  background-color: lightblue;
		}
	</style>

好了，现在label的css样式就可以随意定义了， labelsAndValues是随意写的，详见本文下方的api说明。

来张截图：

效果还不错。

附上dojox/layout/TableContainer控件的customClass属性的api说明：

customClass
Defined by dojox/layout/TableContainer

A CSS class that will be applied to child elements. For example, if the class is "myClass", the table will have "myClass-table" applied to it, each label TD will have "myClass-labelCell" applied, and each widget TD will have "myClass-valueCell" applied.

这里说的很详细，customClass可以随意写，比如上面的labelsAndValues，然后label的css就是“.labelsAndValues-labelCell”，控件的css就是“.labelsAndValues-valueCell”。