Adding a part dynamically to a dashboard

[plok77]

Is it possible to add a new part to a Ext.JS dashboard instance at runtime? Without having to destroy the current instance and create a new instance in its place?

We want to allow users to drag/drop new parts onto a dashboard, and have that part rendered immediately on their dashboard. The sample code below demonstrates what we are trying to do.

Fiddle can be found https://fiddle.sencha.com/#fiddle/3eaa&view/editor (here)


Ext.define('Fiddle.Dashboard', {
extend: 'Ext.dashboard.Dashboard',
xtype: 'simple-dash',
renderTo: document.body,
maxColumns: 2,
stateful: true,
stateId: 'simple-dashboard',
columnWidths: [0.5, 0.5],
parts: {
widget1: {
viewTemplate: { //normal view config, can use xtype to use an application view
title: 'Widget 1',
html: 'Widget 1'
}
},
widget2: {
viewTemplate: {
title: 'Widget 2',
html: 'Widget 2'
}
},
widget3: {
viewTemplate: {
title: 'Widget 3',
html: 'Widget 3'
}
}
},
defaultContent: [{
type: 'widget1', //maps to the parts key
columnIndex: 0
}, {
type: 'widget3',
columnIndex: 0
}, {
type: 'widget2',
columnIndex: 1
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.container.Container', {
plugins: ['viewport'],
layout: 'border',
items: [{
xtype: 'simple-dash',
region: 'center',
buttonAlign: 'center',
buttons: [{
xtype: 'button',
text: 'Add Widget',
listeners: {
click: function (button, e, eOpts) {
var dash = button.up().up();
/* HOW TO ADD NEW WIDGET TO EXISTING DASHBOARD ?*/
var newWidget = {
widget4: {
viewTemplate: {
title: 'Widget 4',
html: 'Widget 4'
}
}
};
dash.parts.add(newWidget);
},
}
}]
}]
})
}
});

This code doesn't error. But we need to add this part to the current content of the dashboard. Is there a way to do this?

Thanks

Paul

[fabricio.murta]

Hello Paul!

I'm afraid the dashboard component (https://docs.sencha.com/extjs/7.3.1/classic/Ext.dashboard.Dashboard.html) does not support dynamically adding or removing parts. You need to define them beforehand and -maybe- you could show/hide. I see the component has some add methods but they are private/undocumented, thus not supposed or supported to be called from user applications.

This doesn't mean you can't further develop the component to allow dynamically adding/removing parts; just that it is not supported out-of-the-box.

Hope this helps!