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://fiddle.sencha.com/#fiddle/gqj

Ext.Component: 模板的 afterrender 访问 renderSelectors 失败

Ext.Component: Template's afterrender fails to access renderSelectors

javascript

extjs

scope

示例 A

示例 B