1. #1
    Ext JS Premium Member AndreTheDiminutive's Avatar
    Join Date
    Dec 2008
    Posts
    114
    Vote Rating
    0
    AndreTheDiminutive is on a distinguished road

      0  

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

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


    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!
    Attached Images

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Use:
    Code:
    grid.getColumnModel().setHidden(colIndex, hidden);

  3. #3
    Ext JS Premium Member AndreTheDiminutive's Avatar
    Join Date
    Dec 2008
    Posts
    114
    Vote Rating
    0
    AndreTheDiminutive is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    Use:
    Code:
    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?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Try:
    Code:
    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
    });

  5. #5
    Ext JS Premium Member AndreTheDiminutive's Avatar
    Join Date
    Dec 2008
    Posts
    114
    Vote Rating
    0
    AndreTheDiminutive is on a distinguished road

      0  

    Default


    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'.

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

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

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    Try:
    Code:
    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
    	}]
    });

  7. #7
    Ext JS Premium Member AndreTheDiminutive's Avatar
    Join Date
    Dec 2008
    Posts
    114
    Vote Rating
    0
    AndreTheDiminutive is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1