Threaded 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');
          }
        }
    });