如何从initcomponent中隐藏工具栏项
How do I hide toolbar items from initcomponent
ExtJs工具栏中有一个按钮,如下图
Ext.define('Member.view.members.MembersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
initComponent: function() {
Ext.getCmp('pinReset').hidden = true;
this.callParent();
}
});
我想让按钮在渲染后隐藏起来。我想Ext.getCmp('pinReset')。Hidden = true;因为我已经为按钮分配了一个id。在Chrome开发工具上无法设置属性'hidden' of undefined
Extjs Version: 5.1initComponent
在呈现之前被调用。所以它找不到按钮。你可以使用'afterrender'事件来代替。
添加以下代码代替initComponent
:
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
工作代码:Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.grid.Panel', {
alias: 'widget.membersGrid',
id: 'membersGrid',
cls: 'custom-grid',
renderTo:Ext.getBody(),
requires: [],
viewConfig : {
enableTextSelection: true
},
frame: true,
store: '',
//id: 'transGrid',
height: 150,
columns: [
{
xtype: 'rownumberer'
},
{
hidden:true,
width: 10,
dataIndex: 'id',
text: 'id'
},
/*{
width: 100,
//flex: 1,
dataIndex: 'member_number',
text: 'Member Number'
},*/
{
width: 150,
flex: 1,
dataIndex: 'member_names',
text: 'Member Names'
}],
dockedItems: [
{
xtype: 'toolbar',
itemId: 'toptoolbar',
id:'toptoolbar',
flex: 1,
dock: 'top',
items: [
{
xtype: 'button',
text: 'Pin_Reset',
id: 'pinReset',
itemId: 'pinReset',
iconCls: 'pin_reset'
}
]
}
],
listeners:{
afterrender: function() {
Ext.getCmp('pinReset').hidden = true;
}
}
});
}
});
<link rel="stylesheet" href="https://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="https://extjs.cachefly.net/ext-4.1.1-gpl/ext-all-debug.js"></script>
你正在使用initComponent而不是afterRender在你的代码片段。对吗?
我将使用reference-属性,并像这样使用它:
items: [
{
xtype: 'button'
reference: 'myButton'
}
]
...
afterRender: function() {
this.lookupReference('myButton').setHidden(true);
this.callParent();
}
相关文章:
- 删除CKEditor工具栏按钮,但不删除功能
- Sencha触摸:工具栏无法正常滚动
- 使用网格ID隐藏剑道网格工具栏
- 如何在IE中隐藏菜单栏,工具栏
- 将此事件添加到工具栏
- ExtJS--如何居中对齐两个工具栏按钮
- 在某些URL上显示火狐插件工具栏
- 如何将自定义图标添加到 JqGrid 顶级工具栏按钮
- 自动隐藏地址栏问题
- 文本编辑工具栏解决方案 (js),具有低级自定义
- 隐藏和显示剑道ui编辑器工具栏
- 如何从initcomponent中隐藏工具栏项
- 如何隐藏Safari的工具栏时,方向改变为横向模式
- 如何在 CKEDITOR 内联中禁用自动隐藏/显示工具栏
- 隐藏jQuery移动固定工具栏的方向变化
- CKEditor 4内联:如何隐藏工具栏的需求
- 开发火狐插件-隐藏所有工具栏
- 如何完全隐藏dockedItems工具栏
- 如何隐藏javascript按钮的标题栏和工具栏
- 可隐藏'可回收'Javascript上下文工具栏