一、什么是UGD？

大家都知道 UED（User Experience Design）用户体验设计团队，主张「以用户为中心的设计」，我们团队的前身就是一个典型的 UED 团队。那么什么是 UGD 呢？

UGD（User Growth Design）用户增长设计，主张「以用户为中心，以增长为导向」。

下面这个是我们团队现在的 logo，这个图形很清晰地描述了 UGD 的理念：在 UCD（以用户为中心的设计）的基础上增加一个向上的箭头（增长），变形成了 G（Growth，代表增长）。也就是我们在原先以用户为中心的基础上，还要做到帮助业务增长。

「增长」的概念对很多人来说也许还比较陌生。事实上，这个概念早在2010年就有人在美国提出了，到了2015年才引入国内，最近两年开始火爆。所以说它在国内其实也是一个比较新的概念。感兴趣的朋友可以看看《增长黑客》相关书籍。

二、为什么我们要变成UGD？

为什么我们要从传统的 UED 进化为充满挑战和不确定性的 UGD 呢？这要从天时、地利、人和三个方面说起。

1. 天时

先说说天时，大概2016年左右吧，中国互联网逐渐进入下半场。关于下半场的话题这里不多说了，感兴趣的同学可以上网搜搜相关的文章或者看一下我的新书《破茧成蝶2》（7月出版），里面有很详细的讨论。简单的说，下半场的特点就是：人口红利、流量红利、资金红利都在逐渐萎缩。原先你可以花钱买流量；或者通过好的 idea 拉来大笔投资；再或者通过打造的体验迎来大量用户。但这种「好时代」已经一去不复返了，如果没有实质的增长，创意、体验、流量都不能保证产品可以顺利的活下去。

2017年3月底，美国又发生了一件大事：可口可乐，这家以营销著称的公司，宣布将取消设立了24年的首席营销官（CMO）一职。全球市场营销、客户及商务领导、战略被整合成一个职能，由新创立的职位 CGO（Chief Growth Officer，首席增长管）领导。第一任 CGO 将直接向可口可乐新任 CEO 汇报。

可能很多人不了解，CMO 的工作性质和 UED 其实有很多相似的地方。比如都是成本部门（当然市场部还要额外花钱）；都热衷包装创意而非对业绩的直接影响；都倾向于用定性的方式检验成果；都习惯通过经验而非试验来做决策……

很多企业主对此非常无奈，他们明明知道在营销等方面的花费存在巨大的浪费，却不知道浪费在哪里。随着大数据时代的到来（2015年左右），人们越来越重视数据的作用，越来越能够轻易的获取、存储数据，也越来越知道如何从数据中获取价值。在这种情况下，原先很多岗位的传统工作方式显然太过于低效，所以 CMO 逐渐被 CGO 取代也就不足为奇了。

从 CMO 到 CGO，揭示了四个变化趋势：

• 从花钱到赚钱
• 从定性到定量
• 从创意到业绩
• 从经验到试验

谁能肯定 CMO 的今天不会成为 UED 的明天呢？当然，我认为 UGD 只是未来的一个发展趋势之一，我想未来设计师还会有很多其它的发展方向等待我们深入探索。

2. 地利

虽然我换过几次工作，但是有一点我从来没变，就是一直在做和商业相关的产品（电商、To B、互联网金融），所以我对业务、对数据更敏感一些。和同行交流的过程中我也发现一个明显的现象：越是接触商业产品的设计师，越重视数据量化。当然现在不仅是商业产品，所有类型产品的从业人员都需要有这个意识。比如做社交产品，也需要通过活跃度等指标来检验成果。

3. 人和

设计团队的地位其实普遍是比较尴尬的，因为你很难证明对产品、对企业的价值。以前设计师还可以靠特立独行来赢得一些关注，但现在随着时代的变化，设计和业务绑定的趋势越来越明显。与此同时，大部分设计师却还没有做好相应的准备，不知道该如何帮助业务增长。

虽然支持团队很难成为核心团队，但我们依然可以通过改变自己，努力离核心部分近一点，更近一点。

三、UGD服务于用户还是业务？

看了前面的分析，可能有人会感觉迷茫：设计师到底应该服务于业务还是用户呢？

传统思维认为，设计师应该为用户、为体验负责。实际上，体验与业务并不冲突。通过一年多的试验，我们发现能带动业务数据提升的设计方案，质量都比原始方案要好。通过无数次的试验结果总结规律，设计师的进步非常快，也非常大。

所以我们团队的价值主张一直都是：以用户为中心，以增长为导向！

四、如何从UED转型成UGD？

很多设计师认为自己不太可能帮助业务有实质性的提升。其实设计的商业潜力是巨大的，只是还尚未被充分发挥出来。通过出众的造型和外观击败竞争对手、销量大幅提升的案例不胜枚举。所以我坚信设计师在这方面的空间非常大。

当然要成为 UGD 并不是通过输出美观的产出物就可以做到。UGD 必须致力于通过设计思维及专业技能，用最小成本为产品/企业创造最大价值。我们团队在这方面已经摸索了一年多的时间，现在还在继续探索中。

和 UED 相比，我认为 UGD 最重要的差别在于：

• 更懂行业：行业间差异
• 更懂用户：用户群体差异
• 更懂数据：业务数据分析
• 更懂增长：投入产出比

前三项相信大部分设计师已经开始意识到了，而第四项，也是最重要的一项，很容易成为设计师的软肋。因为设计师太习惯于追求完美、「憋大招」了，他们很少考虑如何用较小的成本创造更大的价值。实际上，设计师缜密的思维、优质的创意如果能和精益思维、增长思维结合起来，将产生惊人的效果！

当然说来容易做来难，我们在长期的实践过程中经历了很多失败和挫折，感谢公司的无限包容，使得我们最终能够沉淀出一套严谨的「增长体系」作为理论支撑，并不断带给业务方惊喜。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1、初始node.js

祝贺UI中国十周年快乐，感谢UI中国对我一直的支持，最近也很忙，抽空做了个海报表示祝贺吧，比较菜，做得不是很好请担待，谢谢大家！

互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后，我们可以发现其背后的一些规律，2018年UI界面设计的趋势如下。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

一直不太懂前后端的交互，开始学习ajax，好像有些懂了，接下来的内容通过表单提交来了解前后端数据交互吧~

懒洋洋是一款为多伦多华人提供服务的订餐平台用户群一般为学生、白领等对于视觉上追求简约、舒适产品流程简易而顺畅（英文是用翻译软件翻的，如有错误，那就算了吧）

其实开始想写这个文章就像找共鸣这，吐槽一些关于老板什么也不懂，非得让UI设计师改来改去的事情，想了想还是算了，真的给那些刚步入UI设计或者是准备步入UI设计的小伙伴们一些好的方向或者说打打预防针才比较正经。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

1. 此属性列表请对照jQuery EasyUI 1.0.5.  
2.   
3. 属性分为CSS片段和JS片段。  
4.   
5. CSS类定义：  
6. 1、div easyui-window        生成一个window窗口样式。  
7.       属性如下：  
8.                    1)modal:是否生成模态窗口。true[是] false[否]  
9.                    2)shadow:是否显示窗口阴影。true[显示] false[不显示]  
10.   
11. 2、div easyui-panel           生成一个面板。  
12.        属性如下:  
13.                  1)title:该标题文本显示在面板头部。  
14.                  2)iconCls:在面板上通过一个CSS类显示16x16图标。  
15.                  3)width:设置面板宽度。默认auto。  
16.                  4)height:设置面板高度。默认auto。  
17.                  5)left:设置面板左边距。  
18.                  6)top:设置面板顶部位置。  
19.                  7)cls:在面板中增加一个Class类。  
20.                  8)headerCls:在面板头部中增加一个Class类。  
21.                  9)bodyCls:在面板内容中增加一个Class类。  
22.                 10)style:在面板中增加一个指定样式。  
23.                 11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。  
24.                 12)border:当定义时显示面板边界。默认true。  
25.                 13)doSize:如果设置为True，该面板将重绘大小，并重建布局。默认true。  
26.                 14)collapsible:当定义时显示可折叠面板的按钮。默认false。  
27.                 15)minimizable:当定义时显示最小化面板的按钮。默认false。  
28.                 16)maximizable:当定义时显示最大化面板的按钮。默认false。  
29.                 17)closable:当定义时显示关闭面板的按钮。默认false。  
30.                 18)tools:自定义工具栏，每个工具都包含两个属性:iconCls、handler。  
31.                 19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。  
32.                 20)minimized:当定义时该面板初始化时处于最小化状态。默认false。  
33.                 21)maximized:当定义时该面板初始化时处于最大化状态。默认false。  
34.                 22)closed：当定义时该面板初始化时处于关闭状态。默认false。  
35.                 23)href:一个url，加载远程数据并显示在面板中。  
36.                 24)loadingMessage:当加载远程数据时，在面板中显示一个消息。默认Loading…  
37.              事件如下:  
38.                  1)onLoad:当远程数据加载完毕后激活。  
39.                  2)onBeforeOpen:当面板打开前激活。  
40.                  3)onOpen:当面板打开后激活。  
41.                  4)onBeforeClose:当面板关闭前激活。  
42.                  5)onClose:当面板关闭后激活。  
43.                  6)onBeforeDestroy:当面板销毁前激活。  
44.                  7)onDestroy:当面板销毁后激活。  
45.                  8)onBeforeCollpase:当面板收缩前激活。  
46.                  9)onCollapse:当面板收缩后激活。  
47.                 10)onBeforeExpand:当面板扩展前激活。  
48.                 11)onExpand:当面板扩展后激活。  
49.                 12)onResize:当面板重绘后激活。  
50.                       width:新建的外部宽度  
51.                       height:新建的外部高度  
52.                 13)onMove:当面板移动后激活。  
53.                      left:左侧新位置。  
54.                      top:顶部新位置。  
55.                 14)onMaximize:当窗口最大化后激活。  
56.                 15)onRestore:当窗口恢复到原来大小时激活。  
57.                 16)onMinimize:当窗口最小化后激活。  
58.              方法如下：  
59.                  1)options:返回options属性。  
60.                  2)panel:返回面板对象。  
61.                  3)header:返回面板头部对象。  
62.                  4)body:返回面板主体对象。  
63.                  5)setTitle:设置头部的标题文本。  
64.                  6)open:当forceOpen参数设置为true时，面板打开时绕过onBeforeOpen回调函数。  
65.                  7)close:当forceClose参数设置为true时，该面板关闭时绕过onBeforeClose回调函数。  
66.                  8)destroy:当forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。  
67.                  9)refresh:当href属性设置后刷新该面板以加载远程数据。  
68.                 10)resize:设置面板的大小和布局。该options对象包含以下属性:  
69.                      width：新的面板宽度。  
70.                      height：新的面板高度。  
71.                      left：新的面板左侧位置。  
72.                      top：新的面板顶部位置。  
73.                 11)move:移动面板到一个新的位置。该options对象包含以下属性：  
74.                      left：新的面板左侧位置。  
75.                      top：新的面板顶部位置。  
76.   
77. 3、a  easyui-linkbutton                    生成链接类型的按钮。  
78.   
79.        属性如下：  
80.             1)disabled:当True时禁用该按钮。默认false。  
81.             2)plain:当True时显示一个普通效果。默认false。  
82.   
83. 4、input/textarea easyui-validatebox       生成字段验证。  
84.               属性如下：  
85.               1)required:true[必需] false[不必需] 默认false  
86.               2)validType:  
87.                  a、length[a,b] 字段长度控制在a至b之间。  
88.                  b、email       验证Email。  
89.                  c、url      验证网络地址。  
90.               3)missingMessage：当文本时出现空时弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
91.               4)invalidMessage：当文本内容无效后弹出该工具提示，系统有默认[英文]，自定义可覆盖它。  
92.   
93. 5、ul easyui-tree         生成一个树形结构。  
94.              属性如下：  
95.               1)url:一个获取远程数据的地址。  
96.               2)animate:当展开或折叠节点时是否定义动画效果。true[是] false[否] 默认false  
97.              节点属性如下：  
98.              1)text:节点的显示文本。  
99.              2)id:节点ID，对于加载远程数据时非常重要。  
100.              3)state:节点状态，'open'或'closed'，默认为'open'。当设置为'关闭'，该节点包含子节点，并将远程站点加载它们(并非触发再加载)。  
101.              4)attributes:为节点添加自定义属性。  
102.              5)children:以数组节点的方式定义一些字节点。  
103.              事件如下：  
104.                  1)onClick:  
105.                     当用户点击一个节点时激活，该节点参数包含如下属性：  
106.                     id：节点ID  
107.                     text:节点文本  
108.                     attributes:节点自定义属性。  
109.                     target:目标点击的DOM对象。  
110.               2)onLoadSuccess:  
111.                    当数据成功加载数据时激活，该参数跟jQuery.ajax的'success'函数效果相同。  
112.               3)onLoadError:  
113.                   当数据加载数据失败时激活，该参数跟jQuery.ajax的'error'函数效果相同。  
114.              方法如下:  
115.                  1)reload:重新加载树数据。  
116.                  2)getSelected:获取选中的节点并返回它，如果没有选择节点将返回null。  
117.                  3)collapse:折叠一个节点，该目标参数是该节点的DOM对象。  
118.               4)expand:展开一个节点，该目标参数是该节点的DOM对象。    
119.               5)append:在一个父节点追加一些子节点。  
120.                     param有两个属性：  
121.                     parent:DOM对象，把它作为父节点追加(它们)。  
122.                     data:array，或者节点数据。  
123.               6)remove:删除它以及它以下的子节点，该目标参数是该节点的DOM对象。   
124.   
125. 6、table easyui-datagrid                   生成一个表格。  
126.              属性如下：  
127.                  1)title:该DataGrid面板的标题文本。  
128.                  2)iconCls:一个CSS类，将提供一个背景图片作为标题图标。  
129.                  3)border：当true时，显示该datagrid面板的边框。  
130.                  4)width:面板宽度，自动列宽。  
131.                  5)height:面板高度，自动列高。  
132.                  6)columns:该DataGrid列配置对象，查看column属性可获取更多信息。  
133.                  7)frozenColumns:跟Columns属性相同，但是这些列将会被固定在左边。  
134.                  8)striped:当true时，单元格显示条纹。默认false。  
135.                  9)method:通过该方法类型请求远程数据。默认post。  
136.                 10)nowrap:当true时，显示数据在同一行上。默认true。  
137.                 11)idField:说明哪个字段是一个标识字段。  
138.                 12)url:一个URL，从远程站点获取数据。  
139.                 13)loadMsg:当从远程站点加载数据时，显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。  
140.                 14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。  
141.                 15)rownumbers:当true时显示行号。默认false。  
142.                 16)singleSelect:当true时只允许当前选择一行。默认false。  
143.                 17)fit:当true时，设置大小以适应它的父容器。默认false。  
144.                 18)pageNumber:当设置分页属性时，初始化的页码编号。默认从1开始  
145.                 19)pageSize:当设置分页属性是，初始化的页面大小。默认10行  
146.                 20)pageList:当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]  
147.                 21)queryParams:当请求远程数据时，也可以发送额外的参数。  
148.                 22)sortName:定义哪列可以排序。  
149.                 23)sortOrder:定义列的排列顺序，只能是'asc'或'desc'。默认asc。  
150.              Column属性如下：  
151.                  1)title:该列标题文本。  
152.                  2)field:该列对应的字段名称。  
153.                  3)width：列宽。  
154.                  4)rowspan:说明该单元格需要多少行数。  
155.                  5)colspan:说明该单元格需要多少列数。  
156.                  6)align:说明Column数据的对齐方式。'left'，'right'，'center' 都可以使用。  
157.                  7)sortable:当true时，允许该列进行排序。  
158.                  8)checkbox:当true时，允许该列出现checkbox。  
159.              事件如下：  
160.                  1)onLoadSuccess:当远程数据加载成功是激活。  
161.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
162.                  3)onClickRow:当用户点击某行时激活，参数包含：  
163.                     rowIndex: 点击的行索引，从0开始。  
164.                     rowData: 点击行时对应的记录。  
165.                 4)onDblClickRow:当用户双击某行时激活，参数包含：  
166.                     rowIndex: 点击的行索引，从0开始。  
167.                     rowData: 点击行时对应的记录。  
168.                 5)onSortColumn:当用户对某列排序时激活，参数包含：  
169.                    sort:排序字段名称。  
170.                    order:排序字段类型。  
171.                 6)onSelect:当用户选择某行时激活，参数包含:  
172.                    rowIndex: 点击的行索引，从0开始。  
173.                    rowData: 点击行时对应的记录。  
174.                 7)onUnselect:当用户取消选择某行时激活，参数包含:  
175.                     rowIndex: 点击的行索引，从0开始。  
176.                     rowData: 点击行时对应的记录。  
177.              方法如下：  
178.                  1)options:返回选择对象。  
179.                  2)resize:重调大小，生成布局。  
180.                  3)reload:重新加载数据。  
181.                  4)fixColumnSize:固定列大小。  
182.                  5)loadData:加载本地数据，过去的行会被删除。  
183.                  6)getSelected:返回第一个选中行的记录，若未选返回null。  
184.                  7)getSelections:返回选中的所有行，当没有选择记录时将返回空数组。  
185.                  8)clearSelections:清除所有选项的选择状态。  
186.                  9)selectRow:选择一行，行索引从0开始。  
187.                 10)selectRecord:通过传递一个ID值参数，选择一行。  
188.                 11)unselectRow:取消选择一行。  
189.   
190. 7、div easyui-tabs                         生成一个tab容器。  
191.              属性如下：  
192.                  1)width:容器宽度，自动列宽。  
193.                  2)height:容器高度，自动列高。  
194.                  3)idSeed:该根id衍生成标签面板DOM id属性。默认0  
195.                  4)plain：当true时，该Tab渲染不使用容器背景图片。默认false  
196.                  5)fit:当true时，设置该Tab大小以适应它的父容器。默认false  
197.                  6)border:当true时，显示该Tab边框。  
198.                  7)scrollIncrement:  
199.                  8)scrollDuration:  
200.              事件如下：  
201.                  1)onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟jQuery.ajax的'success'函数效果相同。  
202.                  2)onSelect:当用户选择一个Tab面板时激活。  
203.                  3)onClose:当用户关闭一个Tab面板时激活。  
204.              方法如下:  
205.                  1)resize:重绘该Tab容器的布局。  
206.                  2)add:新增加一个Tab面板，该选项参数是一个配置对象，看Tab面板属性可获取更多信息。  
207.                  3)close：关闭该Tab面板，标题参数显示你要关闭的对象。  
208.                  4)select:选择一个Tab面板。  
209.                  5)exists:如果该Tab面板存在即显示。  
210.              Tab面板属性如下：  
211.                  1)id:该Tab面板DOM id属性。  
212.                  2)text:该Tab面板标题文本。  
213.                  3)content:该Tab面板内容。  
214.                  4)href:一个URL，加载远程内容以填充Tab面板。  
215.                  5)cache:当true时，缓存Tab面板，当href 属性设置后有效。默认true  
216.                  6)icon:增加一个CSS class图标以显示在Tab面板的标题旁。  
217.                  7)closable:当true时，该Tab面板将显示可关闭按钮，点击能关闭该Tab面板。默认false  
218.                  8)selected:当true时，该Tab面板将被选中。默认false  
219.                  9)width:面板宽度，自动列宽。  
220.                 10)height:面板高度，自动列高。  
221.   
222. 8、div menu-sep              生成一个菜单分隔线。  
223.   
224. 9、a easyui-splitbutton         生成一个菜单列。  
225.   
226. 10、div easyui-accordion        生成手风琴式下拉框。继承自panel  
227.   
228. 11、select easyui-combobox       生成一个组合下拉框。  
229.              属性如下：  
230.                  1)width:容器宽度，自动列宽。  
231.                  2)listWidth:该组合下拉框的宽度。  
232.                  3)listHeight:该组合下拉框的高度。  
233.                  4)valueField：把该基础数据的值名称绑定到组合下拉框中[value]。  
234.                  5)textField:把该基础数据的字段名称绑定到组合下拉框中[text]。  
235.                  6)editable:当True时，可直接在文字域中键入文本。默认true。  
236.                  7)url:一个URL，从远程加载列表数据。  
237.              事件如下：  
238.                  1)onLoadSuccess:当远程数据加载成功是激活。  
239.                  2)onLoadError:当远程数据加载发现一些错误时激活。  
240.                  2)onSelect:当用户选择一个列表选项时激活。  
241.                  3)onChange:当该字段的值发生改变时激活。  
242.              方法如下:  
243.                  1)select: 在下拉列表中选择一个值。  
244.                  2)setValue: 设置指定值到该字段。在'param' 参数可以是一个字符串或者一个JS对象。注:JS对象包含的属性对应valueField和TextField两个属性。  
245.                  3)getValue: 获取该字段的值。   
246.                  4)reload:   重新请求远程列表数据。  
247.   
248. 12、select easyui-combotree      生成一个组合树形框。  
249.             属性如下：  
250.             1)width:容器宽度，自动列宽。  
251.             2)treeWidth:该树形下拉框的宽度。  
252.             3)treeHeight:该树形下拉框的高度。  
253.             4)url:一个URL，从远程加载树形数据。  
254.              事件如下：  
255.              1)onSelect:当用户选择一个树形节点时激活。  
256.              2)onChange:当该字段的值发生改变时激活。  
257.              方法如下:  
258.              1)setValue: 设置指定值到该字段。在'param' 参数可以是一个树形节点ID值或者一个JS对象。注:JS对象包含的属性对应id和text两个属性。  
259.              2)getValue: 获取该字段的值。   
260.              3)reload:   重新请求远程列表数据。  
261.   
262. 13、body[div] easyui-layout      生成一个布局。  
263.             属性如下：  
264.             1)title:该面板标题文本。  
265.             2)region:定义布局面板的位置，包含下列值:north,south, east, west, center。  
266.             3)border:当True时显示布局面板的边框。默认为True。  
267.             4)split: 当True时显示一个分割符以使用户改变面板的尺寸。默认false。  
268.             5)icon:一个图标CSS类，在面板头部显示一个图标。   
269.             6)href:一个URL,以从远程站点加载数据。               
270.   
271. 14、div easyui-menu        生成一个菜单。  
272.             属性如下：  
273.             1)zIndex: Menu z-index样式。注释：z-index 属性设置元素的堆叠顺序。   
274.             2)left:菜单左起位置。默认0。  
275.             3)top: 菜单顶部位置。默认0。  
276.             4)href:当点击菜单项时能在当前浏览器窗口显示不同的网址。  
277.             事件如下:  
278.             1)onShow:激活后显示菜单。  
279.             2)onHide:激活后隐藏菜单。  
280.             方法如下:  
281.             1)show:在指定的位置显示一个菜单。该位置上包含两个参数：  
282.                 left:新的左起位置。  
283.                top:新的顶部位置。  
284.             2)hide:隐藏一个菜单。  
285.   
286. 15、a easyui-menubutton       生成一个菜单按钮。   
287.             属性如下：  
288.             1)disabled:当True时禁用该按钮。默认false。  
289.             2)plain:当True时显示一个普通效果。默认false。  
290.             3)menu:一个选择器名称，用来创建相应的菜单。  
291.             4)duration: 当悬停该按钮时，定义菜单的持续显示时间，单位为毫秒。默认100。  
292.   
293. 16、input easyui-numberbox      生成一个数字输入框。  
294.             选项如下:  
295.             1)min:允许的最小值。当输入值小于最小值时，显示最小值。  
296.             2)max:允许的最大值。当输入值大于最大值时，显示最大值。  
297.             3)precision:分隔符后能的小数点位数。整数默认会追加小数点位数。   
298.   
299.   
300. JS定义：  
301. 1、 .window            生成一个window窗口。  
302.   
303. 2、 .tree                  生成一个树形结构。  
304.   
305. 3、 .datagrid           生成一个表格。  
306.   
307. 4、 .combobox        生成一个组合下拉框。  
308.   
309. 5、 .combotree       生成一个组合树形框。  
310.   
311. 6、 .dialog               生成一个对话框。它继承自window  
312.       私有属性如下：  
313.                  1)title:该对话框标题文本。默认"New Dialog"。  
314.                  2)collapsible:当True时可显示折叠按钮。默认false。  
315.                  3)minimizable:当True时可显示最小化按钮。默认false。  
316.                  4)maximizable:当True时可显示最大化按钮。默认false。  
317.                  5)resizable:当True时能重绘对话框大小。默认false。  
318.                  6)toolbar:该工具栏置于对话框的顶部，每个工具栏包含:text, iconCls, disabled, handler等属性。  
319.                  7)buttons:这个按钮置于对话框的底部，每个按钮包含:text, iconCls, handler等属性。  
320.   
321. 7、 .draggable          生成一个可自由拖动的块。  
322.       属性如下:  
323.               1)handle:选择"#id"进行拖动。  
324.               2)disabled:当True时停止自由拖动。默认false。  
325.               3)edge:开始拖动拖动块时的宽度。默认0。  
326.               4)axis:当拖动块移动时定义轴，可选值是'v'或者'h',当超出'v'和'h'的方位时将设置为null。  
327.      事件如下：  
328.                  1)onStartDrag:当目标对象开始拖动时激活。  
329.                  2)onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)。  
330.                  3)onStopDrag:当目标对象停止拖动时激活。  
331.   
332. 8、 .linkbutton          生成一个链式按钮。  
333.   
334. 9、 .messager           生成一个消息框。  
335.              选项如下：  
336.                  1)ok:显示确定按钮文本。  
337.                  2)cancel:显示取消按钮文本。   
338.              方法如下:  
339.              1)show:在屏幕的右下角出现一个消息框。该选项参数是一个配置对象，它包括：  
340.                 showType:定义消息框显示的模式，可选值包括:null,slide,fade,show.默认slide.  
341.                 showSpeed: 定义消息框完成显示的时间。默认600毫秒。  
342.                 width: 定义消息框的宽度。默认250。  
343.                 height:定义消息框的高度。默认100。  
344.                 msg:定义消息框显示的文本。  
345.                 title: 在消息框面板头部显示标题文本。  
346.                 timeout: 如果定义为0,消息框将不会自动关闭，除非用户手动关闭它。如果定义为非0值，消息框会在超时结束时自动关闭它。单位毫秒。  
347.              2)alert:显示一个打印窗口。它的参数如下:  
348.                 title: 在头部显示标题文本。  
349.                 msg:显示文本内容。  
350.                 icon: 显示图标。可选值:error,question,info,warning。  
351.                 fn: 当窗口关闭后触发回调函数。  
352.              3)confirm:显示一个包含确定和取消按钮的确认消息框。参数包括:  
353.                 title:在头部显示标题文本。  
354.                 msg: 显示文本内容。  
355.                 fn(b):回调函数，当用户点击OK按钮，返回True,才会处理该函数，其它按钮返回false,不处理。  
356.              4)prompt:显示一个消息框，包含OK和Cancel按钮并提示用户输入一些文本。参数包括:  
357.                 title:在头部显示标题文本。  
358.                 msg:显示文本内容。  
359.                 fn(val):该回调函数处理用户输入的参数值。   
360.   
361. 10、 .pagination         生成一个页码工具条。  
362.            属性如下：  
363.             1)total:当分页条创建后设置的记录数。默认1。  
364.             2)pageSize:页面大小。默认10。  
365.             3)pageNumber:当分页创建后显示的页码。默认1。  
366.             4)pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]。  
367.             5)loading:定义是否正在加载。默认false。  
368.             6)buttons:定义自定义按钮，每个按钮都包含两个属性:  
369.                iconCls: 该CSS类将显示一个背景图标。  
370.                handler: 当按钮点击时触发一个处理函数。  
371.             7)beforePageText:当输入组件前显示一个标签文本。  
372.             8)afterPageText:当输入组件后显示一个标签文本。  
373.             9)displayMsg:显示一个页面信息。  
374.            方法如下:  
375.             1)onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:  
376.                pageNumber: 该新页面的页码。  
377.                pageSize:该新页面的大小。