[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar

简介:

官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems

本文作者:sushengmiyan

------------------------------------------------------------------------------------------------------------------------------------

像Word办公软件一样,我们需要将一些按钮什么的放置在我们办公区域的上方,有时候我们是需要与panel绑定在一起的,这时候,在panel里面设置一个停靠组件toolbar就可以实现。修改Main.js

在学生列表中的panel组件上增加如下:

              dockedItems: [       
			    {
				        xtype: 'toolbar',	
				        items: [{  
                        //xtype : 'gridtoolbar', // 按钮toolbar  
                            text : '新增',   
                            glyph : 0xf016    
                        },{  
                            text : '修改',  
                            glyph : 0xf044  
                        },{  
                            text : '删除',  
                            glyph : 0xf014  
                        },{  
                            text : '查看',  
                            glyph : 0xf022  
                        }],
		                dock: 'top',
			  }], 

显示效果如下:

为了后期维护方便,我们将新加入的这些停靠内容提取成一个类,如下:

/** 
 * 提取了一个停靠组件的类,方便维护
 */  
Ext.define('oaSystem.view.main.region.GridToolbar', {  
            extend : 'Ext.toolbar.Toolbar',  
            alias : 'widget.gridtoolbar',  
            initComponent : function() {  
                this.items = [{  
                            text : '新增',   
                            glyph : 0xf016,    
                        },{  
                            text : '修改',  
                            glyph : 0xf044  
                        },{  
                            text : '删除',  
                            glyph : 0xf014  
                        },{  
                            text : '查看',  
                            glyph : 0xf022  
                        }];  
                this.callParent();  
            }  
});  
在Main.js中引入这个文件:

后期想修改这些内容的话,就直接去main下的region的文件夹下GridToolbar.js文件就可以了。

相关文章
|
JavaScript 前端开发 HTML5
ExtJS中的accordion布局如何展开特定的item
因为项目需要,使用了extJS作为后台管理系统的前端框架。 众所周知,后台管理系统一般是根据权限来展示菜单的。 菜单使用了panel的accordion布局,然后内部使用panel包裹了一棵树(treepanel)。
1106 1
|
前端开发 JavaScript
|
JavaScript 前端开发 知识图谱
[ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将grid表格导出到excel,使用的是前端导出,不涉及后端。
1440 0