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