Comments on: Dynamic Sencha Touch Forms : Part 2 : Dynamically loading Select Fields based on previously selected values

By: Brian

Brian — Thu, 02 Feb 2012 14:09:26 +0000

Additionally I added the below methods to the initComponent: function() after this.onRegionChange(this.items.get(0), 1);

”
this.onRegionChange(this.items.get(0), 1);

this.items.get(1).on({
change: this.onCountryChange,
scope: this
});
”

This ensures that every time you change a country the cities are updated.

Great tutorial and great support!!!

By: Brian

Brian — Thu, 02 Feb 2012 12:41:28 +0000

I added to the
“if(firstCountry){countrySelectField.setValue(firstCountry.data.CountryID);…}”:

”
this.items.get(0).on({
change: this.onCountryChange,
scope: this
});

this.onCountryChange(this.items.get(0), 1);
”

And it works! Thanks!!!

By: Stuart

Stuart — Mon, 30 Jan 2012 13:57:12 +0000

You should put the Cities filter in the change event handler function of the second select field (the Country field in your case I think) so that when a value is chosen the City field is filtered.

I would recommend moving the change event binding you are doing at the start of your onRegionChange method to your initComponent method as this will bind the onCountryChange method to the change event everytime the region changes and so might give you some weird results.

Cheers
Stuart

By: Brian

Brian — Mon, 30 Jan 2012 12:52:47 +0000

I have begun to add the suggestions you made. In this, I created a Ext.regModel(‘Region’…), created a regionStore, added a Region ‘selectfield’ to the beginning of the Ext.apply(…items…), and created an onRegionChange method:

onRegionChange: function(selectField, value){
this.items.get(0).on({
change: this.onCountryChange,
scope: this,
});

var countrySelectField = this.items.get(1);

countrySelectField.store.clearFilter();

countrySelectField.store.filter(‘RegionID’, value);

var firstCountry = countrySelectField.store.getAt(0);

if(firstCountry){
countrySelectField.setValue(firstCountry.data.CountryID);
} else {
countrySelectField.setValue(”);
}
}

Currently only the first items in Ext.apply(…items…) filters the second. Currently changing ‘Region’ changes ‘Country’, while the ‘City’ drop down list displays all of the cities.

How and where should I fire the filter on the cities?

Any suggestions would be appreciated!!!

By: Stuart

Stuart — Fri, 27 Jan 2012 15:18:46 +0000

You can add another field in the chain by first adding the select field. Then add a new method called onRegionChange and attach it to the new field's change event. It's then just a case of duplicating the logic in the example method (onCountryChange) but point it to the next selectfield. The process will look a little like this: Country Select Field -> -> onCountryChange fires where we filter Region Select Field based on selection (potentially resetting the City selection) Region Select Field -> -> onRegionChange fires where we filter City Select Field based on region selection. Hope that makes sense! Stuart .

By: Brian

Brian — Fri, 27 Jan 2012 14:51:31 +0000

How would you add another layer… with “Region” for instance?

By: Michael

Michael — Wed, 07 Dec 2011 20:41:58 +0000

nevermind… I got! thanks you!

By: Michael

Michael — Wed, 07 Dec 2011 19:45:09 +0000

Actually I’m trying to do something a bit different then what you are doing here.. I have a segmented button with 4 items, each of these items have a tap handler.

My problem is I need the scope (this) in this.periodChanged because it is calling another method… I tried replacing handler: this.periodChanged with addListener: { tap: this.periodChanged, scope: this } but nothing happens when i tap the button…

{
xtype: ‘segmentedbutton’,
allowDepress: true,
items: [{ text: 'Day', handler: this.periodChanged, pressed: true },
{ text: 'Week', handler: this.periodChanged },
{ text: 'Month', handler: this.periodChanged },
{ text: 'Year', handler: this.periodChanged }
]
};

Thank you

By: Michael

Michael — Wed, 07 Dec 2011 19:30:59 +0000

Ahhh…

By: Stuart

Stuart — Wed, 07 Dec 2011 19:10:16 +0000

The dockedItems property is an array and so doesn’t have a ‘get’ method. You should access its elements using the usual array syntax (this.dockedItems[0]).