1. #1
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    NORWAY
    Posts
    106
    Vote Rating
    0
    frankbolviken is an unknown quantity at this point

      0  

    Default Unanswered: Custom column header menu

    Unanswered: Custom column header menu


    Hi,

    Is there any possibilty of adding a custom menu for the column header?
    custom_menu.jpg

    Frank

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,509
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Yes. Take a look at the code for Ext.grid.feature.Grouping.

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    NORWAY
    Posts
    106
    Vote Rating
    0
    frankbolviken is an unknown quantity at this point

      0  

    Default


    hmm

    Could you please ellaborate? Perhaps provide a little example.. can't say I fully understand how to do this.

    Frank
    Thanks for your reply

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,509
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Ext.grid.feature.Grouping modifies the column menu to add in some new entries. It is an example. The method injectGroupingMenu would be a sensible place to start.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    NORWAY
    Posts
    106
    Vote Rating
    0
    frankbolviken is an unknown quantity at this point

      0  

    Default


    So the basic idea is to create a feature like the grouping feature, and inject it into the menu?

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,509
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Wouldn't necessarily need to be a feature. A plugin would probably do.

    The way it's done in the Grouping feature isn't necessarily the only way to do it but it proves it can be done. Once you've studied how it does it you should hopefully have enough knowledge of the relevant code to figure out what works best for whatever it is you're trying to do.

  7. #7
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    NORWAY
    Posts
    106
    Vote Rating
    0
    frankbolviken is an unknown quantity at this point

      0  

    Default


    When I think about it I actually tried something like this some time ago, but didn't get it to work.
    I just tried to present a new dummy link in the menu with the following code, just to see if I can inject something and it would work.

    Code:
    Ext.define('app.feature.Entrytitle', {
        extend: 'Ext.grid.feature.Grouping',
        alias: 'feature.entrytitle',
        
        groupByText: 'Customfield',
        
        getMenuItems: function() {
            var me                 = this,
                groupByText        = me.groupByText,
                disabled           = me.disabled,
                showGroupsText     = me.showGroupsText,
                enableNoGroups     = me.enableNoGroups,
                groupMenuItemClick = Ext.Function.bind(me.onGroupMenuItemClick, me),
                groupToggleMenuItemClick = Ext.Function.bind(me.onGroupToggleMenuItemClick, me);
            
            // runs in the scope of headerCt
            return function() {
                var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
                o.push('-', {
                    iconCls: Ext.baseCSSPrefix + 'group-by-icon',
                    itemId: 'entryTitleItem',
                    text: groupByText,
                    handler: groupMenuItemClick
                });
                return o;
            };
        }
    });
    But I only got the following error on runtime: *Uncaught TypeError: object is not a function* when i tried to initialize it:

    Code:
    Ext.create('app.feature.Entrytitle', {
                      enableGroupingMenu: true
                  })],
    I've put the following code in the grid, to pull in the required code:
    Code:
    Ext.require([         'app.feature.Entrytitle'
    ]);
    Any idea why this isnt working? From my point of view it really should work.

  8. #8
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,509
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Stacktrace? What line does the error occur on?

  9. #9
    Ext JS Premium Member
    Join Date
    Jan 2011
    Location
    NORWAY
    Posts
    106
    Vote Rating
    0
    frankbolviken is an unknown quantity at this point

      0  

    Default


    The error occures on the Ext.create('app.feature.Entrytitle', {... which I pasted on a previous post.

    Uncaught TypeError: object is not a function
    (anonymous function)
    Ext.ClassManager.instantiateext-all-debug.js:3774
    (anonymous function)ext-all-debug.js:1508
    (anonymous function)DynamicGrid.js:23

  10. #10
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,509
    Answers
    528
    Vote Rating
    288
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Without context it's difficult to be sure but I'd guess that you're calling Ext.require() in the wrong place. Try moving this dependency into the requires section of your Ext.define() or even just put it before your call to Ext.onReady().

    For diagnostic purposes it might also be interesting to try Ext.syncRequire():

    http://docs.sencha.com/ext-js/4-0/#!...od-syncRequire

Thread Participants: 1