给ExtJS的Grid增加两行tbar

最新推荐文章于 2021-07-14 12:17:52 发布

转载最新推荐文章于 2021-07-14 12:17:52 发布 · 1w 阅读

Extjs 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在Grid组件中优化布局的方法，通过将查询与操作按钮分开显示，提升用户体验。具体展示了如何在顶部放置查询输入控件，并在下方添加新增、修改、删除、导出等功能按钮，实现更为清晰的操作界面。

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

　　我们先看看截图：

　　代码如下：

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("&nbsp;&nbsp;&nbsp;&nbsp;"),
 
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　　　　　}