渲染XTemplate中的自定义组件 [英] Render customize component inside XTemplate

问题描述

  Ext.define（'GB.view.DigestList'，{
 extends：'Ext.panel.Panel'，
 alias：'widget.digestlist' ，
 
 items：[{
 xtype：'dataview'，
 store：'GB.store.Digests'，
 tpl：new Ext.XTemplate（
'< tpl for =。>'，
'< div class =container>'，
'{name}'，
'< div class =davidfun>< / div>'，
'< / div>'，
'< / tpl>'
），
 listeners：{ 
 viewready：function（）{
 var home_d = Ext.create（'GB.view.MyOwnDigest'）; 
 home_d.render（Ext.query（'。davidfun'）[0] ）; 
 // home_d.render（Ext.getBody（））;< - 这行可以正常工作
}，
} 
}]，
 
 bind：function（record，store）{
 this。 getComponent（0）.bindStore（记录）; 
} 
 
}）; 
 
 
 Ext.define（'GB.store.Digests'，{
 extends：'Ext.data.Store'，
 model：'GB.model。 Digest'，
 data：[
 {'name'：'name111'}，
 {'name'：'name222'} 
] 
}）;有没有人知道为什么我不能得到div类，这是davidfun，在Xtemplate中的扩展名为
  
 $ b .query（'。davidfun'）[0]，
 
 
 
它总是显示'undefined'，谢谢你的回应首先：）
 
 
 
代码更新：
 
 
 
 
问题解决！
 
 
 
 
 
 
解决方案
您可以尝试dataview的viewready事件。
 
 
 
请参见我的示例 http://jsfiddle.net/2huvt/  
 
Ext.define('GB.view.DigestList',{
    extend: 'Ext.panel.Panel',
    alias:'widget.digestlist',

            items:[ {
                xtype:'dataview',
                store: 'GB.store.Digests',
                tpl: new Ext.XTemplate(
                          '<tpl for=".">',
                            '<div class="container">',
                              '{name}',
                              '<div class="davidfun"></div>',
                            '</div>',
                          '</tpl>'
                ),      
                listeners: {
                    viewready: function(){
                        var home_d = Ext.create('GB.view.MyOwnDigest');
                        home_d.render(Ext.query('.davidfun')[0]);
                        // home_d.render(Ext.getBody()); <- it'll work fine with this line
                    },
                }
              }],

    bind: function(record, store) {
        this.getComponent(0).bindStore(record);
    }

});


Ext.define('GB.store.Digests', {
    extend:'Ext.data.Store',
    model: 'GB.model.Digest',
    data:[
        {'name':'name111'},
        {'name':'name222'}
    ]
});
Does someone know why can't i get div class which is "davidfun" that in Xtemplate by Ext.query('.davidfun')[0],

it'll always show 'undefined', thanks for your response first:)

Code UPDATE:

  

    
Problem resolved!
  


解决方案
You can try the "viewready" event of the dataview.

See my example http://jsfiddle.net/2huvt/

                        
这篇关于渲染XTemplate中的自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！