Panel as Grid Cell Renderer?

[stephenliberty]

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]

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]

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')
                                    }
                                }]
                            })]
                    }
                }