How to display array data, when each item display contain image, and split button

[sujeetkr]

Hi,
I have a model containing fields: id, name, description, icon. The display of this model will contain an image, some description( text field), and split button for actions associated with this model.

Now the store contains arrays of such model objects. How can I display this data ?

If I use gridPanel, then its column will not contain split button or image [ the view of each item should contain image, some description and split button].

If I use template for columns, then I am unable to embed extjs split in the template.

I tried to iterate over store data and create panel for each data item, but for that I am unable to update the panel value.

Bye,
Sujeet

[vietits]

Have a look at my Its.grid.column.Component (http://www.sencha.com/forum/showthread.php?174504-Its.grid.column.Component-Component-Column-for-Ext-4.0.7). It allows you to embed Ext components in grid cells. Below is an example that use this component to display each row with what you required.


Ext.require([
'Ext.grid.*',
'Its.grid.column.Component'
]);


Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields:['id', 'name', 'text', 'icon'],
data:[
{id: 1, name: 'item 1', text: 'text 1', icon: 'image/icon1.jpg'},
{id: 2, name: 'item 2', text: 'text 2', icon: 'image/icon2.jpg'},
]
});

Ext.create('Ext.grid.Panel', {
title: 'Component Column Demo',
store: store,
width: 900,
height: 950,
renderTo: Ext.getBody(),
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
},{
text: 'Description',
flex: 1,
dataIndex: 'text'
},{ // icon
xtype: 'itscomponentcolumn',
text : 'Icon',
width: 200,
dataIndex: 'icon',
items: function(value) {
return {
xtype: 'image',
src: value
}
}
},{ // split button
xtype: 'itscomponentcolumn',
text : 'Split button',
width: 160,
dataIndex: 'id',
items: function(value) {
return {
xtype: 'splitbutton',
text: 'Options',
menu: {
xtype: 'menu',
items: [
{text: 'Item 1', handler: function(){ alert("Item 1 clicked"); }},
{text: 'Item 2', handler: function(){ alert("Item 2 clicked"); }}
]
}
};
}
}]
});
});