Hybrid View

  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,347
    Answers
    3542
    Vote Rating
    846
    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,467
    Answers
    441
    Vote Rating
    202
    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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,467
    Answers
    441
    Vote Rating
    202
    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
    Aug 2012
    Posts
    91
    Answers
    6
    Vote Rating
    0
    alex9311 is on a distinguished road

      0  

    Default


    here is what I had to do to make it work for ext5:

    Code:
    afterrender: function(grid) {
         var icons = Ext.dom.Element.select('.header-icon').elements;
         Ext.each(icons, function (icon) {
             if(icon){
                 Ext.get(icon).swallowEvent('click', true);
                 Ext.get(icon).addListener('click',function(icon){
                     console.log("header clicked!");
                 });
             }
         });
      }