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();//第二個工具欄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:})var projectGrid = new Ext.grid.GridPanel({renderTo : "hello",title : "项目管理",widht : 180,height : 200,cm : projectColumn,store : proStore,autoScroll : true, // 内容溢出时产生滚动条tbar : , //給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]