我如何隱藏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

你在你的codesnippet使用initComponent代替AfterRender階段。那是對的嗎？

我會用基準屬性，並使用它像這樣：

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

... 

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