Hybrid View

  1. #1
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    1
    PaulyWolly is on a distinguished road

      0  

    Default [SOLVED] extjs4, combobox, multiselect, need to set VALUE for ALL returned from DB

    [SOLVED] extjs4, combobox, multiselect, need to set VALUE for ALL returned from DB


    Using EXTJS v4, I want to update the VALUE field of a multi-select combobox i have, with ALL the records returned from my remote query. In my case I want to update the multiselect 'value' field not the 'valueField' entries, and highlight the values in the list that are returned from the database query for the combo list. For the combobox, if you set up the combo to run with a config entry such as this:

    displayField: 'TABLENAME',
    valueField: 'TABLENAME',
    value: ['table1', 'table2', 'table5'],

    then when the combo is created if you open the combo you will see these 3 entries as highlighted.

    I want to do a remote call, get a list of values returned, and pass them back to the combobox so they appear as highlighted entries in the combobox.

    This is what I have so far:
    Code:
    Ext.Ajax.request({
    	url     : 'app/store/dbcall/target/GG/table_list_containing_target_svc.php',
    	params  : { groupflavor_sn: theGroupFlavor_sn, familyName: familyName },
    	method  : 'POST',
    	success : function(response, theRecord) {
    		var res = Ext.JSON.decode(response.responseText);
    		var returnedTablesData = res.data;
    	 
    		// reurned values are either 'blank', or a list of tablenames formatted as JSON.
    		// JSON responses will look like this: 
                    // {"data":[{"TABLENAME":"TABLE_A1"},{"TABLENAME":"TABLE_A1B"},{"TABLENAME":"TABLE_A5"}]}
    		
    		//  combobox object:
    		/*
    			var msForm = Ext.widget('form', {
    				title: 'Tables found for ' + selectedFamily,
    				//width: 385,
    				height: 150,
    				bodyPadding: 10,
    				id: 'msForm',
    				layout: 'fit',
    				items:[{
    					xtype: 'combobox',
    					id: 'myTablesComboId',
    					name: 'myTargets',
    					maxHeight: 150,        
    					width: 210,
    					multiSelect: true,
    					emptyText : "Select targets",
    					store: 'TableComboStore',
    					displayField: 'TABLENAME',
    					valueField: 'TABLENAME',
    					value: ['TABLE_A1', 'TABLE_A10B', 'TABLE_A5'], //<- this is what will be highlighted in the combo list
    					forceSelection: false,
    					editable: false,
    					queryMode: 'local',
    					ddReorder: true,
    					triggerAction: 'all',
    					listeners: {
    						'click': function() {
    							if (selectedFamily) {  
    								console.log('family selected, and button clicked');
    							}
    						}
    					},
    					listConfig: {          
    						getInnerTpl: function(displayField) {                              
    							return '<tpl for="."><div><img src="' + Ext.BLANK_IMAGE_URL + '" ' + 'class="ux-checkboxlistcombo-icon">{' + (displayField || 'text') + ':htmlEncode}</div></tpl>';
    						}
    					}
    				}]
    			})		
    		*/
    	
    		// Post value to field
    		Ext.getCmp('theTargetLabel').setValue(theGroupFlavor);
    
    		if (res.data === 'blank') {
    			console.log("res.data === 'blank'");
    			
    			// Entry is found in the database, so clear all values, and ask to resend
    			var theTableCombo = Ext.getCmp('myTablesComboId');
    			Ext.getCmp('theTargetLabel').setValue(' ');
    			theTableCombo.clearValue();
    		} 
    		else {
    			// list of available tables returned as JSON
    			// populate list returned into the new table combo, and update with the existing list of tables
    			// values returned will be HIGHLIGHTED and the checkbox next to value will be CHECKED in the listing
    
    			var theTableCombo = Ext.getCmp('myTablesComboId');
    			var store = theTableCombo.getStore();
    		
    			theTableCombo.setValue(returnedTablesData); // this works partially, to return all records found, but they are not highlighted in the combo list
    			//theTableCombo.setValue(store.getAt(0).get('TABLENAME')); // this works partially -  record is highlighted in combo list, but only returns the first record
    		}
    
    });
    As you can see when we get to the 'else' statement, there is a list of tables I can post back to the combo. But I am getting the list returned, but they are only showing in the combo text field, and the values are not highlighted when I open the combo.

    If I use - theTableCombo.setValue(store.getAt(0).get('TABLENAME'));- I am able to retrieve the first record returned and highlight that record in the combo, but only the first record. I want ALL records returned to show in the combo, as highlighted entries.

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    41
    Vote Rating
    1
    PaulyWolly is on a distinguished road

      1  

    Default [SOLVED] I found the answer myself. I am posting here for others to see

    [SOLVED] I found the answer myself. I am posting here for others to see


    my Ajax call response I populated into a varialbe called: returnedTablesData.

    in my 'else' statement I just used a for loop and posted each value first by calling store.getAt(i) and moving through the for loop for each returned value, populating the returned values into an array, then calling setValue() on the combo object and passing in the array.

    Code:
    var store = theTableCombo.getStore(); 
                                
    var iValues = [];                                                        
    for (i = 0; i < returnedTablesData.length; i++) {
         var post = store.getAt(i).get('TABLENAME');
         console.log('posted record: ', post);
         iValues.push ( post );                              
    }
    theTableCombo.setValue( iValues );
    I hope this helps others as much as it REALLY helped me!!

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Location
    Moscow, Russia
    Posts
    1
    Vote Rating
    0
    fabrikant_kharitonov is on a distinguished road

      0  

    Default


    Code:
    {
     xtype: 'combobox',
     multiSelect: true,
     listeners: {
      change: function(combo, eOpts){
       var store = combo.getStore();
       var values = [];
       Ext.Array.each(combo.value, function(id){
           values.push(store.getById(id+''));
       });
      combo.setValue(values);
     }
     }
    }