Store and select box

[krause]

And when is your solution going to be available? If it is already in place how is it used. I'm also struggling to make a Select widget work with a Store, but so far had to do it manually (i.e. load the store, listen to the load event, fill in the Select's options).

[Riaz]

I am also facing same problem. Is it possible now?

[Riaz]

Krause,

Could you give me any sample code. I can not forward.

[krause]

The field:

{
	xtype : 'selectfield',
	name : 'sampleSelectField',
	label : 'Sample',
	displayField : 'name',
	valueField : 'id'
	// store : store <---- This doesn't work
}

The store:

	var store = new Ext.data.Store( {
		fields : [ {
				name : 'id',
				type : 'int'
			}, {
				name : 'name',
				type : 'string'
			}],
		proxy : {
				type : 'ajax',
				url : "http://x.x.x.x/rest/entity",
				reader : {
					type : 'json',
					root : 'list'
				}
			},
		listeners : {
			load : function(store, recs, success) {
				// I search for my Select field and manually fill it:
				var selectField = container.query(".selectfield[name='sampleSelectField]")[0];
				selectField.setOptions(recs);
			}
		}
	});

In order to load the store you have to do it programatically beforehand. I didn't find any event that would be called when the select gets triggered by the user so you have to fill it upfront (not very ajaxy...):

	store.load( {
		params : {
			myParam : someField.getValue()
		}
	});

[krause]

With this override to Ext.form.Select it works as expected (by me at least). Please note that this is an untested quick hack that I made while exploring and trying to understand the inner workings of the component. I hope I'm wrong and there actually is already a way to do this without the hacking. I would hate to see the parade of user extensions in the forum as it is for ExtJS.

Ext.override(Ext.form.Select, {
	
	originalInitComponent : Ext.form.Select.prototype.initComponent,
	
	// @private
    initComponent: function() {
		var me = this;
		
		if (this.store) {
			this.store.on('load', function() {
				me.originalShowComponent();
			});
		}
		Ext.form.Select.prototype.originalInitComponent.call(this);
	},
	
	originalShowComponent : Ext.form.Select.prototype.showComponent,
	
	// @private
	showComponent: function() {
		this.store.load();
    }
});

What I'm doing here is overriding the showComponent function wich shows the list of options and instead I'm firing the store's load method. When the store gets loaded, and only then, I show the list of options for the user to select. This would still need an indicator that the data is loading. You may add a 'beforeload' listener to your store to pass in any required parameters to the ajax call (e.g. if the select depends on the value of another select or field).

var store = new Ext.data.Store( {
	. . .
	listeners : {
		beforeload : function(store, operation) {
			operation.params = {
				myParam : anotherField.getValue()
			}
		}
	}
});

[Riaz]

The field:

{
	xtype : 'selectfield',
	name : 'sampleSelectField',
	label : 'Sample',
	displayField : 'name',
	valueField : 'id'
	// store : store <---- This doesn't work
}

The store:

	var store = new Ext.data.Store( {
		fields : [ {
				name : 'id',
				type : 'int'
			}, {
				name : 'name',
				type : 'string'
			}],
		proxy : {
				type : 'ajax',
				url : "http://x.x.x.x/rest/entity",
				reader : {
					type : 'json',
					root : 'list'
				}
			},
		listeners : {
			load : function(store, recs, success) {
				// I search for my Select field and manually fill it:
				var selectField = container.query(".selectfield[name='sampleSelectField]")[0];
				selectField.setOptions(recs);
			}
		}
	});

In order to load the store you have to do it programatically beforehand. I didn't find any event that would be called when the select gets triggered by the user so you have to fill it upfront (not very ajaxy...):

	store.load( {
		params : {
			myParam : someField.getValue()
		}
	});

Thanks for sharing your code.
I need some clarify on based of your code. How can I reload the 'store' object? I want to upload the 'store' object when I tap s'electField'. Is it possible?

[lakilevi]

Thanks for sharing!!!

I hope Sencha will offer a native solutions for this soon.

[Ades]

Is there now a solution for Selectfield and update a store?