1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    Cinnean is on a distinguished road

      0  

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

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


    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):
    Code:
    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):
    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

  2. #2
    Ext User
    Join Date
    Apr 2007
    Posts
    36
    Vote Rating
    0
    Pagebaker is on a distinguished road

      0  

    Default


    It's a bad practice to edit the Ext source directly, you should extend the standard Ext classes to fir your own needs
    Code:
    Ext.ux.CustomPanel = Ext.extend(Ext.Panel, {
    your mods
    });

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    Cinnean is on a distinguished road

      0  

    Question


    Quote Originally Posted by Pagebaker View Post
    It's a bad practice to edit the Ext source directly, you should extend the standard Ext classes to fir your own needs
    Code:
    Ext.ux.CustomPanel = Ext.extend(Ext.Panel, {
    your mods
    });
    Hmm, ok. More like this?
    Code:
    /* 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));
                }
              }
          }
        }
      });

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    mravagna is on a distinguished road

      0  

    Default Working sample?

    Working sample?


    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.

Thread Participants: 2