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

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

  •  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
  •  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

    推荐文章