Grid with ComboBox column (multi-dim array)

[QuinnPerkins]

I'm just starting to learn ExtJS. So...I'd like to load in groups of contacts into a Grid, with all of their emails showing up in a ComboBox. No input here (not a submitted form), just a way to show mulitple emails in a small space.

I can do a ComboBox with a set range of values, but what I'm looking for is to load the appropriate array values from each record of the dummyData. How can I load a multi-dimensional array? I need 'email' from store contactdata to be read as an array and used as the ComboBox values. I'm hoping there is an easy way to do this, but I've been beating my head against the wall on this and can't figure it out.

I know this doesn't work, but it is what I'm playing with to give you an idea:

Ext.onReady(function(){


Ext.QuickTips.init();


// Contacts Grid
var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{
name: 'name'
},{
name: 'company'
},{
name: 'title'
},{
name: 'address'
},{
name: 'email'
},{
name: 'phone'
}
]);

var contactdata = new Ext.data.Store({
reader: reader,
data: xg.dummyData
});

var sm = new xg.CheckboxSelectionModel();
var sm2 = new xg.CheckboxSelectionModel();

var grid4 = new xg.EditorGridPanel({
id:'button-grid',
store: contactdata,
clicksToEdit:1,
cm: new xg.ColumnModel([
sm,
{
header: "Name",
width: 125,
sortable: true,
dataIndex: 'name'
},{
header: "Company",
width: 125,
sortable: true,
dataIndex: 'company'
},{
header: "Title",
width: 120,
sortable: false,
dataIndex: 'title'
},{
header: "Address",
width: 140,
sortable: false,
dataIndex: 'address'
},{
header: "Email",
width: 120,
sortable: false,
dataIndex: 'email',
editor: new Ext.form.ComboBox({
editable:false,
typeAhead: false,
mode: 'local',
triggerAction: 'all',
lazyRender:true,
listClass: 'x-combo-list-small'
})
},{
header: "Phone",
width: 120,
sortable: false,
dataIndex: 'phone'
}
]),
sm: sm2,

viewConfig: {
forceFit:true
},

// inline toolbars
tbar:[{
text:'New Contact',
tooltip:'Add a new contact to Dashboard',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Delete Contact(s)',
tooltip:'Remove the selected contact(s)',
iconCls:'remove'
}],

frame:false,
border:false,
//renderTo: document.getElementById('contactslist')
renderTo: document.body
});


// Contacts Grid Close

//close of onReady
});


// Array data for the grids

Ext.grid.dummyData = [
["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["alpha@there.com","one@here.com"],"(303) 555-1212"],
["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["beta@there.com","two@here.com"],"(303) 555-1213"],
["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["omega@there.com","three@here.com"],"(303) 555-1214"],
["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["gamma@there.com","four@here.com"]"(303) 555-1212"]
];

});

[jay@moduscreate.com]

Please repost your original code in php or code tags,

[evant]

As the previous posted suggested, please use (code)(/code) (replace () with []). Also, please only post the relevant code, people don't want to trawl through all that to find what you're talking about.

[QuinnPerkins]

Sorry...I thought the previous poster was wanting me to post the entire PHP page.

I have no reason to believe that I'm on the right path with this, only that there should be a way to achieve what I'm after. Basically I just want to have a pulldown on each record with values specific to that record. I want it as a read-only view of multiple email addresses (or phone numbers, or physical addresses) if that contact record has them in the db. I am just dummying up some data in arrays at the bottom.

Lemme try this:

// Contacts Grid

    var xg = Ext.grid;

    // shared reader
    var reader = new Ext.data.ArrayReader({}, [
		{
			name: 'name'
		},{
			name: 'company'
		},{
			name: 'title'
		},{
			name: 'address'
		},{
			name: 'email'
		},{
			name: 'phone'
		}
    ]);

	var contactdata = new Ext.data.Store({
		baseParams:{start:0, limit:10},
		reader: reader,
		data: xg.dummyData
	});
        
	var sm = new xg.CheckboxSelectionModel();

    var grid = new xg.EditorGridPanel({
        id:'button-grid',
        store: contactdata,
        clicksToEdit:1,
        loadMask: true,
        cm: new xg.ColumnModel([
            sm,
            {
            	header: "Name",
            	width: 125,
            	sortable: true,
            	dataIndex: 'name'
            },{
            	header: "Company",
            	width: 125,
            	sortable: true,
            	dataIndex: 'company'
            },{
            	header: "Title",
            	width: 120,
            	sortable: false,
            	dataIndex: 'title'
            },{
            	header: "Address",
            	width: 140,
            	sortable: false,
            	dataIndex: 'address'
            },{
            	header: "Email",
            	width: 120,
            	sortable: false,
            	dataIndex: 'email',
            	editor: new Ext.form.ComboBox({
    				editable:false,
					typeAhead: false,
            		mode: 'local',
            		triggerAction: 'all',
            		lazyRender:true,
            		listClass: 'x-combo-list-small'
				}) 
            },{
            	header: "Phone",
            	width: 120,
            	sortable: false,
            	dataIndex: 'phone'
            }
        ]),
        sm: sm,

        viewConfig: {
            forceFit:true
        },

        // inline toolbars
        tbar:[{
            text:'New Contact',
            tooltip:'Add a new contact to Dashboard',
            iconCls:'add'
        }, '-', {
            text:'Options',
            tooltip:'Blah blah blah blaht',
            iconCls:'option'
        },'-',{
            text:'Delete Contact(s)',
            tooltip:'Remove the selected contact(s)',
            iconCls:'remove'
        }],

        frame:false,
        border:false,
        renderTo: document.getElementById('contactslist'),
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: contactdata,
            displayInfo: true,
            displayMsg: 'Displaying contacts {0} - {1} of {2}',
            emptyMsg: "No contacts to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: toggleDetails
            }]
        })    
	});
    
    function toggleDetails(btn, pressed){
        var view = grid.getView();
        view.showPreview = pressed;
        view.refresh();
    }
    
 // Contacts Grid Close
    
// Sample array data for the grids

Ext.grid.dummyData = [
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"],
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"],
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"],
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"],
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"],
	["Quinn Perkins","ColoradoBiz.net","President","7908 S Marshall ST, Littleton CO 80128",["a","b"],"(303) 904-8421"],
	["Mary Perkins","ColoradoBiz.net","Finance","7908 S Marshall ST, Littleton CO 80128",["c","d"],"(303) 904-8421"],
	["Marcus Perkins","Leanin' Tree","Prepress System Admin","123 Somewhere Ave, Boulder CO 80128",["e","f"],"(303) 904-8421"],
	["John Doe","Acme Widgets","Guard","7908 S Marshall ST, Littleton CO 80128",["g","h"],"(303) 555-1212"]
];

[marcus78]

Hello,

I also want to build a combobox within a grid from a php array returned by a php script.
Any clue will be welcome ! I tried a couple of things by myself, but without any success.

Thanks in advance to anyone knowing a solution.