1. #11
    Sencha User krause's Avatar
    Join Date
    Jun 2008
    Posts
    53
    Vote Rating
    0
    krause is on a distinguished road

      0  

    Default


    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).

  2. #12
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
    Riaz is on a distinguished road

      0  

    Default


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

  3. #13
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
    Riaz is on a distinguished road

      0  

    Default


    Krause,

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

  4. #14
    Sencha User krause's Avatar
    Join Date
    Jun 2008
    Posts
    53
    Vote Rating
    0
    krause is on a distinguished road

      0  

    Default


    The field:

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

    Code:
    	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...):

    Code:
    	store.load( {
    		params : {
    			myParam : someField.getValue()
    		}
    	});
    Last edited by krause; 30 May 2011 at 3:44 PM. Reason: removed an extra comma in code

  5. #15
    Sencha User krause's Avatar
    Join Date
    Jun 2008
    Posts
    53
    Vote Rating
    0
    krause is on a distinguished road

      0  

    Default


    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.

    Code:
    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).

    Code:
    var store = new Ext.data.Store( {
    	. . .
    	listeners : {
    		beforeload : function(store, operation) {
    			operation.params = {
    				myParam : anotherField.getValue()
    			}
    		}
    	}
    });
    Last edited by krause; 30 May 2011 at 3:43 PM. Reason: spelling

  6. #16
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
    Riaz is on a distinguished road

      0  

    Default


    Quote Originally Posted by krause View Post
    The field:

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

    Code:
    	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...):

    Code:
    	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?

  7. #17
    Sencha User
    Join Date
    Jan 2009
    Posts
    79
    Vote Rating
    0
    lakilevi is on a distinguished road

      0  

    Default


    Thanks for sharing!!!

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

  8. #18
    Sencha User
    Join Date
    Nov 2012
    Location
    Germany
    Posts
    26
    Vote Rating
    0
    Ades is on a distinguished road

      0  

    Default


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

Similar Threads

  1. reload store and display grid on OnChange event in select box
    By dpn in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 18 Dec 2009, 6:46 AM
  2. what are my options for a select box
    By nmaves in forum Community Discussion
    Replies: 4
    Last Post: 22 Apr 2008, 11:45 AM
  3. combo/select box?
    By Capi666 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Apr 2008, 11:25 PM
  4. Replies: 0
    Last Post: 3 Jul 2007, 10:15 PM
  5. Getting selected value from select box
    By KRavEN in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 15 Mar 2007, 4:33 AM

Thread Participants: 6

Tags for this Thread