代码之家 › 专栏 › 技术社区 › Mr. Polywhirl

外部组件:模板的afterrender无法访问renderSelectors

scope extjs javascript

2

Mr. Polywhirl · 技术社区 · 11 年前

下面,您将看到两个使用模板渲染模式的示例。示例A工作不正常。价值 cmp.helloLiEl 是 undefined 在监听器函数中。这个 afterrender 回调不知道 renderSelectors .

在实施例B中 后渲染 分配了一个内联函数,用于将侦听器附加到模板列表项。我认为为函数提供范围就足够了,但这并没有像预期的那样工作。

如何获取示例A onRender 侦听器访问 渲染选择器 ?

示例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'
    }
  });
});

#hello选择器li{
背景色:黄色;
宽度:35px;
高度:30px;
}

<链接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>

1 回复 | 直到 11 年前

1

Community Mohan Dere 9 年前

这里的问题是你的范围。

此外 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