如何添加 Dojo Gridx 的工具条自定义组件（3）
|
- UID
- 1066743
|
如何添加 Dojo Gridx 的工具条自定义组件（3）
自定义 Gridx 解决方案示例Gridx 已经包含一个自定义工具条组件，它可以实现用户自定义的工具条，集成多种用户自定义功能和原生插件功能。并且对简化用户界面设计有较大帮助。这个自定义组件被叫做"bar"，可在"gridx/modules/Bar"组件包中被找到。它能让您自由的定义在这个工具条中的内容。
现在让我们来看一下最简单的自定义工具条实现，在 Grid 定义中声明 Bar module。
1
| modules: [ "gridx/modules/Bar" ]
|
然后通过定义两个参数 barTop 和 barBottom 来实现自定义的工具条。
参数 barTop 和 barBottom 详解仔细观察 barTop 和 barBottom 参数，您会发现他们其实是声明在 Grid 层面的 Bar 模块的参数，只不过这样的编写方式在写代码的时候会更加的简便和干净。这些您想往 Bar 模块添加的内容无非是一些模块序列，当然 barTop 意味着工具条会置顶，而 barBottom 则意味着会置底。工具条组件其实可以被视为一个 html 的<table>组件中的<tr>元素。工具条内部的组件则可以被视为一个<td>元素。所以一个自然的工具条延伸构成方式就是多行展现。从这个方面来看，工具条组件的实现是非常简单的，简单到我们都不太需要看下面的例子。
- 多行展现的工具条组件上面的工具条的实现代码为：
图 4.多行工具条示图 1
2
3
4
| barTop: [
[{pluginClass: "gridx/support/LinkPager", visibleSteppers: 1, style: 'text-align: center;'}],
[{pluginClass: "gridx/support/Summary", colSpan: 2, style: 'text-align: center;'}]
]
|
对比在同一<tr>元素中的工具条。
- 单行展现的工具条组件图 5.单行工具条示图
 其代码的实现方式只是稍有不同：
{pluginClass: "gridx/support/LinkPager", visibleSteppers: 1, style: 'text-align: center;'}，
1
2
| {pluginClass: "gridx/support/Summary", colSpan: 2, style: 'text-align: center;'}
]
|
自定义工具条内容组件下面让我们来看一下怎样去声明一个工具条的内容组件，即一个<td>元素。我们已经知道是一个工具条内容组件可以是一个字符串，或者一个可配置的对象。这个对象的完整格式为：
1
2
3
4
5
6
7
| {
pluginClass: "path/to/class", // string
colSpan: 3, // number
rowSpan: 2, // number
style: "text-align: center;", // string
className: "...", // string
}
|
值得注意的方面是，在声明对象格式时，<style>和<className>元素是被声明在<td>元素上面的。事实上整个对象定义组件都会被直接传递给插件类的构造函数，所以任何在构造函数中调用的插件参数也可以在此被声明
构造函数参数声明
1
2
3
4
| {
pluginClass: "gridx/support/LinkPager",
visibleSteppers: 5 // this is a parameter of the LinkPager widget
}
|
我们上面举的例子都是关于插件类的。其实工具条组件是支持任何的 widget 类型的内容组件。
1
2
3
4
5
| barTop: [
new dijit.Toolbar({...}), // pass an instance directly
{ plugin: new dijit.Toolbar({...}), style: 'color: red;' }, // declared in configuration object
{ plugin: "myToolbarID" } // existing widget ID
]
|
注：声明实例是不能在工具条内容组件中被多出引用的，但是类就可以。
1
2
3
4
5
6
7
8
9
| var toolbar = new dijit.Toolbar({...});
barTop: [
toolbar,
toolbar // WRONG! one instance can't appear in two places.
]
barTop: [
"dijit/Toolbar",
"dijit/Toolbar" // this is okay!
]
|
最后，任何 HTML 内容也可以被定义在工具条内容组件当中
1
2
3
| barTop: [
{ content: "<h1>My Grid Title</h1>", style: "color: blue;" }
]
|
如果任何的内容组件声明为假的话，一个空的<td>元素则会被插入。这在多行的工具条排列中会非常有作用。
1
2
3
4
| barTop: [
[ Summary, QuickFilter ],
[ null, LinkSizer] // skip the first cell in this row
]
|
|
|
|
|
|
|
