[2.2] Problems disabling grid columns menus

[KRavEN]

Well, I needed to do a small edit to mystix code because of a 'this.grid has no properties' error and it does what I want it to do now.
Only setting enableHdMenu: false turns off the header button for the context menu completly. I think this is proper even with concern for grouping and other plugins as enableHdMenu: false currently takes care of enableColumnHide: false too. This doesn't require the GridView's headersDisabled config. columnMove and columnResize still work fine.
The main confusion my users were having was the header button was there and did nothing but throw a javascript error.

Ext.override(Ext.grid.GridPanel, {
  initComponent : Ext.grid.GridPanel.prototype.initComponent.createSequence(function()
  {
    if (this.colModel)
    {
      this.colModel.grid = this;
    }
  })
});

Ext.override(Ext.grid.ColumnModel, {
  isMenuDisabled : function(col)
  {
    return ('undefined' != typeof this.grid) ? !this.grid.enableHdMenu : true || !!this.config[col].menuDisabled;
  }
});

[mjlecomte]

Set headersDisabled:false if you want to disable the menus for all columns or set menuDisabled:false for separate columns.

Is it me, or is the opposite actually true?

[mystix]

and the best part is -- i don't even remember this post.

anyways, +1 for this being fixed since i just encountered one thread in the help forum today where someone was trying to easily disable click-sorting on columns.

[KRavEN]

Here is an override for GridView so that if viewConfig{ headersDisabled: true} then drag and drop, resize, and the menu are disabled but you will still get a mouseover effect for sortable columns.

With grids enableHdMenu set to false you will still have drag and drop and resize but no menu and still get mouseover effect for sortable columns.

This should be used instead of the overide's for gridpanel and columnmodel above.

  handleHdOver : function(e, t) {
    var hd = this.findHeaderCell(t);
    if (hd) {
      this.activeHd = hd;
      this.activeHdIndex = this.getCellIndex(hd);
      var fly = this.fly(hd);
      this.activeHdRegion = fly.getRegion();
      if (!this.cm.isMenuDisabled(this.activeHdIndex) && this.cm.isSortable(this.activeHdIndex)) {
        fly.addClass("x-grid3-hd-over");
        if (!this.headersDisabled) {
          this.activeHdBtn = fly.child('.x-grid3-hd-btn');
          if (this.activeHdBtn) {
            this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight - 1) + 'px';
          }
        }
      }
    }
  }

[carstep]

Hi there,

that's all in ExtJS 2.2 and 2.0.2

I came across building a sample application with Ext and Adobe Air and it throws an error in the getCellIndex(hd) function while hovering over a grid's header element. I could debug it till that if the element is a header element it's within a div which doesn't have the colRe regexp defined class pattern (x-grid3-td- it should be x-grid3-hd-).

See (Case 2.0.2 )

getCellIndex : function(el){
if(el){
            var m = el.className.match(this.colRe);
            if(m && m[1]){
                return this.cm.getIndexById(m[1]);
            }
        }
        return false;

I've to correct myself after testing it in firefox(FF) as well. With firebug and AIR's introspector console I could figure out that while in FF the el.className includes x-grid3-td-0 so the AIR has only the x-grid3-td- as it's className attribute. Strange anyway

partial Solution: As I didn't wanted to change the core I changed the ext-all-debug.js file regarding renderHeaders:

renderHeaders : function(){
        var cm = this.cm, ts = this.templates;
        var ct = ts.hcell;

        var cb = [], sb = [], p = {};

        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            p.id = cm.getColumnId(i) + "";
            p.value = cm.getColumnHeader(i) || "";
            p.style = this.getColumnStyle(i, true);
            p.tooltip = this.getColumnTooltip(i);
            if(cm.config[i].align == 'right'){
                p.istyle = 'padding-right:16px';
            } else {
                delete p.istyle;
            }
            cb[cb.length] = ct.apply(p);
        }
        return ts.header.apply({cells: cb.join(""), tstyle:'width:'+this.getTotalWidth()+';'});

I changed p.id .. row forcing to convert the id to a string because webkit has problems with is in Template.js file

r. Sandor

[carstep]

Hi,

I found another issue regarding header hovering. If it's the first header element and moving to the edge from left, probably outside of the grid, it checks if it's re-sizable but as it check for 'this.activeHdIndex -1' on 0 it will fail. My solution is as follow:

handleHdMove : function(e, t){
        if(this.activeHd && !this.headersDisabled){
            var hw = this.splitHandleWidth || 5;
            var r = this.activeHdRegion;
            var x = e.getPageX();
            var ss = this.activeHd.style;
            if(( this.activeHdIndex > 0 ) && x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1)){
                ss.cursor = Ext.isAir ? 'move' : Ext.isSafari ? 'e-resize' : 'col-resize';
            }else if(r.right - x <= (!this.activeHdBtn ? hw : 2) && this.cm.isResizable(this.activeHdIndex)){
                ss.cursor = Ext.isAir ? 'move' : Ext.isSafari ? 'w-resize' : 'col-resize';
            }else{
                ss.cursor = '';
            }
        }

where this

if( x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1))

has been replaced with

 if(( this.activeHdIndex > 0 ) && x - r.left <= hw && this.cm.isResizable(this.activeHdIndex-1))

both in 2.0.2 and 2.2.x

r. Sandor

[imnilesh]

Hi,

Currently facing problem in IE for column header menu drop down button.
In IE, when I row over any column header, the menu button appears at the last column.

 
    handleHdOver : function(e, t){
        var hd = this.findHeaderCell(t);
        if(hd && !this.headersDisabled){
            this.activeHdRef = t;
            this.activeHdIndex = this.getCellIndex(hd);
            var fly = this.fly(hd);
            this.activeHdRegion = fly.getRegion();
            if(!this.cm.isMenuDisabled(this.activeHdIndex)){
                fly.addClass('x-grid3-hd-over');
                this.activeHdBtn = fly.child('.x-grid3-hd-btn');
                if(this.activeHdBtn){
                    this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';
                }
            }
        }
    }

It works fine in Mozilla FF.
Verified that (this.activeHdBtn.id) is getting generated correctly.

Also could not figure it out how Ext manages to display the menu button using the line:

    this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';

Did anyone came across such behavior?
Thanks.

[kapil gupta]

hi , I am getting this error in this.activeHdBtn.dom.style.height, when i moved mouse on grid panel header.I don't want to disable header, don't want to re sizable =false and don't want to stop drag and drop column on my grid. may be problem with (hd.firstChild.offsetHeight) . its value is 0 so -1px is being assign to activeHdBtnHeight.

this.activeHdBtn.dom.style.height=(hd.firstChild.offsetHeight-1)+'px';

OK, thanks for that.

For the time being, I guess I'll have to resort to add this line to my code:

MyColModel.isMenuDisabled = function() { return true; }

splintor

[kapil gupta]

and hd is getting by this var hd=this.findHeaderCell(t). so how i set the height of the firstchild set to 1.I am stuch in this very badly. is there any solution thanks

hd.firstChild.offsetHeight-1

this.activeHdBtn.dom.style.height = (hd.firstChild.offsetHeight-1)+'px';