1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Answers
    11
    Romick is on a distinguished road

      0  

    Default Answered: Adding icon in grid column's header

    How can i add icon in grid an attach some action to them? For example i need to close columns.
    Something like this:
    im1.png
    One of the possible solution can be:
    in column definitions add:
    PHP Code:
    {
              
    header'<img src="image.png" onclick="someaction('col1')" /> Price',
              
    dataIndex'col1',
              
    id'col1'
              
    width30

    but when i move mouse there apear droup down for sorting and columns visible. And i can't position the image in top right corner of the cell
    Second one:
    PHP Code:
    #col1 .x-column-header-inner{
               
    background:url("image.png"no-repeat; !important;

    but in second example how can i get on which column, user click and catch that in handler?

  2. Hi i found just another way:

    PHP Code:
      Ext.create('Ext.data.Store', {
        
    storeId:'simpsonsStore',
        
    fields:['name''email''phone'],
        
    data:{'items':[
            { 
    'name''Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 
    'name''Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 
    'name''Homer'"email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 
    'name''Marge'"email":"marge@simpsons.com""phone":"555-222-1254"  }
        ]},
        
    proxy: {
            
    type'memory',
            
    reader: {
                
    type'json',
                
    root'items'
            
    }
        }
    });


    Ext.create('Ext.grid.Panel', {
        
    title'Simpsons',
        
    storeExt.data.StoreManager.lookup('simpsonsStore'),
        
    columns: [
            { 
                
    header'<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',  
                
    dataIndex'name' 
            
    },
            { 
    header'Email'dataIndex'email'flex},
            { 
    header'Phone'dataIndex'phone' }
        ],
        
    height200,
        
    width400,
        
    renderToExt.getBody()
        , 
    listeners: {
            
    afterrender: function (grid) {
                var 
    cols grid.down('gridcolumn');
                
    Ext.each(cols, function (col) {
                    var 
    icon col.getEl().select('.header-icon')
                    if (
    icon) { icon.swallowEvent('click'true) }
                    
    grid.mon(icon'click', function () {
                        
    // action for the header icon click event
                        
    console.log('header icon click fired');
                    })
                })
            }
        },

        
    listeners: {
          
    'afterrender': function() {
            
    //Get the first header td element
            
    var el Ext.fly(this.getView().headerCt.getHeaderAtIndex(1)).dom.el;//down('div');
            //Wrap the content in another div
            
    el.update('<div>' el.dom.innerHTML '</div>');
            
    //Insert the img element
            
    var insertedEl el.insertFirst({
              
    tag'img',
              
    src'https://translate.zanata.org/zanata/img/silk/help.png'//Path to your image
              
    style'width: 10px; height:10px; cursor:hand; cursor: pointer;'//float: right; 
            
    });
            
    insertedEl.on('click', function(){
              
    alert('Hellow world I love you!!!');
              
    // action for the header icon click event
              
    console.log('header icon click fired');
            });
            
    el.down('div').setStyle('text-indent''5px');
          }
        }
    }); 

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,386
    Vote Rating
    1092
    Answers
    3675
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    If you can get the grid's header (grid.down('headercontainer')) it has a headerclick event that you can utilize.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,093
    Vote Rating
    228
    Answers
    488
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    The headercontainer's headerclick event won't bubble up to the gridpanel unless that's set to bubble specifically, correct?

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,386
    Vote Rating
    1092
    Answers
    3675
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    correct
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    19
    Vote Rating
    0
    EESW is on a distinguished road

      0  

    Default

    Romick,
    Did you find a satisfactory solution? Like you, I am including the image in the header with an 'onclick'. As you said, it works, but my problem is that I'm still getting the sort behavior. I've tried extending the column sorting method, but can't determine if the user clicks on the header (and wants to sort the column) or clicks on one of my images(that calls a javascript function).

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,093
    Vote Rating
    228
    Answers
    488
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    A beforeheaderclick event would be nice. Something for evaluation to be able to return false like you can with beforeexpand and beforeitemclick events and whatnot.

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Answers
    11
    Romick is on a distinguished road

      0  

    Default

    No i didn't find a solution. I decided to remove sorting at all. So there are only icon and header text.

  9. #8
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,093
    Vote Rating
    228
    Answers
    488
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    Think I got it. Having the icon swallow the click event after it's rendered prevents the headerclick event.

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { 
                header: '<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',  
                dataIndex: 'name' 
            },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
        , listeners: {
            afterrender: function (grid) {
                var cols = grid.down('gridcolumn');
                Ext.each(cols, function (col) {
                    var icon = col.getEl().select('.header-icon')
                    if (icon) { icon.swallowEvent('click', true) }
                    grid.mon(icon, 'click', function () {
                        // action for the header icon click event
                        console.log('header icon click fired');
                    })
                })
            }
        }
    });

  10. #9
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Vote Rating
    6
    Answers
    11
    Romick is on a distinguished road

      0  

    Thumbs up Another way

    Hi i found just another way:

    PHP Code:
      Ext.create('Ext.data.Store', {
        
    storeId:'simpsonsStore',
        
    fields:['name''email''phone'],
        
    data:{'items':[
            { 
    'name''Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
            { 
    'name''Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
            { 
    'name''Homer'"email":"home@simpsons.com",  "phone":"555-222-1244"  },
            { 
    'name''Marge'"email":"marge@simpsons.com""phone":"555-222-1254"  }
        ]},
        
    proxy: {
            
    type'memory',
            
    reader: {
                
    type'json',
                
    root'items'
            
    }
        }
    });


    Ext.create('Ext.grid.Panel', {
        
    title'Simpsons',
        
    storeExt.data.StoreManager.lookup('simpsonsStore'),
        
    columns: [
            { 
                
    header'<img class="header-icon" style="vertical-align:middle;margin-bottom:4px;" src="https://translate.zanata.org/zanata/img/silk/help.png"/> Name',  
                
    dataIndex'name' 
            
    },
            { 
    header'Email'dataIndex'email'flex},
            { 
    header'Phone'dataIndex'phone' }
        ],
        
    height200,
        
    width400,
        
    renderToExt.getBody()
        , 
    listeners: {
            
    afterrender: function (grid) {
                var 
    cols grid.down('gridcolumn');
                
    Ext.each(cols, function (col) {
                    var 
    icon col.getEl().select('.header-icon')
                    if (
    icon) { icon.swallowEvent('click'true) }
                    
    grid.mon(icon'click', function () {
                        
    // action for the header icon click event
                        
    console.log('header icon click fired');
                    })
                })
            }
        },

        
    listeners: {
          
    'afterrender': function() {
            
    //Get the first header td element
            
    var el Ext.fly(this.getView().headerCt.getHeaderAtIndex(1)).dom.el;//down('div');
            //Wrap the content in another div
            
    el.update('<div>' el.dom.innerHTML '</div>');
            
    //Insert the img element
            
    var insertedEl el.insertFirst({
              
    tag'img',
              
    src'https://translate.zanata.org/zanata/img/silk/help.png'//Path to your image
              
    style'width: 10px; height:10px; cursor:hand; cursor: pointer;'//float: right; 
            
    });
            
    insertedEl.on('click', function(){
              
    alert('Hellow world I love you!!!');
              
    // action for the header icon click event
              
    console.log('header icon click fired');
            });
            
    el.down('div').setStyle('text-indent''5px');
          }
        }
    }); 

  11. #10
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    19
    Vote Rating
    0
    EESW is on a distinguished road

      0  

    Default

    Slemmon and Romick,

    Swallowing the click event worked perfectly! Thank you so much for your help!!