PDA

View Full Version : Extended ActionColumn does not show icons



JSassy
8 Mar 2018, 1:42 AM
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?



Ext.define('MyActionColumn', {
extend: 'Ext.grid.column.Action',
alias: 'widget.myactioncolumn',

initComponent: function() {
this.items = [{
xtype: 'button',
iconCls: 'icon-goto-small'
}]

this.callParent(arguments);
}
});





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:


Ext.define('Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel',
columns: [{
xtype: 'actioncolumn',
items: [{
xtype: 'button',
iconCls: 'icon-goto-small'
}]
}]
....
})


Thanks

twaindev
8 Mar 2018, 2:21 PM
What am I doing wrong?

Columns and Items are not the same. Have a close look at the documentation for each.

JSassy
9 Mar 2018, 9:03 AM
As columns I used actioncolumn and myactioncolumn. Both are columns. And both have items in which I configured the button.

I didnt mix it.

twaindev
9 Mar 2018, 3:20 PM
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 (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-columns) is an array of sub-column definitions. I (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-items)tems (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-items) is an array of icon definitions.

JSassy
22 Mar 2018, 2:27 AM
Yes, you did.

In MyActionColumn you set items. In the other two you set columns. Items and columns are not the same thing. Columns (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-columns) is an array of sub-column definitions. I (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-items)tems (https://docs.sencha.com/extjs/4.2.6/#!/api/Ext.grid.column.Action-cfg-items) is an array of icon definitions.


Sorry, but I do not understand the Mistake.


columns: [{xtype: 'myactioncolumn'}]



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?

vick_44
26 Apr 2018, 2:33 AM
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/#!/api/Ext.grid.Panel




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.



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":"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: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{
xtype: 'myactioncolumn'
}
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

JSassy
26 Apr 2018, 4:27 AM
Thank you very much, this is working!