Question

我创建了一个捆绑了Ext.Template的面板。此面板包含在另一个生命周期崩溃的面板中。

id:             'myPanel',
title:          'My Title',
layout:         'border',
collapsible:    true,
collapsed:      true,
hideCollapseTool:true,
bodyBorder:     false,
height:         300,
bodyStyle:      'background:#F9F9F9;',
items: [{
    id:         'myDisplayPanel',
    bodyStyle:  'background:transparent;',
    width:      300,
    border:     false,
    margins:    '5 5 5 5',
    region:     'west',
    tpl:        new Ext.Template([
                    'some template'
                ])
},
{
    id:         'myForm',
    xtype:      'form',
    bodyStyle:  'background:transparent;',
    border:     false,
    margins:    '5 5 5 5',
    region:     'center',
[...]

此模板面板应该作为相邻网格中的行选择的结果进行更新。但是我第一次调用.update（数据）时出错了;在myDisplayPanel上，因为它不包含任何主体元素。

myGridSelectionModel: new Ext.grid.RowSelectionModel({
    singleselect: true,
    listeners: {
        rowselect: function(sm,rowIdx,r) {
            Ext.getCmp('myDisplayPanel').update(r.data);
            Ext.getCmp('myPanel').expand(true);
        }
    }
}),

当Ext尝试使用myDisplayPanel.body作为第一个参数调用template.overwrite函数时，调用myDisplayPanel.update（）会导致错误。

function(b,a,c){b=Ext.getDom(b);b.innerHTML=this.applyTemplate(a);

是否有可能以某种方式强制Ext为此隐藏面板生成一个body元素，然后才显示出来？我已经尝试在更新之前扩展元素，但现在这已经生效......

Answer 1

我知道这个帖子已经有2个月了，所以我不确定你是否找到了解决方案。但是，我只是遇到了同样的事情，并在寻找答案时遇到了你的主题。这就是我最终做的事情：

您当前正在运行panel.update（内容），请尝试以下操作：

if(panel.rendered) panel.update(content);
else panel.contentToLoad = content;

为要运行的渲染事件设置侦听器：

if(this.contentToLoad) panel.update(this.contentToLoad);

这样，如果面板没有渲染，它会将内容存储在某处，渲染侦听器将加载面板IS渲染时的内容。

Answer 2

您可以尝试使用Panel的elements配置，docs是“以逗号分隔的面板元素列表，以便在呈现面板时进行初始化。”例如，

elements: ['header','body']

但是它已经默认为'body'，所以它可能只是在你更新它时真正没有渲染的面板。尝试颠倒调用的顺序，以便首先展开容器（应强制子面板渲染），然后更新它。

Answer 3

默认情况下，折叠的面板（以及一般的隐藏容器）不会布置它们的子项，直到它们首次可见。您可以通过在折叠容器上设置forceLayout: true来覆盖此行为。顾名思义，这将迫使容器执行其布局，无论它是否可见。请注意，在您的情况下，这将是需要此配置的myPanel，而不是myDisplayPanel。

强制Ext为隐藏（折叠）面板创建body元素

3 个答案: