1. #1
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default Populate ComboBox with Inital Value f/ DB on XHR

    Populate ComboBox with Inital Value f/ DB on XHR


    I'm having a 'heck' of a time getting this working. How have any of you been able to populate a combobox with the initial value from a database. The DB part I know, the server side script I know as well... just can't seem to figure out how to do it on the client side (javascript).

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Just use one of the combo examples (not with SimpleStore) and if you need to load the store before you click combo's trigger then call combo.store.load().

    This is one combo from my app - take from it what you need:

    PHP Code:
        // create table selection combo
        
    var ctable = new Ext.form.ComboBox({
              
    forceSelectiontrue
            
    editablefalse
            
    triggerAction'all'
            
    displayField'objName'
            
    valueField'objName'
            
    store: new Ext.data.Store({
                  
    baseParams: {objName:'objList'cmd'getData'where:"objType='query'"}
                , 
    proxy: new Ext.data.HttpProxy({url:'/request.php'method:'post'})
                , 
    reader: new Ext.data.JsonReader({
                      
    root'rows'
                    
    id'objName'
                
    }, [{name:'objName'}])
            })
            , 
    listeners: {
                
    select:{fn: function(comborecordindex) {
                    
    store.baseParams.objName combo.getValue();
                    
    store.load({params:{meta:truestart:0limit:page}});
                    
    store.on({
                        
    load:{single:truescope:thisfn:function() {
                            
    grid.getView().autoSizeColumns();
                
    //            grid.setEditable(false);
                //            debugger;
                //            testFn(store);
                        
    }}
                    });
                }}
            }
        });
        
    ctable.render('table-combo-ct'); 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Thanks Saki, will this load the drop down options or the inital value?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,527
    Vote Rating
    379
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Initial options. After store is loaded you can: combo.setValue(initValue);
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    139
    Vote Rating
    1
    Spirit is on a distinguished road

      0  

    Default


    I also searched for a nice solution to set the initial value to what i recieve from database,
    thats how i do it by now:

    Code:
        	form.load({
    		    url: 'getdata.php?r=int',
    		    waitMsg:'Loading...',
    			success: function(form, action) {
    			        form.findField('titel').setValue(action.result.data.titel_id);
    			    }			
    		});

  6. #6
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336
    Vote Rating
    0
    cluettr is on a distinguished road

      0  

    Default


    Thanks Saki. Spirit is on to exactly what I am looking for. Spirit, what's behind the URL? XML? JSON?

    I don't use any of the extjs forms. I only use the combobox. Is it still possible to load the initial value in this manner?

  7. #7
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Germany
    Posts
    139
    Vote Rating
    1
    Spirit is on a distinguished road

      0  

    Default


    hmm... nothing special about my code, dont think that it is exactly what your are looking for, but here is the code which belongs to the first code i posted.

    Code:
    		var storeTitel = new Ext.data.Store({
    		    proxy: new Ext.data.HttpProxy({url: 'getdata.php?r=titel'}),
    		    reader: new Ext.data.JsonReader({
    		        totalProperty: 'results',
    		        root:'items'
    		    }, [{name: 'titel_id', mapping:'id'}, {name: 'titel_name' , mapping:'name'}])
    		}); 
    		storeTitel.load();
    	
    		titel = new Ext.form.ComboBox({
    	  	    width:170,
    		    fieldLabel: titel,
    		    name: 'titel',
    		    store: storeTitel,
    		    displayField:'titel_name',
    		    valueField: 'titel_id' ,
    		    typeAhead: true,
    		    mode: 'local',
    		    triggerAction: 'all',
    		    selectOnFocus:true
    		});
    and my form:
    Code:
        form = new Ext.form.Form({
                labelWidth: 75, 
    	    reader: new Ext.data.JsonReader({ 
    	         successProperty: 'success', 
    	         root: 'items'
    	    }, Ext.data.Record.create([
    	        { name: 'titel_name', mapping: 'titel', type: 'string' },
    	        { name: 'titel_id', mapping: 'id', type: 'int' }
    	    ]))
        });
    I have shortend my code to all i need for the combobox.
    Well, if you dont use a form, it will be necessary to set the initial value after recieving your data record. (what i do with form.load). First i thought that form load would set the initial value of the combobox automatic, cause it sets all other form fields (textfields, ...) automatic and all necessary data would be there (?!), but that didnt worked for me, so i set the initial value of comboboxes manual after form.load -> success
    May be i didnt get it right, so post some code.

  8. #8
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    riddhi is on a distinguished road

      0  

    Default Pls tell me server side code to provide data to combo

    Pls tell me server side code to provide data to combo


    Pls tell me server side code to provide data to combo