ext grid 增加 多个 toolbar

最近项目中客户提出的搜索条件很多，有的达2位数，一行toolbar明显不够用了，默认情况下ext一行toolbar过长时后面的内容就自动隐藏了，在extjs上面翻了又翻，找到一个办法，很简单，再增加一个toolbar。一个测试的简短grid代码

Js代码

1.   // create the editor grid  
2.     var grid = new Ext.grid.EditorGridPanel({  
3.         store: store,  
4.         cm: cm,  
5.         renderTo: 'editor-grid',  
6.         width:600,  
7.         height:300,  
8.         autoExpandColumn:'common',  
9.         title:'Edit Plants?',  
10.         frame:true,  
11.         plugins:checkColumn,  
12.         clicksToEdit:1,  
13.   
14.         tbar: new Ext.Toolbar({  
15.             autoWidth:true,  
16.                 autoShow:true,  
17.             items:[  
18.             {text: 'there is a add button for test'},  
19.                '-',  
20.                '->',  
21.                {text: 'there is a update button for test'},  
22.                  
23.                 {text: 'there is a delete button for test'}  
24.         ]  
25.          })  
26.     });  
27.   
28.   
29. this.bbar2 = new Ext.Toolbar({  
30.             renderTo:grid.tbar  
31.             ,items:['Example of second toolbar', '-', {  
32.                  text:'Button'  
33.                 ,iconCls:'icon-key'  
34.             }, '-'  
35.             ]  
36.         });  
37.   
38.   
39.   
40.     // trigger the data store load  
41.     store.load();  
42. });  

  // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',
        width:600,
        height:300,
        autoExpandColumn:'common',
        title:'Edit Plants?',
        frame:true,
        plugins:checkColumn,
        clicksToEdit:1,

        tbar: new Ext.Toolbar({
			autoWidth:true,
				autoShow:true,
			items:[
			{text: 'there is a add button for test'},
			   '-',
			   '->',
			   {text: 'there is a update button for test'},
			   
                {text: 'there is a delete button for test'}
		]
		 })
    });


this.bbar2 = new Ext.Toolbar({
            renderTo:grid.tbar
            ,items:['Example of second toolbar', '-', {
                 text:'Button'
                ,iconCls:'icon-key'
            }, '-'
            ]
        });



    // trigger the data store load
    store.load();
});

 其中bbar2就是新增加的toolbar -_-!,再

Js代码

1. renderTo:grid.tbar  

renderTo:grid.tbar

 

by the way,用chrome编辑完发现插入代码没有保存按键....@##%%#

 

• 
• 大小: 14 KB