Extjs.GridPanel 顯示多行工具欄 (tbar)

js文件。。

Ext.onReady(function() {

	//初始化數據
			var proData = {
				records : [{
							proName : "cocobra 居家內衣系列"
						}, {
							proName : "cocobra 休閒內衣系列"
						}]
			}


			var proCreate = new Ext.data.Record.create([{
						name : "proName",
						mapping : "proName",
						type : "string"
					}]);

			var fields = [{
						name : 'proName',
						mapping : 'proName'
					}];


			var proStore = new Ext.data.JsonStore({
						fields : fields,
						data : proData,
						root : 'records'
					});

			var rowNum = new Ext.grid.RowNumberer();  //添加行號
			var projectColumn = new Ext.grid.ColumnModel([rowNum, {
						header : "項目名稱",
						width : 160,
						dataIndex : "proName",
						id : "proName",
						sortable : true  //設置排序
					}]);

			//第二個工具欄
			var tbar2 = new Ext.Toolbar({
						renderTo : Ext.grid.GridPanel.tbar,// 其中grid是上邊創建的grid容器
						items : [{
									text : '添加',
									iconCls:'addBtn'
								}, {
									xtype : "tbseparator"
								}, {
									text : "刪除",
									iconCls : "deleteBtn"   //圖片樣式, 需要自己寫css樣式,引入手寫的css,如果用自帶會因爲瀏覽器不兼容而不顯示圖片
								}, {
									xtype : "tbseparator"
								}, {
									text : "刪除全部",
									iconCls:'deleteBtn'
								}, {
									xtype : "tbseparator"
								}, {
									text : '保存',
									iconCls:'saveBtn'
								}]

					});

	var tbar3 = new Ext.Toolbar({
				renderTo: Ext.grid.GridPanel.tbar,
				items:[new Ext.form.TextField({
					fieldLabel:"測試"
				//	width:100
					//height:30
				})]
			})


			var projectGrid = new Ext.grid.GridPanel({
						renderTo : "hello",
						title : "項目管理",
						widht : 180,
						height : 200,
						cm : projectColumn,
						store : proStore,
						autoScroll : true, // 內容溢出時產生滾動條
						tbar : [new Ext.form.ComboBox({
									store : ["喜羊羊與灰太狼", "cocobra"],    //給ComboBox添加數據
									emptyText : '請選擇供應商',
									id : "provider",
									name : "provider",
									editable : false   //是否允許輸入

								})],
						listeners : {     //將第二個bar渲染到tbar裏面，通過listeners事件
							'render' : function() {
								tbar2.render(this.tbar);
          tbar3.render(this.tbar);
							}
						}
					});
		});

--- 在按鈕旁邊添加圖片的css樣式

.deleteBtn {
   background-image: url(../images/default/dd/drop-no.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}

.addBtn {
   background-image: url(../images/default/dd/drop-add.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}

.saveBtn {
   background-image: url(../images/default/dd/drop-yes.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}