首页 > 代码库 > [ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
本文地址：http://blog.csdn.net/sushengmiyan/article/details/39156321
官方例子: 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文件就可以了。
[ExtJS5学习笔记]第十八节 Extjs5的panel的dockeditems属性配置toolbar
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。