我怎麼一個ExtJS儀表板移動到不同的列

ExtJS的6門戶網站的演示與3默認列開始。我如何在新列中創建新面板，從現有「行」的末尾開始，而不是開始新行？您可以調用addNew將面板添加到您想要的任何列中的儀表板。然後，您可以將新面板拖到右上角以製作第四列。我怎麼一個ExtJS儀表板移動到不同的列

例如，如果加載了例如： http://examples.sencha.com/extjs/6.0.0/examples/classic/portal/index.html

並在控制檯運行此命令，它創建一個新面板，佔用了整個寬度在一個新行： Ext.ComponentQuery.query（ 'dashboard'）[0] .addNew（'stocks'，3，1）;

我想讓它顯示爲第四列到「CNN最新新聞」的權利。

來源

2016-03-09 Tulvan

在這個例子中，你加入它的外觀就像我們的佈局類型column，這是當然的假設，因爲你不重視代碼。

根據這一新項目將適合自己的頁面空間，並在那裏去底部。

達到你想要的佈局類型Vbox的項目數量3添加一個容器和內即可項目一個接一個。

來源

2016-03-10 06:30:55 aviram83

該演示使用儀表板的xtype，您必須配置columnWidths以使其工作。他們的演示，如果你運行命令Ext.ComponentQuery.query（'dashboard'）[0] .columnWidths，你會發現他們只有3個定義，這就解釋了爲什麼你不能添加第4列。你將不得不弄清楚如何添加一個列到儀表板，然後添加項目。這將需要調整已經呈現給儀表板組件的列的大小。 –

謝謝乍得。我同意。必須有某種添加該列的方法，但我似乎無法找到它。我試圖在儀表板本身上暴露事件，以確切地看到將面板拖到右上角但未看到任何內容時發生的情況。 aviram83，我會給你一個鏡頭。我期望如果我在該級別添加組件，儀表板不會識別它，但我會嘗試它並用結果更新問題。 – Tulvan

這裏是解決方案。您必須更新儀表板columnWidths數組和各個列columnWidth屬性。代碼如下所示：

// create the new column 
Ext.ComponentQuery.query('dashboard')[0].createColumn(); 

// shrink column 0 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[0] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[0].columnWidth = 0.25; 

// shrink column 1 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[1] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[1].columnWidth = 0.25; 

// shrink column 2 by some amount to make space for the new column 
Ext.ComponentQuery.query('dashboard')[0].columnWidths[2] = 0.25; 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[2].columnWidth = 0.25; 

// set the new column width 
Ext.ComponentQuery.query('dashboard')[0].columnWidths.push(0.25); 

// add a part to the new column 
Ext.ComponentQuery.query('dashboard')[0].addView({ 
    type: 'rss', 
    feedUrl: 'http://feeds.feedburner.com/sencha' 
}, (3), 1); 

// update the layout so all the column sizing takes effect 
Ext.ComponentQuery.query('dashboard')[0].query('dashboard-column')[0].ownerCt.updateLayout();

來源

2016-03-10 21:40:48 Tulvan

我怎麼一個ExtJS儀表板移動到不同的列

回答

相關問題