【转】给ExtJS的Grid增加两行tbar

　　按照需要，我们一般在Grid的上方放置一个toolbar，再在上面放一些输入控件做查询用，但是同时我们也需要在上面添加一些其他按钮，比如“新增”，“删除”，“修改”，“导出”等，但是这些按钮要是放置查询的那个tbar上的话，感觉不太好，最好将分成两排。

　　我们先看看截图：

1　//Grid其他代码省略

　2　tbar　:　[{
　3　　　　　　　　　　　　　xtype　:　'hidden',
　4　　　　　　　　　　　　　id　:　'action',
　5　　　　　　　　　　　　　value　:　'QUERY_T_SYS_USER_ACTION'
　6　　　　　　　　　},　'用户姓名:　',　{
　7　　　　　　　　　　　　　xtype　:　'textfield',
　8　　　　　　　　　　　　　id　:　'description',
　9　　　　　　　　　　　　　width　:　120
10　　　　　　　　　},　new　Ext.Toolbar.TextItem("    "),
11　　　　　　　　　'创建时间:　',　{
12　　　　　　　　　　　　　id　:　'itemDateFrom',
13　　　　　　　　　　　　　xtype　:　'datefield',
14　　　　　　　　　　　　　format　:　'Y-m-d',
15　　　　　　　　　　　　　readOnly　:　true
16　　　　　　　　　},　'至',　{
17　　　　　　　　　　　　　id　:　'itemDateTo',
18　　　　　　　　　　　　　xtype　:　'datefield',
19　　　　　　　　　　　　　format　:　'Y-m-d',
20　　　　　　　　　　　　　readOnly　:　true
21　　　　　　　　　},　'-',　{
22　　　　　　　　　　　　　text　:　'查询',
23　　　　　　　　　　　　　iconCls　:　'query',
24　　　　　　　　　　　　　handler　:　function()　{
25　　　　　　　　　　　　　　　　　store.load({
26　　　　　　　　　　　　　　　　　　　　　　　　　　　　　params　:　{
27　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　start　:　0,
28　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　limit　:　25,
29　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　USER_NAME　:　Ext.get('description').dom.value,
30　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　action　:　Ext.get('action').dom.value
31　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
32　　　　　　　　　　　　　　　　　　　　　　　　　})
33　　　　　　　　　　　　　}
34　　　　　　　　　}],
35　listeners　:　{
36　　　　　'render'　:　function()　{
37　　　　　　　　　var　tbar　=　new　Ext.Toolbar({
38　　　　　　　　　　　　　　　　　　　　　items　:　[{
39　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'新增',
40　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'add'
41　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},　{
42　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'修改',
43　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'modify'
44　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},　{
45　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'删除',
46　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'delete'
47　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},　'-',　{
48　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'导出PDF',
49　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'pdf'
50　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},　{
51　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'导出Excel',
52　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'excel'
53　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},　'-',　{
54　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　text　:　'打印',
55　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　iconCls　:　'print'
56　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}]
57　　　　　　　　　　　　　　　　　});
58　　　　　　　　　tbar.render(grid.tbar);
59　　　　　}
60　}