Question

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热门新闻”右侧的第四列。

Answer 1

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

根据该项目，新项目将适合页面空间，并在那里进入底部。

实现你想要的东西在布局类型Vbox的第3项中添加一个容器，你可以在里面一个接一个地添加一个容器。

Answer 2

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

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

2 个答案: