1. #1
    Sencha User chalu's Avatar
    Join Date
    Feb 2008
    Location
    Benin City, Nigeria
    Posts
    480
    Vote Rating
    1
    chalu is on a distinguished road

      0  

    Default Ext.ux.plugin.ComboLoader : Useful Plugin

    Ext.ux.plugin.ComboLoader : Useful Plugin


    Hell folks, decided to share this plugin, may be of help to someone out here. It simply loads data over XHR into another combo when a selection is made on it. E.g selecting a continent in a Continent combobox, populates a target combo (countries combo) with the countries from the selected continent. It also so caches the response from a selection (if configured) so that subsequent selections of the same item would not require XHR to fetch data. Not nearly perfect, but useable.

    Code:
    Ext.namespace('Ext.plugin');
    /**
     * @class Ext.plugin.ComboLoader
     * @extends Ext.form.ComboBox
     * A utility that lets you load data into other combo(s) asynchronously, with cacheing
     * @constructor
     * Create a new ComboLoader plugin.
     * @param {Object} config Configuration options
     * @author Charles Opute Odili
     * @version 0.1
     */
     
     Ext.plugin.ComboLoader = function(config){
     	Ext.apply(this, config);
     }
     
     Ext.extend(Ext.plugin.ComboLoader, Ext.util.Observable, {
     	/**
     	 * @cfg {String} url
     	 * The Request URL
     	 */
     	url: null,
     	
     	/**
     	 * @cfg {Object} baseParams
     	 * Optional Request parameters to pass with every selection request 
     	 */
     	baseParams: null,
     	
     	/**
     	 * @cfg {String} method
     	 * The request method to use, defaults to POST
     	 */
     	method: 'POST',
     	
     	/**
     	 * @cfg {Function} failure
     	 * A callback action on request failure
     	 */
     	failure: null,
     	
     	/**
     	 * @cfg {Boolean} useCache
     	 * Weather or not to cache responses, defaults to true
     	 */
     	useCache: true,
     	
     	/**
     	 * @cfg {Object / Array} target
     	 * Configure combo(s) to be populated from selections on this combo.
     	 * Value(s) should be the id of the target combos
     	 */
     	target: null,
     	
     	init: function(combo){
     		this.combo = combo;
     		this.responseCache = [];
     		this.targetComps = [];
     		
     		if(this.target){
     			if(this.target instanceof Array){
     				Ext.each(this.target, function(item){
    	 				this.disableTarget(item);
    	 			}, this);
     			}else{
     				this.disableTarget(this.target);
     			}
     		}else{
     			throw 'target not specified in combo loader plugin for ' + this.combo;
     		} 
     		this.combo.on('select', this.onLoad, this);
     	},
     	
     	disableTarget: function(el){
     		var comp = null;
     		var task = new Ext.util.DelayedTask();
     		var action = function(){
     			if(comp && comp.disabled){
     				task.cancel();
     				return;
     			}else{
     				comp = Ext.getCmp(el);
     				if(comp){
     					this.targetComps.push(comp);
     					comp.disable();
     				}else{
    	 				task.delay('1000', action, task);
     				}	 				
     			}
     		}; 		
     		task.delay('1000', action, this);
     	},
     	 	
     	onLoad: function(combo, record, index){
     		var _self = this;
     		var queryValue = record.data[combo.valueField];
     		var queryText = record.data[combo.displayField];
     		
     		// see if we have it cached
     		if(_self.responseCache[queryValue]){
     			var data = _self.responseCache[queryValue];
     			_self.afterLoad.call(_self, data);
     			
     		}else{ 			
     			Ext.Ajax.request({
    	 			url: this.url,
    	 			method: this.method || 'POST',
    	 			params: Ext.apply({value:queryValue, text:queryText}, _self.baseParams),
    	 			success: function(o){
    	 				var resp = Ext.decode(o.responseText);
    	 				_self.afterLoad.call(_self, resp, queryValue);
    	 			},
    	 			failure: function(o){
    	 				if(_self.failure){
    	 					_self.failure(o);
    	 				}else{
    	 					Ext.Msg.alert('Message', 'Load Failure !');
    	 				}
    	 			}
    	 		});
     		}	 		
     	},
     	
     	afterLoad: function(data, cacheKey){
     		Ext.each(this.targetComps, function(targetCombo){
     			if(targetCombo.disabled){
    	 			targetCombo.enable();
    	 		}
    	 		targetCombo.clearValue();
    	 		targetCombo.store.removeAll();
    	 		targetCombo.store.loadData( data );
    	 					
    	 		//cache it
    	 		if(this.useCache && cacheKey){
    	 			this.responseCache[cacheKey] = data;
    	 		}
     		}, this);
     	}
     	
     });
     
     Ext.reg('comboloader', Ext.plugin.ComboLoader);
    Last edited by chalu; 26 Apr 2009 at 11:46 AM. Reason: Updated Plugin Code

  2. #2
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default Usage

    Usage


    hi, it seems very nice. How do I Use? Can you post usage example. Thanks for sharing.
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

Thread Participants: 1