[CLOSED] Gridpanel is blank after store reload
I'm trying what I think should be a trivial example of having an editable gridpanel tied to a sqldatasource via a store.
Page code:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function insertRecord(grid) {
var store = grid.store,
row = store.indexOf(store.insert(0, { Record_Name: "" })[0]);
Ext.defer(function () {
grid.editingPlugin.startEditByPosition({ row: row, column: 0 });
}, 100);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<asp:SqlDataSource ID="RecordsIWantSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>"
DeleteCommand="DELETE FROM [Records_I_Want] WHERE [Id] = @Id"
InsertCommand="INSERT INTO [Records_I_Want] ([Record_Name], [Year_Released], [In_Collection]) VALUES (@Record_Name, @Year_Released, @In_Collection)"
SelectCommand="SELECT * FROM [Records_I_Want]"
UpdateCommand="UPDATE [Records_I_Want] SET [Record_Name] = @Record_Name, [Year_Released] = @Year_Released, [In_Collection] = @In_Collection WHERE [Id] = @Id">
<DeleteParameters>
<asp:Parameter Name="Id" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Record_Name" Type="String" />
<asp:Parameter Name="Year_Released" Type="Int32" />
<asp:Parameter Name="In_Collection" Type="Boolean" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Record_Name" Type="String" />
<asp:Parameter Name="Year_Released" Type="Int32" />
<asp:Parameter Name="In_Collection" Type="Boolean" />
<asp:Parameter Name="Id" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<ext:Store ID="RecordsIWantStore" runat="server" DataSourceID="RecordsIWantSqlDataSource"
OnAfterRecordInserted="RecordsIWantStore_AfterRecordInserted">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Mapping="Id" Type="Int" SubmitEmptyValue="Null" />
<ext:ModelField Name="Record_Name" Mapping="Record_Name" Type="String" />
<ext:ModelField Name="Year_Released" Mapping="Year_Released" Type="Int" />
<ext:ModelField Name="In_Collection" Mapping="In_Collection" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<div>
<br />
<ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="RecordsIWantGridPanel" runat="server" Height="300" Title="Records I Want" StoreID="RecordsIWantStore">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="tbbAdd" Icon="Add" Text="Insert" runat="server">
<Listeners>
<Click Handler="insertRecord(#{RecordsIWantGridPanel});" />
</Listeners>
</ext:Button>
<ext:Button runat="server" ID="tbbDelete" Icon="Delete" Text="Delete Selected Records">
<Listeners>
<Click Handler="#{RecordsIWantGridPanel}.deleteSelected();" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator></ext:ToolbarSeparator>
<ext:Button runat="server" ID="tbbSave" Icon="Disk" Text="Save">
<Listeners>
<Click Handler="#{RecordsIWantStore}.sync();" />
</Listeners>
</ext:Button>
<ext:ToolbarSeparator></ext:ToolbarSeparator>
<ext:Button runat="server" ID="tbbRefresh" Icon="ArrowRefresh" Text="Refresh">
<Listeners>
<Click Handler="#{RecordsIWantStore}.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column runat="server" Flex="1" ID="Record_NameColumn" Header="Record Name" Sortable="true" DataIndex="Record_Name">
<Editor>
<ext:TextField runat="server" AllowBlank="false" MaxLength="200" />
</Editor>
</ext:Column>
<ext:Column runat="server" Flex="1" ID="Year_ReleasedColumn" Header="Year Released" Sortable="true" DataIndex="Year_Released">
<Editor>
<ext:NumberField runat="server" AllowBlank="true" MaxLength="4" />
</Editor>
</ext:Column>
<ext:CheckColumn runat="server" Flex="1" ID="In_Collection" Header="In Collection?" Sortable="true" DataIndex="In_Collection" Editable="true">
</ext:CheckColumn>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server" />
</Plugins>
</ext:GridPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>
Code-behind:
Code:
protected void RecordsIWantStore_AfterRecordInserted(object sender, Ext.Net.AfterRecordInsertedEventArgs e)
{
e.Keys.Add("Id", 0);
}
The gridpanel updates after the record is inserted, and deletes and edits work fine (gridpanel does what it's supposed to do), but if I click the refresh button that fires the reload method of the store, the gridpanel goes blank. Any pointers or insights would be appreciated.
