Results 1 to 3 of 3

Thread: Panel as Grid Cell Renderer?

  1. #1

    Default Panel as Grid Cell Renderer?

    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...

    Code:
    ____________________________________________________________________
    |  __
    | |  |    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

  2. #2

    Default

    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!

  3. #3

    Default

    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).

    Code:
    {
                        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')
                                        }
                                    }]
                                })]
                        }
                    }
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •