Results 1 to 7 of 7

Thread: Extended ActionColumn does not show icons

  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    25

    Default Extended ActionColumn does not show icons

    Hello, I have created a new class via extending the ActionColumn.
    But the icons are not shown in the grid.

    What am I doing wrong?

    PHP Code:
    Ext.define('MyActionColumn', {
       
    extend'Ext.grid.column.Action',
        
    alias'widget.myactioncolumn',
       
        
    initComponent: function() { 
            
    this.items = [{
                
    xtype'button'
                
    iconCls'icon-goto-small'
           
    }]

           
    this.callParent(arguments);  
           }
    }); 
    PHP Code:
    Ext.define('Grid', {
        
    extend'Ext.grid.Panel',
        
    alias'widget.mygridpanel',   
        
    columns: [{xtype'myactioncolumn'}]
        ....
    }) 

    When I add the items directly to a actioncolumn, it does work:
    PHP Code:
    Ext.define('Grid', {
        
    extend'Ext.grid.Panel',
        
    alias'widget.mygridpanel',   
        
    columns: [{
             
    xtype'actioncolumn'
             
    items:  [{
                
    xtype'button',   
                
    iconCls'icon-goto-small'   
             
    }]
        }]
        ....
    }) 
    Thanks

  2. #2
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

    Quote Originally Posted by JSassy View Post
    What am I doing wrong?
    Columns and Items are not the same. Have a close look at the documentation for each.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    25

    Default

    As columns I used actioncolumn and myactioncolumn. Both are columns. And both have items in which I configured the button.

    I didnt mix it.

  4. #4
    Sencha Premium User twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    242
    Answers
    16

    Default

    Quote Originally Posted by JSassy View Post
    I didnt mix it.
    Yes, you did.

    In MyActionColumn you set items. In the other two you set columns. Items and columns are not the same thing. Columns is an array of sub-column definitions. Items is an array of icon definitions.

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    25

    Default

    Quote Originally Posted by twaindev View Post
    Yes, you did.

    In MyActionColumn you set items. In the other two you set columns. Items and columns are not the same thing. Columns is an array of sub-column definitions. Items is an array of icon definitions.

    Sorry, but I do not understand the Mistake.
    PHP Code:
      columns: [{xtype'myactioncolumn'}] 
    PHP Code:
       columns: [{ xtype'actioncolumn'
             
    items:  [{
                
    xtype'button',   
                
    iconCls'icon-goto-small'   
             
    }]
        }] 
    I set items in both. "myactioncolumn" has the items IN the class and the second one has items inline.

    Whats the difference?

  6. #6
    Sencha User vick_44's Avatar
    Join Date
    Jul 2016
    Posts
    64
    Answers
    6

    Default

    Here you go. {{ replace icon with your cls in your final code }}

    tested this by pasting below code in : http://docs.sencha.com/extjs/4.2.2/#...Ext.grid.Panel


    Code:
    Ext.define('MyActionColumn', {
       extend: 'Ext.grid.column.Action',
        alias: 'widget.myactioncolumn',
       
       
       
        constructor: function(config) {
            var items = [{xtype:'button',
                          icon : 'http://examples.sencha.com/extjs/6.5.3/examples/classic/restful/images/delete.png'}]
            config.items = items;
             this.callParent(arguments);//Calling the parent class constructor   
            this.initConfig(config); 
            return this;  
        }
       
    });

    Complete executable below: copy to the same docs location mentioned earlier and click live preview.

    Code:
    Ext.define('MyActionColumn', {
       extend: 'Ext.grid.column.Action',
        alias: 'widget.myactioncolumn',
       
       
       
        constructor: function(config) {
            var items = [{xtype:'button',
                          icon : 'http://examples.sencha.com/extjs/6.5.3/examples/classic/restful/images/delete.png'}]
            config.items = items;
             this.callParent(arguments);//Calling the parent class constructor   
            this.initConfig(config); 
            return this;  
        }
       
    }); 
    
    
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
            { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
            { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
            { 'name': 'Marge', "email":"[email protected]", "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: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' },
            { 
             xtype: 'myactioncolumn'
            }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });

  7. #7
    Sencha User
    Join Date
    Feb 2011
    Posts
    25

    Default

    Thank you very much, this is working!

Similar Threads

  1. Spacing between icons in actioncolumn
    By serverfreak1982 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 29 Jan 2015, 10:05 PM
  2. Replies: 4
    Last Post: 27 Feb 2013, 7:22 AM
  3. [FIXED] [4.1.1] Extended actioncolumn has no items
    By martins256 in forum Ext:Bugs
    Replies: 1
    Last Post: 18 Feb 2013, 9:22 AM
  4. actioncolumn to use text instead of icons
    By andersonv1 in forum Ext: Q&A
    Replies: 1
    Last Post: 30 Aug 2012, 5:04 AM
  5. actioncolumn, icons without html id
    By joaquingt in forum Ext: Q&A
    Replies: 2
    Last Post: 26 Jun 2012, 6:19 AM

Posting Permissions

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