How to invoke show/hide checkbox control from button versus header

[AndreTheDiminutive]

Hi, for the Ext 2.2 grid, I'm trying to invoke the show/hide columns checkbox control from a button instead of within the header (please see screen shot).

Access to this control can be toggled on/off with enableHdMenu.

Where is this code located and what parameters do I need to pass to it? I understand that it manipulates the ColumnModel but don't want to reinvent the wheel since this already does exactly what I need it to...just need to invoke it from a different place.

Thanks!

[Condor]

Use:

grid.getColumnModel().setHidden(colIndex, hidden);

[AndreTheDiminutive]

Use:

grid.getColumnModel().setHidden(colIndex, hidden);

Thanks, Condor.

I've got that part figured out.

I was hoping to re-use the pop-up with the column names & check boxes.

...do you know where this code lives?

[Condor]

Try:

var view = grid.getView();
view.colMenu = new Ext.menu.Menu({
	listeners: {
		beforeshow: view.beforeColMenuShow,
		itemclick: view.handleHdMenuClick,
		scope: view;
	}
});
var button = new Button({
	text: 'Columns',
	menu: view.colMenu
});

[AndreTheDiminutive]

My lack of javascript knowledge is killing me, sorry!

I was actually hoping to invoke this from a button in the grid (see second code snippet).

Pasting your code into the bottom of my file gives me an error 'Button is not defined'.

 
var grid4 = new xg.GridPanel({
 //       id:'button-grid',
          store: ds,
          colModel: getColumnModel(),
          autoExpandColumn: 'history',
          viewConfig: {
          forceFit:true
          },
        // inline buttons
 //       buttons: [{text:'Save'},{text:'Cancel'}],
//        buttonAlign:'center',
        // inline toolbars
          tbar:[{
            text:'Add/Remove Columns',
            tooltip:'Add or or remove columns from this view',
            iconCls:'add'
 //           menu: view.colMenu
        }
    ],
        width:1000,
        height:300,
        frame:true,
        stripeRows:true,
        collapsible:true,
        enableHdMenu:false,
        title:'Controller Information',
        renderTo: document.body
    });
    var view = grid4.getView();
    view.colMenu = new Ext.menu.Menu({
 listeners: {
    beforeshow: view.beforeColMenuShow,
    itemclick: view.handleHdMenuClick,
    scope: view
    }
});
 var buttoni = new Button({
   text: 'Columns',
   menu: view.colMenu
});
});

Putting the getView() code inside the grid creation gives me an 'invalid property id' error for 'var view = grid4.getView();

var grid4 = new xg.GridPanel({
 //       id:'button-grid',
        store: ds,
        colModel: getColumnModel(),
        autoExpandColumn: 'history',
        viewConfig: {
            forceFit:true
        },
         var view = grid4.getView();
         view.colMenu = new Ext.menu.Menu({
     listeners: {
  beforeshow: view.beforeColMenuShow,
  itemclick: view.handleHdMenuClick,
  scope: view
 }
});
        // inline buttons
 //       buttons: [{text:'Save'},{text:'Cancel'}],
//        buttonAlign:'center',
        // inline toolbars
        tbar:[{
            text:'Add/Remove Columns',
            tooltip:'Add or or remove columns from this view',
            iconCls:'add'
            menu: view.colMenu
//           iconCls:'remove'
        }
    ],
        width:1000,
        height:300,
        frame:true,
        stripeRows:true,
        collapsible:true,
        enableHdMenu:false,
        title:'Controller Information',
   //     iconCls:'icon-grid',
        renderTo: document.body
    });

[Condor]

Yes, you really need to learn more about javascript...

Try:

var view = new Ext.grid.GridView({
	forceFit: true
});
view.colMenu = new Ext.menu.Menu({
	listeners: {
		beforeshow: view.beforeColMenuShow,
		itemclick: view.handleHdMenuClick,
		scope: view
	}
});
var grid = new Ext.grid.GridPanel({
	...
	enableColumnHide: false,
	view: view,
	tbar: [{
		text:'Add/Remove Columns',
		menu: view.colMenu
	}]
});

[AndreTheDiminutive]

Thanks once again Condor!

It is perfect.

My brute force approach (12-18 hr days, 7 days/wk) will doubtless aid in getting me up to speed with javascript & Ext...having the support of the Ext community (which rocks!) will get me there faster.