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

      0  

    Default Answered: Adding icon in grid column's header

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    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 Forum Manager
    ________________
    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
    5,079
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    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 Forum Manager
    ________________
    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
    18
    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
    5,079
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    Answers
    11
    Vote Rating
    6
    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
    5,079
    Answers
    398
    Vote Rating
    186
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    Answers
    11
    Vote Rating
    6
    Romick is on a distinguished road

      0  

    Thumbs up Another way

    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
    18
    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!!