Results 1 to 4 of 4

Thread: Adding separate menu items for each heder colum menu in a grid

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    130
    Answers
    4

    Default Adding separate menu items for each heder colum menu in a grid

    I have managed to add a menu item to a grid column header but it is same for all. It was supposed to be separate items for each column. This is under the store:

    PHP Code:
            listeners: {
                
    metachange: function(store,meta){
                    if ( !
    this.meta )
                    {
                        
    this.meta meta;
                        
    //console.log(meta.pageSize);
                        // store.pageSize = meta.pageSize;
                        
    grid.reconfigure(store,meta.columns);
                        var 
    menu grid.headerCt.getMenu();
                        var 
    testtest grid.headerCt.getMenuItems();
                        
    console.log(testtest[3].menu);
                        
    console.log(testtest);
                        
    console.log(testtest[3].menu[0]);
                        
                        
                        
    menu.add([{
                        
    text'Rename the column',
                        
    menu: {
                            
    items:
                                [{
                                    
    xtype'textfield',
                                    
    enableKeyEventstrue,
                                    
    allowBlankfalse,
                                    
    listeners: {
                                        
    keyup: function(btn){
                                            
    //console.log(btn);
                                            
    var grid btn.up('grid');
                                            var 
    columnDataIndex menu.activeHeader.dataIndex;
                                            
    col grid.down('#'+columnDataIndex);
                                            
    //console.log(grid, col);
                                            //console.log(col.getHeaderMenu());
                                            
    var newColumnNamethis.getRawValue();
                                            
    col.setText(newColumnName);
                                        }
                                    }
                                }]
                            }
                        }]);  
                
                
                    }
                }
            } 
    So I need to add the menu item for each column separately but how?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Have you stepped through your code to see if the menu data is changing as expected?

    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    130
    Answers
    4

    Default

    I was unable to add separate items, instead I have found a workaround.

    I have added "show" listener on the menu, and when it fires it re-reads and re-writes the appropriate textfield in the menu and grid column header.

    PHP Code:

                        menu
    .add([{
                        
    text'Stnu Adland?r',
                        
    disabled: (Asistan.System.LoginInfo.kategori === 'ADMIN')?false:true,
                            
    menu: {
                                
    listeners: {
                                    
    show: function(btn){
                                        var 
    grid btn.up('grid');
                                        var 
    columnDataIndex menu.activeHeader.dataIndex;
                                        
    col grid.down('#'+columnDataIndex);
                                        
    Ext.getCmp('adlandirici').setValue(col.text);
                                    }
                                },
                                
    items:
                                    [{
                                        
    xtype'textfield',
                                        
    enableKeyEventstrue,
                                        
    id'adlandirici',
                                        
    allowBlankfalse,
                                        
    listeners: {
                                            
    keyup: function(btn){
                                                
    //console.log(btn);
                                                
    var grid btn.up('grid');
                                                var 
    columnDataIndex menu.activeHeader.dataIndex;
                                                
    col grid.down('#'+columnDataIndex);
                                                
    //console.log(grid, col);
                                                //console.log(col.getHeaderMenu());
                                                
    var yeniSutunAdi this.getRawValue();
                                                
    col.setText(yeniSutunAdi);
                                            }
                                        }
                                    }]
                            }
                            
    /* handler: function() {
                                var columnDataIndex = menu.activeHeader.dataIndex;
                                alert('custom item for column "'+columnDataIndex+'" was pressed');


                                var grid = btn.up('grid'),
                                col = grid.down('#column1');
                                console.log(grid, col);
                                console.log(col.getHeaderMenu());
                                col.setText('Renamed');
                            } */
                        
    },{
                            
    text'Sat?r Say?s?',
                            
    disabled: (Asistan.System.LoginInfo.kategori === 'ADMIN')?false:true,
                            
    menu: {
                                
    items: [{
                                    
    xtype'numberfield',
                                    
    name'satirSayisi',
                                    
    id'SatirSayisi',
                                    
    valuepageSize,
                                    
    allowBlankfalse,
                                    
    allowDecimalsfalse,
                                    
    minValue1,
                                    
    maxValue10000,
                                    
    listeners: {
                                        
    change: function(){window.pageSize this.getRawValue(); console.log(pageSize);}
                                    }
                                }]
                            }
                        }]); 

  4. #4
    Sencha Premium Member joshua.ball@osi.com's Avatar
    Join Date
    Nov 2012
    Location
    Sacramento, CA
    Posts
    43
    Answers
    1

    Default Alternative Solution

    Wanted to add an alternative solution in case this doesn't work for some. Since the menu is common to all grid columns, you'll need to add all menu items that you'll need into the menu and then show/hide them based on the activeHeader property of the menu. This will allow certain menu items to display based on the column that triggered then menu to be displayed.

    Code:
    var mainMenu = view.headerCt.getMenu();
            mainMenu.on({
                beforeshow: function(menu){
                    // If the Severity column triggered the menu, show Severity-specific menu items
                    if (menu.activeHeader.dataIndex == 'severity'){
                        for (var i=0; i<menu.items.items.length; i++){
                            if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
                                menu.items.items[i].show();
                            }
                        }
                    // If any other column, hide Severity-specific menu items
                    } else {
                        for (var i=0; i<menu.items.items.length; i++){
                            if (menu.items.items[i].itemId == 'severityIndicatorMenuItem'){
                                menu.items.items[i].hide();
                            }
                        }
                    }
                }
            });
            
            // Add custom menu items to the default grid menu
            mainMenu.insert(mainMenu.items.length-2, [{
                itemId: 'toggleSortMenuItem',
                text: 'Toggle Sort',
                handler: function() {
                    mainMenu.activeHeader.sortable = (mainMenu.activeHeader.sortable) ? false : true;
                }
            },{
                itemId: 'severityIndicatorMenuItem',
                text: 'Severity Indicator',
                handler: function() {
                    // JB - Start here...
                }
            }]);

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •