Results 1 to 10 of 11

Thread: Adding icon in grid column's header

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Ukraine
    Posts
    154
    Answers
    11
    Vote Rating
    8
      1  

    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
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    If you can get the grid's header (grid.down('headercontainer')) it has a headerclick event that you can utilize.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
    39,556
    Answers
    3932
    Vote Rating
    1272
      0  

    Default

    correct
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    19
    Vote Rating
    0
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
      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!");
                 });
             }
         });
      }

Posting Permissions

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