表单设计器3-查询面板

1.打开对象属性，咱们新建了一张员工表，并添加了字段，其中department（所属部门）字段咱们设置为了对象属性，与部门表关联起来如图1所示。

 

图1

2.接下来看查询面板，首先在设计页面如图2咱们在面板找到主表，将主表面板拖至设计页面，这是会弹出让咱们选择绑定对象和字段，咱们选择刚新建的员工表，并将员工表里的字段都勾选上，点击肯定，主表面板就行了。

 

图2

 

3.建立好的面板如图3，若是咱们不须要1处的按钮，能够选中一个个删除掉，这时咱们在2处发现年龄字段在第一个不符合咱们的审美，咱们能够点击3处的+号按钮便可弹出新增按钮，这里咱们新增字段或者删除字段以及为字段排序，能够点击4处的符号依次是置顶、向上一个、向下一个、置底，能够根据须要来排序，也能够在这里调整数据类型、长度、是否可检索、是否可排序、是否隐藏等等，在5处咱们发现有两个所属部门，由于这个字段是对象属性，须要关联其余表，因此咱们设计了一个存储后台ID的值用后缀-号来加以区分，这里默认给他是隐藏

 

 

图3

4.检索功能，咱们在对每一个字段进行设计的前提是要把主表面板是否可检索选择true选项如图4，才能使用.

 

图4

5.图5所示的就是为字段设置了检索功能以后显示。

 

图5

6.而后用布局面板为页面添加一些控件，如图6所示的布局，红框为一个布局面板，里面放若干控件，下方放检索面板按钮，年龄和生日由于要作成范围检索，复制了两个也用布局面板,黄框用的标签。

 

图6

7.黄色框部分用的标签来布局，拖拽标签控件到箭头处点击编辑文本，填写内容确认便可

 

图7

 

8.由于年龄范围内咱们是复制的控件，在后台会提示重复，因此咱们将它的name和空间id改为不同的。而且将showlabe改为false这样空间的标签名就隐藏掉，只显示咱们拖拽的标签控件的内容，同理生日也是同样。

 

9.范围查询确定得有比较，谁先谁后咱们得定义好，以年龄的控件来显示

 

这个表示要大于等于输入框的值，后面的同样设置comparison:”<=”这样就有范围的控制了。

到了这一步检查的功能就完成了，接下来只用输入条件点击查询就好了。

 

ExtJs3.2.表单设计器源码,自定义建表，自定义建库

 源码下载：http://www.rrbay.com/ework.html