processmaker-files/workflow/engine/templates/dashboard/index.js

function generatedOrder () {
    var orderNow = [];
    orderNow[0] = [];
    orderNow[1] = [];
    orderNow[2] = [];

    for (var i = 0; i < Ext.getCmp('columnPos0').items.items.length; i++) {
      orderNow[0][i] = Ext.getCmp('columnPos0').items.items[i].dasInsUid;
    }
    for (var i = 0; i < Ext.getCmp('columnPos1').items.items.length; i++) {
      orderNow[1][i] = Ext.getCmp('columnPos1').items.items[i].dasInsUid;
    }
    for (var i = 0; i < Ext.getCmp('columnPos2').items.items.length; i++) {
      orderNow[2][i] = Ext.getCmp('columnPos2').items.items[i].dasInsUid;
    }

    return orderNow;
}

Function.prototype.defaults = function() {
    var _f = this;
    var _a = Array(_f.length-arguments.length).concat( Array.prototype.slice.apply(arguments));
    return function() {
        return _f.apply(_f, Array.prototype.slice.apply(arguments).concat( _a.slice(arguments.length, _a.length)));
    }
}
var reallocate = function (cols) {
    var cPos;
    var dashletOrder = new Array();
    for (var i = 0; i < Ext.getCmp('columnPos0').items.items.length; i++) {
        dashletOrder.push(Ext.getCmp('columnPos0').items.items[i].id);
    }
    for (i = 0; i < Ext.getCmp('columnPos1').items.items.length; i++) {
        dashletOrder.push(Ext.getCmp('columnPos1').items.items[i].id);
    }
    for (var i = 0; i < Ext.getCmp('columnPos2').items.items.length; i++) {
        dashletOrder.push(Ext.getCmp('columnPos2').items.items[i].id);
    }
    for (i = 0; i < dashletOrder.length; i++) {
        cPos = i % cols;
        Ext.getCmp('columnPos' + cPos).add(Ext.getCmp(dashletOrder[i]));
    }
}.defaults(3);

function dashboardSetLayout(numColumn)
{
    dashletsColumns = numColumn;

    var pd = Ext.getCmp("portalDashboard");

    switch (numColumn) {
        case 1:
            reallocate(1);

            pd.items.items[0].columnWidth = 0.98;
            pd.items.items[1].columnWidth = 0.01;
            pd.items.items[2].columnWidth = 0.01;

            tbDashboard.items.items[0].setDisabled(false);
            tbDashboard.items.items[1].setDisabled(false);
            tbDashboard.items.items[2].setDisabled(true);
            break;
        case 2:
            reallocate(2);

            pd.items.items[0].columnWidth = 0.49;
            pd.items.items[1].columnWidth = 0.49;
            pd.items.items[2].columnWidth = 0.01;

            tbDashboard.items.items[0].setDisabled(false);
            tbDashboard.items.items[1].setDisabled(true);
            tbDashboard.items.items[2].setDisabled(false);
            break;
        case 3:
            reallocate(3);

            pd.items.items[0].columnWidth = 0.33;
            pd.items.items[1].columnWidth = 0.33;
            pd.items.items[2].columnWidth = 0.33;

            tbDashboard.items.items[0].setDisabled(true);
            tbDashboard.items.items[1].setDisabled(false);
            tbDashboard.items.items[2].setDisabled(false);
            break;
    }

    pd.doLayout();
}

var tbDashboard;

Ext.onReady(function(){

  Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

  // create some portlet tools using built in Ext tool ids
  var tools = [{
    id:'gear',
    handler: function(){
      Ext.Msg.alert(_('ID_MESSAGE'), _('ID_SETTING_MESSAGE'));
    }
  },{
    id:'close',
    handler: function(e, target, panel){
        panel.ownerCt.remove(panel, true);
    }
  }];

  tbDashboard = new Ext.Toolbar({
    height: 30,
    items: [
      {
        xtype: 'tbbutton',
        text : _("ID_DASHBOARD_BTNCOLUMNS3"),
        handler : function(a) {
          Ext.MessageBox.show({
            msg: _('ID_LOADING'),
            width:300,
            wait:true,
            waitConfig: {interval:200},
            animEl: 'mb7'
          });

          var vp = Ext.getCmp('viewportDashboard');
          dashboardSetLayout(3);

          var orderNow = generatedOrder();
          Ext.Ajax.request({
            params: {
              positionCol0: Ext.encode(orderNow[0]),
              positionCol1: Ext.encode(orderNow[1]),
              positionCol2: Ext.encode(orderNow[2]),
              columns: 3
            },
            url: 'DashboardModule/saveOrderDashlet',
              success: function (res) {
                var data = Ext.decode(res.responseText);
                if (data.success) {
                  Ext.MessageBox.hide();
                }
              },
              failure: function () {
            	  Ext.MessageBox.alert(_('ID_ERROR'), _('ID_IMPORTING_ERROR'));
              }
          });
        }
      },
      {
        xtype: 'tbbutton',
        text : _("ID_DASHBOARD_BTNCOLUMNS2"),
        handler : function(a) {
          Ext.MessageBox.show({
            msg: _('ID_LOADING'),
            progressText: _('ID_SAVING'),
            width:300,
            wait:true,
            waitConfig: {interval:200},
            animEl: 'mb7'
          });

          var vp = Ext.getCmp('viewportDashboard');

          dashboardSetLayout(2);

          /*
          var dashletMove = new Array();
          for (var i = 0; i < Ext.getCmp('columnPos2').items.items.length; i++) {
            dashletMove.push(Ext.getCmp('columnPos2').items.items[i].id);
          }
          var flag = 0;
          for (var i = 0; i < dashletMove.length; i++) {
            Ext.getCmp('columnPos' + flag).add(Ext.getCmp(dashletMove[i]));
            if (flag == 0) {
              flag = 1;
            } else {
              flag = 0;
            }
          };
         */

          var orderNow = generatedOrder();
          Ext.Ajax.request({
            params: {
              positionCol0: Ext.encode(orderNow[0]),
              positionCol1: Ext.encode(orderNow[1]),
              positionCol2: Ext.encode(orderNow[2]),
              columns: 2
            },
            url: 'DashboardModule/saveOrderDashlet',
              success: function (res) {
                var data = Ext.decode(res.responseText);
                if (data.success) {
                  Ext.MessageBox.hide();
                }
              },
              failure: function () {
                Ext.MessageBox.alert(_('ID_ERROR'), _('ID_IMPORTING_ERROR'));
              }
          });
        }
      },
      {
        xtype: 'tbbutton',
        text : _("ID_DASHBOARD_BTNCOLUMNS1"),
        handler : function(a) {
          Ext.MessageBox.show({
            msg: _('ID_LOADING'),
            progressText: _('ID_SAVING'),
            width:300,
            wait:true,
            waitConfig: {interval:200},
            animEl: 'mb7'
          });

          var vp = Ext.getCmp('viewportDashboard');
          dashboardSetLayout(1);

          var orderNow = generatedOrder();
          Ext.Ajax.request({
            params: {
              positionCol0: Ext.encode(orderNow[0]),
              positionCol1: Ext.encode(orderNow[1]),
              positionCol2: Ext.encode(orderNow[2]),
              columns: 1
            },
            url: 'DashboardModule/saveOrderDashlet',
              success: function (res) {
                var data = Ext.decode(res.responseText);
                if (data.success) {
                  Ext.MessageBox.hide();
                }
              },
              failure: function () {
                Ext.MessageBox.alert(_('ID_ERROR'), _('ID_IMPORTING_ERROR'));
              }
          });
        }
      }
    ]
  });

  var viewport = new Ext.Viewport({
    layout:'fit',
    name : 'viewportDashboard',
    id   : 'viewportDashboard',
    items:[{
      xtype:'portal',
      region:'center',
      margins:'35 5 5 0',
      tbar: tbDashboard,
      name : 'portalDashboard',
      id   : 'portalDashboard',
      items:[{
        columnWidth:.33,
        id   : 'columnPos0',
        style:'padding:10px 0 10px 10px',
        items:[]
      },{
        columnWidth:.33,
        id   : 'columnPos1',
        style:'padding:10px 0 10px 10px',
        items:[]
      },{
        columnWidth:.33,
        id   : 'columnPos2',
        style:'padding:10px',
        items:[]
      }],
      listeners: {
        'drop': function(e) {
                    if (e.columnIndex + 1 <= dashletsColumns) {
                        var orderNow = generatedOrder();
                        Ext.MessageBox.show({
                            msg: _("ID_LOADING"),
                            progressText: _("ID_SAVING"),
                            width:300,
                            wait:true,
                            waitConfig: {interval:200},
                            animEl: "mb7"
                        });

                        if (tbDashboard.items.items[0].disabled == true) {
                            var colum = 3;
                        } else {
                            var colum = 2;
                        }

                        Ext.Ajax.request({
                            params: {
                                positionCol0: Ext.encode(orderNow[0]),
                                positionCol1: Ext.encode(orderNow[1]),
                                positionCol2: Ext.encode(orderNow[2]),
                                columns: colum
                            },
                            url: "DashboardModule/saveOrderDashlet",
                                success: function (res) {
                                    var data = Ext.decode(res.responseText);
                                    if (data.success) {
                                        Ext.MessageBox.hide();
                                    }
                            },
                            failure: function () {
                                Ext.MessageBox.alert(_("ID_ERROR"), _("ID_IMPORTING_ERROR"));
                            }
                        });
                    } else {
                         dashboardSetLayout(dashletsColumns);
                    }
                }
      }
    }]
  });

  var pd = Ext.getCmp('portalDashboard');
  var con = 0;
  for (var i = 0; i < dashletsInstances.length; i++) {
    for(var d = 0; d < dashletsInstances[i].length; d++) {

      var np = new Ext.ux.Portlet({
        title: dashletsInstances[i][d].DAS_TITLE,
        index: con,
        indicei: i,
        indiced: d,
        dasInsUid : dashletsInstances[i][d].DAS_INS_UID,
        html: 'Gauge Placeholder',
        listeners: {
          'resize': function(p, w, h) {
            var template = new Ext.XTemplate(dashletsInstances[p.indicei][p.indiced].DAS_XTEMPLATE).apply({
              id: p.dasInsUid,
              page: 'DashboardModule/renderDashletInstance',
              width: w - 12,
              random: Math.floor(Math.random() * 1000000)
            });
            p.update(template);
          }
        }
      });
      pd.items.items[i].add(np);

      con++;
    }
  }

  dashboardSetLayout(dashletsColumns);

});