您的位置：首页 > Web前端 > JavaScript

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

2014-09-09 15:19 375 查看

本文地址：/article/1331631.html官方例子: http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.panel.Panel-cfg-dockedItems href="http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext-method-each" target=_blank>本文作者：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文件就可以了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航