给ExtJS的Grid增加两行tbar

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

　　我们先看看截图：

　　图片看不清楚？请点击这里查看原图（大图）。

　　代码如下：

双击代码全选

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119

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　}