ext 如何让panel 重新渲染

Posted 2023-04-18

参考技术A Ext.Panel吧，将一个Panel显示在浏览器中，其过程叫做render（渲染）。有这么几道工序：
第一、触发”beforeRender”事件
第二、得到这个Panel的父节点（针对DOM来说），即容器，也就是供Panel入住的那个容器
第三、设置rendered=true
第四、调用onRender方法，这步是最重要的，也就是如何将组件显示在浏览器上，涉及到很多流程，一会详解
第五、设置这个panel的css
第六、触发”render”事件，指的是当render完成后，触发的事件
第七、调用aferRender，这步和第四步一样，是很重要的流程之一
第八、看看要不要将这个panel隐藏或者失效，如果用户设置了hidden或者disable
第九、设置这个panel的位置，也就是doLayout，布局
以上完成 参考技术B myview.render('grid-example');

在 XTemplate 中渲染自定义组件

【中文标题】在 XTemplate 中渲染自定义组件

【英文标题】：Render customize component inside XTemplate

【发布时间】：2012-09-26 08:44:08

【问题描述】：

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'
    ]
);

有人知道为什么我不能通过 Ext.query('.davidfun')[0] 在 Xtemplate 中获得“davidfun”的 div 类，

它总是显示“未定义”，首先感谢您的回复:)

代码更新：

问题已解决！

【问题讨论】：

第一注：XTemplates默认编译，不需要设置。

好的，我会为此进行修改。我想知道它是否没有编译，因此设置为已编译：true

【参考方案1】：

你可以试试dataview的“viewready”事件。

看我的例子http://jsfiddle.net/2huvt/

【讨论】：

再次嗨，但是如果我将数据加载更改为代理，它将显示未定义jsfiddle.net/LUuhZ/1

尝试数据视图的“刷新”事件，但在您的情况下它将被调用两次。在处理程序中，您只能在加载商店时执行 Ext.query。顺便说一句，在您的小提琴中，浏览器不允许您跨域 ajax 到 Dropbox。