Ext 2.0: More than one row of buttons in Ext.Panel and Ext.Window

[Cinnean]

Hi,

as I'm developing a new version of my online-database, I got the problem having too many buttons in the login window. Not finding an satisfactory solution in the docs/board, I modified the panel object to fit my need of splitting the buttons in two or more rows (Sorry, labels are in German ):


So, if someone needs something similiar, here are the modifications I did (added code in red, [...]=code ommission for readability):

source/widgets/Panel.js (not directly used, but for understanding, what was changed):

Ext.Panel = Ext.extend(Ext.Container, {
[...]
    minButtonWidth:75,
    /**
     * @cfg {Number} maxButtonRows
     * Maximum number of buttons per row, 0 indicating unlimited number. (defaults to 0)
     */
    maxButtonRows: 0,
    /**
     * @cfg {String} elements
[...]
    // private
    onRender : function(ct, position){
[...]
        if(this.tools){
            var ts = this.tools;
            this.tools = {};
            this.addTool.apply(this, ts);
        }else{
            this.tools = {};
        }
        if(this.buttons && this.buttons.length > 0){
          /* applying maxButtonRows: more than one row of buttons */
          if (this.maxButtonRows>0 && this.buttons.length > this.maxButtonRows) {
            for(var j = 0, len = this.buttons.length, mrows =  this.maxButtonRows; j < len; ) {
              var tb = this.footer.createChild({cls:'x-panel-btns-ct', cn: {
                cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,
                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
              }}, null, true);
              var tr = tb.getElementsByTagName('tr')[0];
              for(var i = 0; i < mrows && j < len; i++, j++) {
                var b = this.buttons[j];
                var td = document.createElement('td');
                td.className = 'x-panel-btn-td';
                b.render(tr.appendChild(td));
              }
            }
          } else {
            // tables are required to maintain order and for correct IE layout
            var tb = this.footer.createChild({cls:'x-panel-btns-ct', cn: {
                cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,
                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
            }}, null, true);
            var tr = tb.getElementsByTagName('tr')[0];
            for(var i = 0, len = this.buttons.length; i < len; i++) {
                var b = this.buttons[i];
                var td = document.createElement('td');
                td.className = 'x-panel-btn-td';
                b.render(tr.appendChild(td));
            }
          }
        }

        if(this.tbar && this.topToolbar){
            if(this.topToolbar instanceof Array){
                this.topToolbar = new Ext.Toolbar(this.topToolbar);
            }
            this.topToolbar.render(this.tbar);
        }
        if(this.bbar && this.bottomToolbar){
            if(this.bottomToolbar instanceof Array){
                this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
            }
            this.bottomToolbar.render(this.bbar);
        }
    },
[...]

ext-all.js (spaces added only for recognizability of added code):

Row 76:Ext.Panel=Ext.extend(Ext.Container,{  [...]  collapseFirst:true,minButtonWidth:75,  maxButtonRows:0,  elements:"body",  [...]  if(this.buttons&&this.buttons.length>0){  if(this.maxButtonRows>0&&this.buttons.length>this.maxButtonRows){for(var JJ=0,LL=this.buttons.length,GG=this.maxButtonRows;JJ<LL;){var D=this.footer.createChild({cls:"x-panel-btns-ct",cn:{cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,html:"<table cellspacing=\"0\"><tbody><tr></tr></tbody></table><div class=\"x-clear\"></div>"}},null,true);var L=D.getElementsByTagName("tr")[0];for(var F=0;F<GG&&JJ<LL;F++,JJ++){var N=this.buttons[JJ];var C=document.createElement("td");C.className="x-panel-btn-td";N.render(L.appendChild(C))}}}else{  var D=this.footer.createChild({cls:"x-panel-btns-ct",cn:{cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,html:"<table cellspacing=\"0\"><tbody><tr></tr></tbody></table><div class=\"x-clear\"></div>"}},null,true);var L=D.getElementsByTagName("tr")[0];for(var F=0,I=this.buttons.length;F<I;F++){var N=this.buttons[F];var C=document.createElement("td");C.className="x-panel-btn-td";N.render(L.appendChild(C))}  }  }  [...]

Greets,
David

[Pagebaker]

It's a bad practice to edit the Ext source directly, you should extend the standard Ext classes to fir your own needs

Ext.ux.CustomPanel = Ext.extend(Ext.Panel, {
your mods
});

[Cinnean]

It's a bad practice to edit the Ext source directly, you should extend the standard Ext classes to fir your own needs

Ext.ux.CustomPanel = Ext.extend(Ext.Panel, {
your mods
});

Hmm, ok. More like this?

/* MultiRowButton-Window-Class: */
  Ext.ux.MRBWindow = Ext.extend(Ext.Window, {
    /* Maximum number of buttons per row, 0 indicating unlimited number. (defaults to 0) */
    maxButtonRows: 0,

    /* Need to modify rendering */
    onRender : function(ct, position){
      /* if there are more buttons than maxButtonRows allows, slice them before superclass is rendering */
      var tempButtonArray = [];
      if (this.buttons && this.maxButtonRows>0 && this.buttons.length > this.maxButtonRows) {    
        tempButtonArray = this.buttons.slice(this.maxButtonRows);
        this.buttons.splice(this.maxButtonRows, tempButtonArray.length);
      }
      Ext.ux.MRBWindow.superclass.onRender.call(this, ct, position);

      /* if buttons were sliced, add the other rows */
      if (tempButtonArray.length>0) {
         /* Get button container  */
          var contEl = this.footer.down('.x-panel-btns-ct');
          var b;
          
          /* go through the button array */
          for(var mrows =  this.maxButtonRows, j = 0, len = tempButtonArray.length; j < len; ) {
            var tb = contEl.createChild({ 
                cls:"x-panel-btns x-panel-btns-"+this.buttonAlign,
                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
              }, null, true);
              
            var tr = tb.getElementsByTagName('tr')[0];
            for(var i = 0; i < mrows && j < len; i++, j++) {
              this.buttons.push(tempButtonArray.shift()); /* move button back in this.buttons */
              b = this.buttons[this.buttons.length-1];
              var td = document.createElement('td');
              td.className = 'x-panel-btn-td';
              b.render(tr.appendChild(td));
            }
          }
      }
    }
  });

[mravagna]

Hi Cinnean, this is exactly what I've been looking for!!! Do you have a working example of the final extension you provided? Thanks so much for the help.