1. #1
    Sencha User QuinnPerkins's Avatar
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    QuinnPerkins is on a distinguished road

      0  

    Question Grid with ComboBox column (multi-dim array)

    Grid with ComboBox column (multi-dim array)


    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"]
    ];

    });

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Please repost your original code in php or code tags,

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.

  4. #4
    Sencha User QuinnPerkins's Avatar
    Join Date
    Mar 2008
    Posts
    22
    Vote Rating
    0
    QuinnPerkins is on a distinguished road

      0  

    Default


    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:

    Code:
    // 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"]
    ];

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    30
    Vote Rating
    0
    marcus78 is on a distinguished road

      0  

    Cool Same issue for me

    Same issue for me


    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.
    Rimbaud Marc - Consultant spécialisé ITIL