Adding a part dynamically to a dashboard

  1. #1

    Adding a part dynamically to a dashboard

    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

    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
        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'
    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?


  2. #2
    Hello Paul!

    I'm afraid the dashboard component 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!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Dynamically adding
    By cslocus in forum 5.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 25, 2019, 8:41 PM
  2. [CLOSED] Adding a new MenuItem dynamically
    By vadym.f in forum 3.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 13, 2015, 11:42 AM
  3. Adding a GroupTabPanel Dynamically
    By Sesshoumaru in forum 2.x Help
    Replies: 4
    Last Post: Oct 04, 2012, 6:35 PM
  4. Dynamically adding Controls to WebUserControl
    By bright in forum 1.x Help
    Replies: 8
    Last Post: Apr 27, 2012, 6:34 PM
  5. adding tabs dynamically
    By in forum 1.x Help
    Replies: 3
    Last Post: Nov 16, 2009, 7:29 AM

Posting Permissions