Sep 25, 2012, 3:52 PM
Grid panel: inserting data via store and objectdatasource fails
I can view and edit existing records in a grid panel, but I cannot create a new record in the database.
Here is my basic example:
Store:
The InsertMethod is not hit when clicking on the btnSaveTest button. Is the call to #{storeTest}.sync(); supposed to update the store and then trigger the call to the InsertMethode?
Is there a better/cleaner way to implement this?
Any suggestions are greately appreciated!
Manni
Here is my basic example:
Store:
<ext:Store ID="storeTest" runat="server" DataSourceID="odsTest" ShowWarningOnFailure="true" RefreshAfterSaving="True">
<Model>
<ext:Model ID="modelTest" runat="server" IDProperty="ID" Name="Test" >
<Fields>
<ext:ModelField Name="ID" Type="Int"/>
<ext:ModelField Name="IntValue" Type="Int"/>
<ext:ModelField Name="StringValue" Type="String"/>
</Fields>
</ext:Model>
</Model>
<Listeners>
<Exception Handler="Ext.Msg.alert('Operation failed', operation.getError());" />
<Write Handler="Ext.Msg.alert('Write', 'The data successfully saved');" />
</Listeners>
</ext:Store>
The grid panel: <ext:GridPanel ID="gridPanelTest" runat="server" Title="Test"
Frame="true" StoreID="storeTest"
Height="600">
<ColumnModel ID="columnModelTest" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="ID" Text="ID" Width="100" />
<ext:Column ID="Column2" runat="server" DataIndex="IntValue" Text="IntValue" Width="150">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" DataIndex="StringValue" Text="StringValue" Width="150">
<Editor>
<ext:TextField ID="TextField2" runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="gvTest" runat="server" >
<GetRowClass Handler="return 'x-grid-row-expanded';" />
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModelTest" runat="server" Mode="Multi" />
</SelectionModel>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbarTest"
runat="server"
StoreID="storeTest"
DisplayInfo="false"
/>
</BottomBar>
<TopBar>
<ext:Toolbar ID="topToolbarTest" runat="server">
<Items>
<ext:Button ID="btnAddTest" runat="server" Text="Add" Icon="Add">
<Listeners>
<Click Fn="addTest" />
</Listeners>
</ext:Button>
<ext:Button ID="btnSaveTest" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{storeTest}.sync();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Plugins>
<ext:RowEditing ID="RowEditingTest" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
</Plugins>
</ext:GridPanel>
The javascript: <ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTest = function () {
var grid = #{gridPanelTest};
grid.editingPlugin.cancelEdit();
var numrow = grid.getStore().getCount();
var newRecord = Ext.ModelManager.create({
ID: numrow+1, // database identity started with 1......
IntValue: 1234,
StringValue: "testing",
}, 'Test');
grid.store.insert(numrow, newRecord);
grid.editingPlugin.startEdit(numrow, 0);
}
</script>
</ext:XScript>
And finally the object data source: <asp:ObjectDataSource ID="odsTest" runat="server"
InsertMethod="InsertTest"
SelectMethod="SelectTest"
UpdateMethod="UpdateTest"
TypeName="Test.Models.Notes">
<InsertParameters>
<asp:Parameter Name="IntValue" Type="Int32" />
<asp:Parameter Name="StringValue" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="ID" Type="Int32" />
<asp:Parameter Name="IntValue" Type="Int32" />
<asp:Parameter Name="StringValue" Type="String" />
</UpdateParameters>
</asp:ObjectDataSource>
</form>
The InsertMethod is not hit when clicking on the btnSaveTest button. Is the call to #{storeTest}.sync(); supposed to update the store and then trigger the call to the InsertMethode?
Is there a better/cleaner way to implement this?
Any suggestions are greately appreciated!
Manni