Ext.Component：模板的afterrender無法訪問renderSelectors

Question

下面，您將看到兩個使用模板渲染模式的示例。示例A無法正常工作。值爲cmp.helloLiEl的是偵聽器函數中的undefined。 afterrender回調不知道關於renderSelectors。

在示例B中，afterrender被分配了內聯函數以將偵聽器附加到模板列表項。我認爲提供函數的範圍就足夠了，但這並沒有按預期那樣工作。

如何獲取示例A的onRender聽衆進入renderSelectors？這裏

例A

Ext.onReady(function() { 
 
    Ext.define('Exmple.component.Hello', { 
 
    extend: 'Ext.Component', 
 
    title: 'Hello Test', 
 
    renderTpl: [ 
 
     '<ul>', 
 
     '<li class="lang" id="helloSelector-li">Hello {name}!</li>', 
 
     '</ul>' 
 
    ], 
 
    renderData: { 
 
     name: 'Joe' 
 
    }, 
 
    renderSelectors: { 
 
     helloLiEl: '#helloSelector-li' 
 
    }, 
 
    listeners: { 
 
     afterrender: { 
 
     fn : this.onRender, 
 
     scope : this 
 
     } 
 
    }, 
 
    onRender: function(cmp) { 
 
     console.log(cmp.helloLiEl); 
 
     cmp.mon(cmp.helloLiEl, 'click', function() { 
 
     alert('Hello again...'); 
 
     }); 
 
    } 
 
    }); 
 

 
    Ext.create('Exmple.component.Hello', { 
 
    renderTo: Ext.getBody(), 
 
    renderData: { 
 
     name: 'Bob' 
 
    } 
 
    }); 
 
});

#helloSelector-li { 
 
    background-color: yellow; 
 
    width: 35px; 
 
    height: 30px; 
 
}

<link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" /> 
 
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>

實例B

Ext.onReady(function() { 
 
    Ext.define('Exmple.component.Hello', { 
 
    extend: 'Ext.Component', 
 
    title: 'Hello Test', 
 
    renderTpl: [ 
 
     '<ul>', 
 
     '<li class="lang" id="helloSelector-li">Hello {name}!</li>', 
 
     '</ul>' 
 
    ], 
 
    renderData: { 
 
     name: 'Joe' 
 
    }, 
 
    renderSelectors: { 
 
     helloLiEl: '#helloSelector-li' 
 
    }, 
 
    listeners: { 
 
     afterrender: function(cmp) { 
 
     console.log(cmp.helloLiEl); 
 
     cmp.mon(cmp.helloLiEl, 'click', function() { 
 
      alert('Hello again...'); 
 
     }); 
 
     } 
 
    } 
 
    }); 
 

 
    Ext.create('Exmple.component.Hello', { 
 
    renderTo: Ext.getBody(), 
 
    renderData: { 
 
     name: 'Bob' 
 
    } 
 
    }); 
 
});

#helloSelector-li { 
 
    background-color: yellow; 
 
    width: 35px; 
 
    height: 30px; 
 
}

<link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" /> 
 
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>

Answer 1

的問題是你的範圍。

另外，onRender功能覆蓋它繼承（http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.util.Renderable-method-onRender）的同名的方法，所以因此我已在功能名稱變更爲myTest

Ext.onReady(function() { 
    Ext.define('Exmple.component.Hello', { 
     extend: 'Ext.Component', 
     title: 'Hello Test', 
     renderTpl: ['<ul>', '<li class="lang" id="helloSelector-li">Hello {name}!</li>', '</ul>'], 
     renderData: { 
      name: 'Joe' 
     }, 
     renderSelectors: { 
      helloLiEl: '#helloSelector-li' 
     }, 

     initComponent: function() { 
      me = this; 
      me.listeners = { 
       afterrender: { 
        fn: this.myTest, 
        scope: this 
       } 
      } 
      this.callParent(); 
     }, 
     myTest: function(cmp) { 
      cmp.mon(cmp.helloLiEl, 'click', function() { 
       alert('Hello again...'); 
      }); 
     } 
    }); 

    Ext.create('Exmple.component.Hello', { 
     renderTo: Ext.getBody(), 
     renderData: { 
      name: 'Bob' 
     } 
    }); 
}); 

看看答案這裏補充https://stackoverflow.com/a/23806475

演示：https://fiddle.sencha.com/#fiddle/gqj