2010-07-16 57 views
2

我創建了一個與Ext.Template捆綁在一起的面板。此面板包含在另一個面板中,該面板的使用壽命已縮短。Force Ext爲隱藏(摺疊)面板創建body元素

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上,因爲它不包含body元素。

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

到myDisplayPanel.update()的調用導致出錯時分機嘗試與myDisplayPanel.body調用template.overwrite函數作爲第一個參數。

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

是否有可能以某種方式迫使Ext在它顯示的beeing之前爲這個隱藏面板生成一個body元素?我試圖在更新它之前擴展該元素,但現在已經有效...

回答

0

默認情況下,摺疊的面板(以及隱藏的容器)默認情況下不會佈置它們的子級,直到它們首次變爲可見爲止。您可以通過在摺疊的容器上設置forceLayout: true來覆蓋此行爲。顧名思義,這將強制容器執行其佈局,無論它是否可見。請注意,在你的情況下,這將是需要此配置的myPanel,而不是myDisplayPanel。

+0

是的,我注意到了這個設置,但不幸的是它對我來說並不適用於某些原因不明的原因。我完全放棄了這個面板的崩潰方法,但我會接受你的答案,理論上它應該解決這類問題。 – 2010-08-16 06:07:40

+0

對不起,這不適合你。如果你想進一步挖掘,我通常通過在螢火蟲的更新行上設置一個斷點來調試這類事情,然後使用控制檯/手錶瀏覽Ext.getCmp('myDisplayPanel'),檢查渲染和el屬性它和它的所有者Ct鏈。最後呈現的父級和/或尚未呈現的頂級父級是開始調試以查看未發生預期佈局的原因的好地方。佈局可能會變得棘手,特別是如果它們很複雜並且嵌套。 – 2010-08-16 12:36:28

0

您可以嘗試Panel的elements配置,其中docs是「用逗號分隔的面板元素列表,用於初始化面板被渲染。「所以例如,

elements: ['header','body'] 

但是它已經默認爲「身體」而已,所以它可能只是當你更新它的面板是真正的不呈現還沒有。嘗試顛倒您的調用順序,以便首先展開容器(應強制子面板進行渲染)然後進行更新。

+0

對於遲到的答案我很抱歉,但是我最小的兒子在上週日出生讓我有點忙。您建議的修復似乎不起作用。我也嘗試改變我的通話順序,但無濟於事。現在我唯一的解決方案(解決方法)是完全放棄摺疊參數。 – 2010-07-26 08:00:55

+0

顛倒調用次序不起作用的原因是,當myPanel容器用動畫展開時,它變成了異步調用。默認情況下,佈局不會在摺疊/隱藏的容器上執行,因此當myDisplayPanel之後立即調用更新時,myPanel的子級的初始佈局尚未呈現。 – 2010-08-15 19:24:02

1

我知道這個線程是2個月大,所以我不知道你是否曾經找到過解決方案。然而,我只是遇到了同樣的事情,並在尋找答案時遇到了你的線索。這是我落得這樣做:

如果您當前運行panel.update(內容),試試這個:

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

建立一個監聽渲染事件來運行:

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

這樣,如果面板沒有渲染,它會將內容存儲在某處,並且渲染偵聽器將在面板渲染時加載任何內容。