PDA

View Full Version : [CLOSED] Combobox autoload timing problem



blueworld
Feb 06, 2013, 2:02 PM
Hello,

I have three comboboxes. They are country,city,street.
The country defines the cities and the selected city defines the streets. So country acts as a parameter for the cities store.
The first Combobox is autoload = true, the other two receive their autoload property in the pageload event, depending upon if the user has a last search constant.

This all has been working fine in ext.net 1, but now the country delivers null as a parameter to the cities store. The databind for the country store does happen before that event, I've checked it in the debugger.




<ext:Store ID="CountryStore" runat="server" AutoLoad="true">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="#{Country}.setValue(#{Country}.store.getAt(0).get( 'Name'));" />
</Listeners>
</ext:Store>
<ext:Store ID="CityStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Country" Value="#{Country}.getValue()" Mode="Raw" />
</Parameters>
<Listeners>
<Load Handler="#{City}.setValue(#{City}.store.getAt(0).get('Name' ));" />
</Listeners>
</ext:Store>
<ext:Store ID="StreetStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Country" Value="#{Country}.getValue()" Mode="Raw" />
<ext:StoreParameter Name="City" Value="#{City}.getValue()" Mode="Raw" />
</Parameters>
<Listeners>
<Load Handler="#{Street}.setValue(#{Street}.store.getAt(0).get('N ame'));" />
</Listeners>
</ext:Store>
<ext:Store ID="TourtypeStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>



So what do I need to change in order to get that principle working in ext.net 2.0 ?


Regards

Daniil
Feb 06, 2013, 4:22 PM
Hi @blueworld,

Probably, a Store initiates a load request before the moment when an associated ComboBox get its value.

Instead of AutoLoad="true" I would try to initiate a load request manually within a Store's listener.

store.load();

If the issue persists, please provide a full sample to reproduce.

blueworld
Feb 07, 2013, 12:30 PM
Hi Daniil,

I think I did not understand that hint. Which Store Listener should I use? I dont see anything that would make sense.

Well the problem clearly is, that the store is already loaded and SetValue triggers the Select Handler, but at this moment it delivers null instead of the actual value

the other two comboboxes are throwing
Cannot call method 'get' of undefined because the countrystore delivers null instead of the actual value.

The country-combobox sets store.getAt(0) as its value. The load-event triggers the select handler from this combobox.
The select handler forces the city store to read data. The country that has been set by setValue by the select handler is used as the parameter which is null at this moment because it is not visibly set in the combobox yet, so the select handler triggers to early somehow

Daniil
Feb 07, 2013, 2:11 PM
I think I did not understand that hint. Which Store Listener should I use? I dont see anything that would make sense.


I mean the Load listener.

I can't say anything concrete because I don't understand the requirement well. Please provide a sample to reproduce.

Seems here is a similar scenario.
http://examples2.ext.net/#/Form/ComboBox/Linked_ComboBoxes/

blueworld
Feb 07, 2013, 2:41 PM
Hi Daniil.

In the example, the country combobox does not use a store...
But if I manually set my country without a store it does work for me now, at least for the cities combobox. The street combobox which has the cities value as parameter now has the same problem.
I will provide a code example later

Do you have any idea why I see a load mask again if I open my cities combobox? The values are already loaded and you can see them in the background as well. This does only happen on the first click. I guess it has something to do with the pageProxy property.
Autocomplete does not work as well somehow

Daniil
Feb 07, 2013, 3:21 PM
Do you have any idea why I see a load mask again if I open my cities combobox? The values are already loaded and you can see them in the background as well. This does only happen on the first click. I guess it has something to do with the pageProxy property.
Autocomplete does not work as well somehow

A ComboBox's QueryMode is Remote by default. It means a load request at initial trigger click.

Setting up QueryMode="Local" for the ComboBox should help to avoid this additional request.

blueworld
Feb 07, 2013, 3:35 PM
A ComboBox's QueryMode is Remote by default. It means a load request at initial trigger click.

Setting up QueryMode="Local" for the ComboBox should help to avoid this additional request.

Hi Daniil,
If I set querymode to local the combobox does not show values if I open it. there is just a little grey line, somehow it does only work for country, maybe because there is just one item in the list?.

I have a demo now for you. please note that the things in the page load event simulate the last search constants.
Dont ask me why city always resets to city 4 if I change a value, it shouldnt do that on a postback.

If all works fine it should show after the page load:
Country 1
City 4
Country 1 - City 4





Private Class SingleName
Private _name As String

Public Sub New(ByVal name As String)
_name = name
End Sub

Public Property Name() As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
End Class


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (Not Me.IsPostBack) Then
Me.Country.SetValue("Country 1")
Me.CityStore.AutoLoad = True

Me.City.SetValue("City 4")
Me.StreetStore.AutoLoad = True
End If
End Sub


Protected Sub CountryStore_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles CountryStore.ReadData
Dim l As New Generic.List(Of SingleName)


l.Add(New SingleName("Country 1"))


Dim store As Store = sender
store.DataSource = l
store.DataBind()
End Sub

Protected Sub CityStore_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles CityStore.ReadData
Dim store As Store = sender
If e.Parameters Is Nothing OrElse e.Parameters.Count < 1 Then
store.DataSource = Nothing
store.DataBind()
Exit Sub
End If

Dim l As New Generic.List(Of SingleName)
If (e.Parameters("Country") = "Country 1") Then
l.Add(New SingleName("City 1"))
l.Add(New SingleName("City 2"))
l.Add(New SingleName("City 3"))
l.Add(New SingleName("City 4"))
End If
store.DataSource = l
store.DataBind()

End Sub

Protected Sub StreetStore_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreReadDataEventArgs) Handles StreetStore.ReadData
Dim store As Store = sender
If e.Parameters Is Nothing OrElse e.Parameters.Count < 2 Then
store.DataSource = Nothing
store.DataBind()
Exit Sub
End If

Dim l As New Generic.List(Of SingleName)
If (e.Parameters("Country") = "Country 1" And e.Parameters("City") = "City 1") Then
l.Add(New SingleName("Country 1 - City 1"))
ElseIf (e.Parameters("Country") = "Country 1" And e.Parameters("City") = "City 2") Then
l.Add(New SingleName("Country 1 - City 2"))
ElseIf (e.Parameters("Country") = "Country 1" And e.Parameters("City") = "City 3") Then
l.Add(New SingleName("Country 1 - City 3"))
ElseIf (e.Parameters("Country") = "Country 1" And e.Parameters("City") = "City 4") Then
l.Add(New SingleName("Country 1 - City 4"))
End If
store.DataSource = l
store.DataBind()
End Sub

End Class




<body>
<ext:ResourceManager runat="server" />
<ext:Store ID="CountryStore" runat="server" AutoLoad="true">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="#{Country}.setValue(#{Country}.store.getAt(0).get( 'Name'));" />
</Listeners>
</ext:Store>
<ext:Store ID="CityStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Country" Value="#{Country}.getValue()" Mode="Raw" />
</Parameters>
<Listeners>
<Load Handler="#{City}.setValue(#{City}.store.getAt(0).get('Name' ));" />
</Listeners>
</ext:Store>
<ext:Store ID="StreetStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Country" Value="#{Country}.getValue()" Mode="Raw" />
<ext:StoreParameter Name="City" Value="#{City}.getValue()" Mode="Raw" />
</Parameters>
<Listeners>
<Load Handler="#{Street}.setValue(#{Street}.store.getAt(0).get('N ame'));" />
</Listeners>
</ext:Store>

<ext:ComboBox ID="Country" runat="server" Editable="true" TypeAhead="true" StoreID="CountryStore"
TriggerAction="All" SelectOnFocus="true" DisplayField="Name" ForceSelection="true"
ValueField="Name" EmptyText="Country" AnchorHorizontal="100%" FieldLabel="Country">
<Listeners>
<Select Handler="#{City}.clearValue();#{Street}.clearValue();#{City Store}.load();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="City" runat="server" Editable="true" TypeAhead="true" StoreID="CityStore"
TriggerAction="All" SelectOnFocus="true" DisplayField="Name" ForceSelection="true"
ValueField="Name" EmptyText="City" AnchorHorizontal="100%" FieldLabel="City">
<Listeners>
<Select Handler="#{Street}.clearValue();#{StreetStore}.load();" />
</Listeners>
</ext:ComboBox>
<ext:ComboBox ID="Street" runat="server" Editable="true" TypeAhead="true" StoreID="StreetStore"
TriggerAction="All" SelectOnFocus="true" DisplayField="Name" ForceSelection="true"
ValueField="Name" EmptyText="Street" AnchorHorizontal="100%" FieldLabel="Street" />
</body>

Daniil
Feb 08, 2013, 5:06 AM
Thank you for the sample.

Well, my suggestion in post #2 appears to be working fine.

1. Do not set up AutoLoad to true for the second and third Stores.

2. But initiate a load request manually when a previous Store is already loaded.

CountryStore

<Load Handler="#{Country}.setValue(#{Country}.store.getAt(0).get( 'Name'));
#{CityStore}.load();" />

CityStore

<Load Handler="#{City}.setValue(#{City}.store.getAt(0).get('Name' ));
#{StreetStore}.load();" />

blueworld
Feb 08, 2013, 9:23 AM
Hi Daniil.

For now it works fine, except that my setValues in page load event are ignored. They all get overwritten by
"store.getAt(0).get('Name')); in the load handlers

any idea how to solve that`?

blueworld
Feb 08, 2013, 10:21 AM
I have found a solution now, but it is slow (delay) and not very nice.

So I have a public variable in my code behind and I am doing this in the handler:



<ext:Store ID="CityStore" runat="server" AutoLoad="false">
<Proxy>
<ext:PageProxy />
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
<Parameters>
<ext:StoreParameter Name="Country" Value="#{Country}.getValue()" Mode="Raw" />
</Parameters>
<Listeners>
<Load Handler="loadCity();" />
</Listeners>
</ext:Store>




function loadCity(){


if('<%= lastSearchedCity %>' != ""){
App.City.setValue('<%= lastSearchedCity %>');

}else{
App.City.setValue(App.City.store.getAt(0).get('Nam e'));

}
App.StreetStore.load();
}


If you have a better solution, please let me know

Daniil
Feb 08, 2013, 12:32 PM
Please use set up the ComboBoxes' Value properties instead of SetValue call during initial Page_Load.

The SetValue method is for AJAX requests.

If the issue persists, please provide a sample to reproduce.