ExtJS Form: Linked Comboxes

Question

I have a page with a bunch of drop-downs as filters. Suppose I have a rent filters: type(apartment, house, etc...), near by (ocean, mountain, river, train, skyscrapers,...), city(New york, Los Angeles, Miami, Chicago,...) etc... and each filter make post-back and recompute other filters. For instance, if choose: near by mountains and see Miami doesn't have mountains so Miami and other cities wouldn't be in city filter... so far so on...

I just inserting this page as iFrame in other pages... but is really ugly. What a want is to use some of this ExtJs objects to help me with that. there is a lot example of grid panel but nothing like this... please give me some advise or example that will be nice. thanks.

---

More Details:

I found something to start with: http://examples.ext.net/#/Form/ComboBox/Ajax_Linked_Combos/ or version 1: http://examples1.ext.net/#/Form/ComboBox/Ajax_Linked_Combos/ that is a good example. but after I move the code to its own custom user control, the request hit the on-Load method of the main page and the user-control and the other life-cycle methods of the page, and not just the method CitiesRefresh()... I don't want that behavior, so I use instead a proxy <ext:HttpProxy Url="mypage.aspx" Method="POST" />...

but I don't have the selected value(s), how to send those??? maybe using ExtraParams but I'm not sure.

the other thing, it's the multiple dropdowns. so I guess I can response a list of items with the ddltarget... like:

data.Add(new { Id = id, Name = name, dllTarget= "Cities" });

<Fields>
    <ext:RecordField Name="id" Type="String" Mapping="Id" />
    <ext:RecordField Name="name" Type="String" Mapping="Name" />
    <ext:RecordField Name="ddlTarget" Type="String" Mapping="ddlTarget" />
</Fields>

but how to read that??? using ddlTarget when is "Cities" set to it.????

<Load Handler="#{Cities}.setValue(#{Cities}.store.getAt(0).get('id'));" /> // doesn't care ddlTarget

Answer 1

Need to create a store for each Combobox and 1 global store for all that will using Json to make a POST call and retrieve the data. The data that I retrieve is a group of collection values: something like this:

class dataJson{
    public List<ItemClass> CollectionType {get; set;}
    public List<ItemClass> CollectionNearBy {get; set;}
    public List<ItemClass> CollectionCity {get; set;}
}

When the data come back just update the store of the comboboxes as is requried: (Load is a listener of the global store)

<Load Handler=" #{TypeComboBox}.clearValue(); 
#{TypeComboBox}.loadData(this.reader.jsonData);
#{NearByComboBox}.clearValue(); 
#{NearByComboBox}.loadData(this.reader.jsonData);
#{CityComboBox}.clearValue(); 
#{CityComboBox}.loadData(this.reader.jsonData);" />

Each ComboBox should filter the data by the property Root of ext:Store > Reader, for instance the Root of the NearByComboBox store should be "CollectionNearBy"