如何将 ExtJS 仪表板面板移动到不同的列答案

【问题标题】：How do i move an ExtJS dashboard panel to a different column如何将 ExtJS 仪表板面板移动到不同的列
【发布时间】：2016-03-09 21:05:29
【问题描述】：

ExtJS 6 Portal 演示从 3 个默认列开始。如何在新列中创建一个新面板，从现有“行”的末尾开始，而不是从新行开始？您可以调用 addNew 将面板添加到您想要的任何列中的仪表板。然后，您可以将新面板拖动到右上角以创建第四列。

例如，如果您加载示例： http://examples.sencha.com/extjs/6.0.0/examples/classic/portal/index.html

并在控制台中运行此命令，它会创建一个新面板，在新行中占据整个宽度： Ext.ComponentQuery.query('dashboard')[0].addNew('stocks', 3, 1);

我希望它显示为“CNN 热门故事”右侧的第四列。

【问题讨论】：

标签： extjs portal extjs6

【解决方案1】：

这里是解决方案。您必须更新仪表板 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();

【讨论】：

【解决方案2】：

在您添加的示例中，看起来我们有布局类型column，这当然是假设，因为您没有附加代码。

据此，新项目将适合自己的页面空间并在那里进入底部。

为了实现您想要的，在布局类型为Vbox 的项目编号 3 中添加一个容器，您可以在其中一个接一个地项目。

【讨论】：

该演示使用仪表板的 xtype，您必须配置 columnWidths 才能使其工作。他们的演示，如果您运行命令 Ext.ComponentQuery.query('dashboard')[0].columnWidths，您会看到它们只定义了 3 个，这就解释了为什么您不能添加第 4 列。您必须弄清楚如何将列添加到仪表板，然后添加项目。这将需要调整已呈现给仪表板组件的列的大小。
谢谢乍得。我同意。必须有一些添加该列的方法，但我似乎找不到它。我尝试在仪表板上显示事件，以确切了解当您将面板拖到右上角时会发生什么，但什么也没看到。 aviram83，我会试一试。我希望如果我在该级别添加一个组件，仪表板将无法识别它，但我会尝试并使用结果更新问题。