PDA

View Full Version : Grid Panel with combobox in each cell of one column



theRedPill
10 Sep 2015, 6:54 PM
Hi all!

Currently I have a grid with an ArrayStore that I load with JSON items. Each record in the grid is a Message and each Message has an array of "To" objects. My goal is to be able to have each cell in the To column to be a combobox so that when the user clicks the To value of a Message, they can see all the To objects in that array.

Is this possible? A few of the threads I've seen describe a situation where they want to set the editor of a column to be a combobox with a static list of values. These examples do not really apply to my situation.


Just to be clear, the grid has an ArrayStore and the To field is of type 'auto'. Here is the column definition I've tried so far and it just displays [object Object], [object Object], .... inside of the cell:


{text: 'To',
flex: 1,
dataIndex: 'tos',
editor: {xtype: 'combobox',
store: new Ext.data.Store({fields: [{name: 'nodeId',type: 'int'}, {name: 'nodeName',type: 'string'}]}),
queryMode: 'local',
valueField: 'nodeId',
displayField: 'nodeName'
}}



Here's example JSON:


[{messageId: 21,
sender: 'JOHN SMITH',
tos: [{nodeId: 4, nodeName: "NODE NAME"}, {nodeId: 6, nodeName: "NODE NAME 2"}],
subject: "SUBJECT TEXT"
}, another message object]

Thanks for any help you guys can provide!!

Gary Schlosberg
10 Sep 2015, 7:09 PM
Duplicate: https://www.sencha.com/forum/showthread.php?305058

theRedPill
10 Sep 2015, 7:28 PM
sorry I couldn't see it after I submitted so I wasn't sure what happened

jdkhamba
10 Sep 2015, 7:40 PM
There is a slightly twisted way to achieve what you are trying through forced rendering of ext components inside grid cells using dom query rendering. Here is a fiddle:

https://fiddle.sencha.com/#fiddle/tn2

theRedPill
11 Sep 2015, 7:07 AM
Your fiddle is exactly what I'm trying to accomplish. I'm having trouble getting it to work in my widget though. When the data is loaded into the store, the To column is showing as blank.

Here is the snippit of the code I tried:



{
text: 'To',
flex: 2,
dataIndex: '',
renderer: toRenderer
}, {
text: 'Draft',
flex: 1,
dataIndex: 'isDraft',
align: 'left'
}, {
text: 'Publish Date',
flex: 1,
dataIndex: 'publishDate',
align: 'left'
}],
listeners: {
viewready: function(view) {
var els = view.el.query('div[ext-xtype]');
Ext.each(els, function(domEl) {
var xtype = Ext.get(domEl).getAttribute('ext.xtype');
var rowIndex = Ext.get(domEl).getAttribute('recindex');
var toData = gridPanel.getStore().getAt(rowIndex).get('Tos');
var comboStore = Ext.create('Ext.data.Store', {
fields: ['nodeId', 'nodeName'],
data: toData
})
Ext.widget(xtype, {
renderTo: domEl,
store: comboStore,
displayField: 'nodeName',
valueField: 'nodeId'
});
}, this);
view.up('messagelookup').doLayout();
}
}

jdkhamba
11 Sep 2015, 8:28 AM
I need to see the full code in order to help you. Please post a new fiddle with some test data and try and replicate the issue.

One thing I can think of is that the casing might be different in your data 'tos' is in lower case but the 'Tos' in the fiddle is camel case. Check that all the properties name and case are accurate.

theRedPill
11 Sep 2015, 10:11 AM
I'm not experienced in creating Fiddle's I'm sorry. I changed the Tos to tos to match the data property, but it still is not showing up. Here is more detailed snippits of code:



Ext.define('MM.view.MessageLookup', {
extend: 'Ext.panel.Panel',
xtype: 'messagelookup',
itemId: 'messageLookup',
layout: 'border',
tbar: [{
xtype: 'headerfieldcontainer'
}],
items: [{
xtype: 'messagegrid'
}, {
xtype: 'messagedetails'
}]
});




Ext.define('MM.store.MessageGridStore', {
extend: 'Ext.data.Store',
xtype: 'messagegridstore',
itemId: 'messageGridStore',
model: 'MM.model.MessageGridModel',
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});




Ext.define('MM.model.MessageGridModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'senderUserName'
}, {
name: 'from'
}, {
name: 'classification'
}, {
name: 'isDraft'
}, {
name: 'messageId'
}, {
name: 'nodeId'
}, {
name: 'planId'
}, {
name: 'messageType'
}, {
name: 'info',
type: 'auto'
}, {
name: 'oper'
}, {
name: 'newsgroup'
}, {
name: 'procs',
type: 'auto'
}, {
name: 'declassifyDate'
}, {
name: 'creationDate'
}, {
name: 'dSlash'
}, {
name: 'rSlash'
}, {
name: 'subject'
}, {
name: 'publishDate'
}, {
name: 'tos',
type: 'auto'
}, {
name: 'toNames',
type: 'auto'
}, {
name: 'body',
type: 'auto'
}, {
name: 'refs',
type: 'auto'
}]
});




var toRenderer = function(value,metadata,record,rowIndex){
return '<div ext-xtype="combo" recindex=' + rowIndex+ '></div>';

};


Ext.define('MM.view.MessageGrid', {
extend: 'Ext.grid.Panel',
xtype: 'messagegrid',
itemId: 'messageGrid',
region: 'west',
layout: 'fit',
width: 700,
viewConfig: {stripeRows: false, enableTextSelection: false},
autoScroll: true,
store: 'MessageGridStore',
emptyText: 'No Messages to Display',
plugins: [{
ptype: 'cellediting',
clicksToEdit: 1
}],
columns: [{
text: 'From',
flex: 1,
dataIndex: 'from',
align: 'left'
}, {
text: 'Sender',
flex: 1,
dataIndex: 'senderUserName',
align: 'left'
}, {
text: 'Subject',
flex: 1,
dataIndex: 'subject',
align: 'left'
}, {
text: 'To',
flex: 2,
dataIndex: '',
renderer: toRenderer
}, {
text: 'Draft',
flex: 1,
dataIndex: 'isDraft',
align: 'left'
}, {
text: 'Publish Date',
flex: 1,
dataIndex: 'publishDate',
align: 'left'
}],
listeners: {
viewready: function(view) {
var els = view.el.query('div[ext-xtype]');
Ext.each(els, function(domEl) {
var xtype = Ext.get(domEl).getAttribute('ext.xtype');
var rowIndex = Ext.get(domEl).getAttribute('recindex');
var toData = gridPanel.getStore().getAt(rowIndex).get('tos');
var comboStore = Ext.create('Ext.data.Store', {
fields: [{name: 'nodeId', type: 'auto'}, {name: 'nodeName', type: 'string'}],
data: toData
})
Ext.widget(xtype, {
renderTo: domEl,
store: comboStore,
displayField: 'nodeName',
valueField: 'nodeId'
});
}, this);
view.up('messagelookup').doLayout();
}
}
});

jdkhamba
11 Sep 2015, 12:07 PM
The approach to use the dom Query rendering removes the need to use a plugin. I am not sure the usage of an editor is interfering with the rendered component.

Try not using the editor at all.Create a custom component that is extended from combobox and put listeners on that combo in order to update the correct rows.

Also creating a fiddle is real easy. Just go to fiddle.sencha.com and enter your code, select your framework and version and just save it.