如何将ExtJS仪表板面板移动到其他列

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

例如，如果加载示例：

然后在控制台中运行此命令，它将创建一个新面板，占据新行中的整个宽度： Ext.ComponentQuery.query（'dashboard'）[0].addNew（'stocks'，3，1）

---

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

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

根据这一点，新项目将适合自己的页面空间和那里去底部

---

要实现您想要的功能，请在布局类型的项目编号3中添加一个容器，并在其中逐个添加项目。

以下是解决方案。您必须更新仪表板columnWidths数组和单个columns 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();

---

该演示使用xtype的dashboard，您必须配置列宽才能使其正常工作。如果您运行命令Ext.ComponentQuery.query（'dashboard'）[0].columnWidths，您会看到它们只定义了3列，这就解释了为什么不能添加第4列。您必须弄清楚如何将列添加到仪表板，然后添加项目。这需要调整已呈现到仪表板组件的列的大小。谢谢。我同意。必须有某种方法添加该列，但我似乎找不到它。我试图公开仪表板上的事件，以查看将面板拖到右上角时到底发生了什么，但什么也看不到。阿维拉姆83，我来试一试。如果我在那个级别添加一个组件，我希望仪表板不会识别它，但我会尝试并用结果更新问题。