PDA

View Full Version : Panel as Grid Cell Renderer?



stephenliberty
30 Jan 2010, 10:01 AM
Hey All,

I'm trying to build a grid of sorts that is full of users. Normally this wouldn't be a problem, but the client wants it done in a special way that would basically require me to make each row something like this...



____________________________________________________________________
| __
| | | User's Name Role: [Combo with roles]
| |__| User's Position Actions: [Combo with actions] [delete button]
|___________________________________________________________________
The only thing linked to the data store (at the moment) is the role, and the delete button would, of course, delete them.

I managed to do something very close with a template having all the info but I wanted to make sure there wasn't a better way of doing it, and I want to make sure I'm not painting myself into a corner when more information is added and editable down the road. I'd prefer to use a panel as the cell, but I have no idea if that is even possible. Also, I'm not quite sure how to link the role to a combo box and make sure said combo box is linked appropriately to the data store.

Any help and/or thoughts would be appreciated.
Thanks!
Stephen

stephenliberty
30 Jan 2010, 10:47 AM
Well, I was poking around and found the 'data view'. Perhaps this is what I was looking for.. I guess I'll give it a shot and see what happens!

stephenliberty
30 Jan 2010, 12:32 PM
Got it I think. Here's the code in case you feel like picking through it. I used the ComponentDataView that I found while rummaging the site for 'dataview' and 'component' from google (http://www.extjs.com/forum/showthread.php?t=79210).




{
title: 'Assigned Users',
style:'padding: 10px;',
items: {
xtype: 'compdataview',
height:300,
autoScroll:true,
store: new Ext.data.JsonStore({
fields:userRecord,
root:'users',
data:dummyData
}),
listeners:{
selectionchange:function(dataview, selections){
alert('t');
}
},
itemSelector: 'div.ProjectEditorUser',
tpl: '<div><tpl for="."><div class="x-panel-body">\n\
<div class="ProjectEditorUser"><tpl if="picturepath!=undefined">\n\
<div style="width:50px; float:left; padding:5px;"><img src="{picturepath}"/></div></tpl>\n\
<div style="width:150px; float:left; padding:5px;"><h3>{display_name}</h3>{position}</div>\n\
<div style="width:280px; float:left; padding:5px;">\n\
<div class="ProjectEditorUserRole"></div>\n\
<div class="ProjectEditorUserActions"></div>\n\
</div>\n\
<div style="float:left; width:20px; padding:5px" class="ProjectEditorUserDeleteButton"></div>\n\
<div style="clear:both"></div></div>\n\
</div></tpl></div>',
items: [new Ext.FormPanel({
border:false,
renderTarget: '.ProjectEditorUserRole',
items:[{
xtype: 'combo',
fieldLabel:'Role',
store:[],
applyValue: 'role',
border:false
}]
}),
new Ext.FormPanel({
renderTarget: '.ProjectEditorUserActions',
border:false,
buttons:[
{text:'View User'},
{text:'Activity'}
]
}),
new Ext.FormPanel({
border:false,
renderTarget: '.ProjectEditorUserDeleteButton',
items:[{
border:false,
xtype:'button',
text:'X',
hideLabel:true,
handler:function(){
alert('aaaa')
}
}]
})]
}
}