Feb 10, 2010, 1:25 PM
autoload datastore records from http proxy
Im wokring on an MVC application, in its simplest form, I have to entity: provinces and regions.
provinces have an Id and a name
regions have an Id, name and regionId
I have a Gridpanel that displays the provinces, its setup as below (sorry about the long snippet)
The problem is, when the view first loads, the dsRegions does not populate automatically, so the call to regionRenderer does not return anything. but if I edit the region (select a new value from the combo box), then the dsregion is populated. How can I make sure that dsRegions is populated when the gridpanel is being rendered?
provinces have an Id and a name
regions have an Id, name and regionId
I have a Gridpanel that displays the provinces, its setup as below (sorry about the long snippet)
<script runat="server">
void OnLoad(EventArgs e) {
base.OnLoad(e);
dsRegions.DataBind();
}
</script>
<script type="text/javascript">
var commandHandler = function(cmd, record) {
switch (cmd) {
case "delete":
Ext.Msg.confirm('Alert', 'Delete Record?', function(btn) {
if (btn == "yes") {
dsCustomers.remove(record);
dsCustomers.save();
}
});
break;
}
}
var regionChangedHandler = function(src, newValue, oldValue) {
var ds = dsProvinces;
dsRegions.each(function(region) {
if (region.data.Id == newValue) {
dsProvinces.each(function(province) {
var gp = GridPanel1;
province.data.Region = region.data;
});
}
});
}
</script>
<script type="text/javascript">
var regionRenderer = function(value, v2, v3) {
if (value) {
var ds = dsRegions;
dsRegions.reload();
var r = dsRegions.getById(value);
if (r) {
return r.data.Name;
}
// return "";
//
} else {
// return "";
}
}
</script>
<ext:ScriptManager ID="scriptManager1" runat="server" />
<ext:Store ID="dsProvinces" runat="server" RemoteSort="false" UseIdConfirmation="true" AutoLoad="true" >
<Proxy>
<ext:HttpProxy Url="/Provinces.aspx/GetProvincesMatching/" />
</Proxy>
<UpdateProxy>
<ext:HttpWriteProxy Url="/Provinces.aspx/SaveProvincesWithConfirmation/" />
</UpdateProxy>
<Reader>
<ext:JsonReader ReaderID="Id" Root="data" TotalProperty="totalCount" AutoDataBind="true">
<Fields>
<ext:RecordField Name="Id" SortDir="ASC"/>
<ext:RecordField Name="Name" />
<ext:RecordField Name="PostalIso" />
<ext:RecordField Name="RegionId" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="limit" Value="15" Mode="Raw" />
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="dir" Value="ASC" />
<ext:Parameter Name="sort" Value="Id" />
</BaseParams>
<SortInfo Field="Id" Direction="ASC" />
</ext:Store>
<ext:Store ID="dsRegions" runat="server" RemoteSort="false" AutoLoad="true" >
<Proxy>
<ext:HttpProxy Url="/Regions.aspx/GetRegions/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="Id" Root="data" TotalProperty="totalCount" AutoDataBind="true">
<Fields>
<ext:RecordField Name="Id" SortDir="ASC"/>
<ext:RecordField Name="Name" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="limit" Value="-1" Mode="Raw" />
<ext:Parameter Name="start" Value="-1" Mode="Raw" />
<ext:Parameter Name="dir" Value="ASC" />
<ext:Parameter Name="sort" Value="Id" />
</BaseParams>
<SortInfo Field="Id" Direction="ASC" AutoDataBind="true" />
</ext:Store>
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:GridPanel
ID="GridPanel1"
runat="server"
Header="false"
Border="false"
StoreID="dsProvinces"
TrackMouseOver="true"
ClicksToEdit="2"
AutoExpandColumn="Name">
<ColumnModel ID="columnModel1" runat="server">
<Columns>
<ext:Column ColumnID="Name" DataIndex="Name" Header="Region">
<Editor>
<ext:TextField ID="ProvicneNameTextField" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ColumnID="PostalIso" DataIndex="PostalIso" Header="Postal ISO">
<Editor>
<ext:TextField ID="ProvincePostalISOTextField" runat="server" AllowBlank="false" MaxLength="2" MaxLengthText="2" />
</Editor>
</ext:Column>
<ext:Column ColumnID="ProvinceRegionName" DataIndex="RegionId" Header="Region">
<Renderer Fn="regionRenderer" />
<Editor>
<ext:ComboBox
Id="ProvinceRegionComboBox"
StoreID="dsRegions"
AllowBlank="false"
Editable="false"
TypeAhead="true"
Mode="Local"
ForceSelection="true"
TriggerAction="All"
DisplayField="Name"
ValueField="Id"
EmptyText="Loading..."
ValueNotFoundText="Loading..."
AutoDataBind="true"
runat="server">
<Listeners>
<Change Fn="regionChangedHandler" />
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{dsProvinces}.save();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Add" Icon="Add">
<Listeners>
<Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPanel1}.startEditing(0, 0);" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Reject Changes" Icon="ArrowUndo">
<Listeners>
<Click Handler="#{dsProvinces}.rejectChanges();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="dsRegions" PageSize="15" />
</BottomBar>
<Listeners>
<Command Fn="commandHandler" />
<BeforeEdit Handler="return !(e.field=='Id' && !e.record.newRecord);" />
</Listeners>
<LoadMask ShowMask="true" />
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:FitLayout>
</Body>
</ext:ViewPort>The problem is, when the view first loads, the dsRegions does not populate automatically, so the call to regionRenderer does not return anything. but if I edit the region (select a new value from the combo box), then the dsregion is populated. How can I make sure that dsRegions is populated when the gridpanel is being rendered?
