如何从 initcomponent 隐藏工具栏项

Question

我在 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'”。

Extjs 版本：5.1

Answer 1

initComponent 在 rendering.So 之前调用它无法找到 button.You 可以使用 '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>

Answer 2

您在代码片段中使用的是 initComponent 而不是 afterRender。对吗？

我会使用参考-属性并像这样使用它：

items: [
    {
        xtype: 'button'
        reference: 'myButton'
    }
]

...

afterRender: function() {
        this.lookupReference('myButton').setHidden(true);
        this.callParent();
    }

如何从 initcomponent 隐藏工具栏项

How do I hide toolbar items from initcomponent

javascript

extjs

extjs5