给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　　　　　}