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

评论

1 楼 kevin_zhm 2012-05-21  

为什么我的不可以呢。我用的是。ext4.1的
？？大侠给点意思。报错信息：
Uncaught TypeError: Cannot read property 'dom' of null