Как скрыть панель инструментов элементы из 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.

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 в вашем codesnippet. Это верно?

Я хотел бы использовать референс-свойство и использовать его как это:

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

... 

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