Vi Veri Veniversum Vivus Vici
We need to implement overflowHandler for toolbar layout, which will add second toolbar and wraps components from first toolbar to second when them cannot be displayed because there isn't enough width of toolbar's container.
First, we need to override Ext.panel.Panel:
  1. Ext4.override(Ext4.panel.Panel, {
  2.     bridgeToolbars : function () {
  3.         var toolbar;
  4.         this.callParent(arguments);
  5.         if (this.tbar2) {
  6.             if (Ext4.isArray(this.tbar2)) {
  7.                 toolbar = {
  8.                     xtype : 'toolbar',
  9.                     items : this.tbar2
  10.                 };
  11.             }
  12.             else if (!toolbar.xtype) {
  13.                 toolbar.xtype = 'toolbar';
  14.             }
  15.             toolbar.dock = 'top';
  16.             toolbar.isTbar2 = true;
  17.             this.dockedItems = this.dockedItems.concat(toolbar);
  18.             this.tbar2 = null;
  19.         }
  20.     },
  21.     onRender       : function () {
  22.         this.callParent(arguments);
  23.         var topBars = this.getDockedItems('toolbar[dock="top"]'),
  24.             i,
  25.             len;
  26.         for (i = 0, len = topBars.length; i < len; i++) {
  27.             if (topBars[i].isTbar2) {
  28.                 this.tbar2 = topBars[i];
  29.                 break;
  30.             }
  31.         }
  32.     },
  33.     /**
  34.      * Creates, if not exists, and returns toolbar at passed position
  35.      * @param {Ext.panel.Panel} panel
  36.      * @param {String} position
  37.      * @return {Ext.toolbar.Toolbar}
  38.      */
  39.     getDynamicTBar : function (position) {
  40.         var panel = this,
  41.             params,
  42.             tb;
  43.         position = position || 'top';
  44.         if (position === 'tbar2') {
  45.             tb = panel.tbar2;
  46.             params = {
  47.                 dock    : 'top',
  48.                 isTbar2 : true,
  49.                 layout  : {
  50.                     overflowHandler : 'Scroller'
  51.                 }
  52.             };
  53.         }
  54.         else {
  55.             tb = panel.getDockedItems('toolbar[dock="' + position + '"]');
  56.             params = {dock : position};
  57.             if (tb.length > 0) {
  58.                 tb = tb[0];
  59.             }
  60.         }
  61.         if (!tb) {
  62.             tb = Ext4.create('Ext4.toolbar.Toolbar', params);
  63.             panel.addDocked(tb);
  64.             if (position === 'tbar2') {
  65.                 panel.tbar2 = tb;
  66.             }
  67.         }
  68.         return tb;
  69.     }
  70. });


@темы: ExtJS 4, JavaScript