EXT.net - Grid Panel via Entity with DropDowns, Dates, Pin Editing and Deletion - model-view-controller

Question

Title sounds like a real mouthful, so let me try to explain this. I'm very strong with grinding out Web Forms and this is my second crack at using a framework and MVC (don't ask about the first one). Start with a table like this:
Title: Milestones
Id int - Auto, PK
Project_Id int - FK, Many Milestones to One Project, Provided static for now
Number int
Name varchar(50)
Status_Id int - FK One Status to One Milestone
PlannedDate date
LatestEstimate date
MilestoneType_ID int - FK One Type to One Milestone
These all sit on an SQL server, are pulled in by an Entity and then are pulled in by an ObjectDataSource, like this:
<asp:ObjectDataSource runat="server" ID="MilestonesObjectSource" SelectMethod="GetByProject"
DeleteMethod="DeleteMilestone" TypeName="TCProjectManagement.Models.MilestonesAddition">
<SelectParameters>
<asp:Parameter DefaultValue="6" Name="ProjectID" Type="Int32" />
</SelectParameters>
<DeleteParameters>
<asp:Parameter Type="Int32" Name="Id" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Type="Int32" Name="Id" />
<asp:Parameter Type="Int32" Name="Number" />
<asp:Parameter Type="String" Name="Name" />
<asp:Parameter Type="Int32" Name="Status_Id" />
<asp:Parameter Type="DateTime" Name="PlannedDate" />
<asp:Parameter Type="DateTime" Name="LatestEstimate" />
<asp:Parameter Type="Int32" Name="MilestoneType_ID" />
</UpdateParameters>
</asp:ObjectDataSource>
Sofar so good. Data pull seems to work out okay. I've got a couple more Object Sources that deal exclusively with the Foriegn Keys, so I'll skip those since they seem to be working.
The problems I have are attempting to stitch together many examples that don't seem to go together well. My objectives, in no paticular order:
1) Pin Editing: Click a button to edit, click it again to confirm. Rather do this than have somebody infer to double click for a change. Sofar, this sorta works.
2) Drop Downs for Foriegn Keys: While not in edit mode, should display the "Name" field of the FK. While in edit it should be a Drop Down for options (there's only three). This stays blank dispite what I do.
3) Deletion: Press a button to blow away a row. I put the button there but it's a copy of the JS for editing. What do I need to use to have it be deletion?
4) Dates: This doesn't work at all. One of the weird parts is that from the SQL server's type of Date, it gets changed to DateTime in the Entity and stays that way throughout. However, I cannot get the desired control of ext:DateField to cooperate with the provided data since it displays a time and completely blanks out when editing.. I know I'm doing something wrong here.
5) Saving Changes: Not quite sure I set it up right (or at all).
Provisions of Javascript:
<script type="text/javascript">
var pinEditors = function (btn, pressed) {
var columnConfig = btn.column,
column = columnConfig.column;
if (pressed) {
column.pinOverComponent();
column.showComponent(columnConfig.record, true);
} else {
column.unpinOverComponent();
column.hideComponent(true);
}
};
var pinDeleters = function (btn, pressed) { };
</script>
And ASP Code:
<ext:GridPanel ID="MilestonesGridPanel" runat="server" Title="Milestones" Width="1000px"
Height="300px">
<Store>
<ext:Store ID="MilestonesGridStore" runat="server" DataSourceID="MilestonesObjectSource">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Number" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Status_Id" Type="Int" />
<ext:ModelField Name="PlannedDate" />
<ext:ModelField Name="LatestEstimate" />
<ext:ModelField Name="MilestoneType_ID" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="IdColumn" runat="server" DataIndex="Id" Text="DBID" Visible="false" />
<ext:ComponentColumn ID="NumberColumn" runat="server" DataIndex="Number" OverOnly="true"
Pin="true" Flex="1" Text="Number" Editor="true">
<Component>
<ext:NumberField ID="NumberColumnNumberField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="NameColumn" runat="server" DataIndex="Name" OverOnly="true"
Pin="true" Flex="1" Text="Name" Editor="true">
<Component>
<ext:TextField ID="NameColumnTextField" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="StatusColumn" runat="server" DataIndex="Status_Id" OverOnly="true"
Pin="true" Flex="1" Text="Status" Editor="true">
<Component>
<ext:ComboBox ID="StatusColumnDropDownBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneStatusStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="PlannedDateColumn" runat="server" DataIndex="PlannedDate"
OverOnly="true" Pin="true" Flex="1" Text="Planned Date" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="PlannedDateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="LatestEstimateColumn" runat="server" DataIndex="LatestEstimate"
OverOnly="true" Pin="true" Flex="1" Text="Latest ETA" Editor="true">
<Renderer Format="Date" FormatArgs="'m/d/y'" />
<Component>
<ext:DateField ID="LatestEstimateColumnTextField" runat="server" Format="MM/dd/yyyy"
EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="MilestoneTypeColumn" runat="server" DataIndex="MilestoneType_ID"
OverOnly="true" Pin="true" Flex="1" Text="Milestone Type" Editor="true">
<Component>
<ext:ComboBox ID="MilestoneTypeColumnComboBox" runat="server" QueryMode="Local" Editable="false"
StoreID="MilestoneTypesStore" DisplayField="Name" ValueField="ID" EmptyText="Empty" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="EditColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Edit" Sortable="False">
<Component>
<ext:Button ID="EditButton" runat="server" ToolTip="Pin Editors" Icon="Pencil" AllowDepress="true"
EnableToggle="true" Width="25">
<Listeners>
<Toggle Fn="pinEditors" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="DeleteColumn" runat="server" Width="30" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true" Text="Delete" Sortable="False">
<Component>
<ext:Button ID="DeleteButton" runat="server" ToolTip="Delete Milestone" Icon="Delete"
AllowDepress="true" EnableToggle="false" Width="25">
<Listeners>
<Click Handler="#{MilestonesGridStore}.remove(this.parentMenu.dataRecord)" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single">
<Listeners>
<Select Handler="#{DeleteMilestoneGridButton}.enable();" />
<Deselect Handler="if (!#{MilestonesGridPanel}.selModel.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Buttons>
<ext:Button ID="AddtoMilestoneGridButton" runat="server" Text="Insert" Icon="Add">
<Listeners>
<Click Handler="#{MilestonesGridStore}.insert(0, {}); #{MilestonesGridPanel}.editingPlugin.startEditByPosition({row:0, column:0});" />
</Listeners>
</ext:Button>
<ext:Button ID="DeleteMilestoneGridButton" runat="server" Text="Delete" Icon="Delete"
Disabled="true">
<Listeners>
<Click Handler="#{MilestonesGridPanel}.deleteSelected();
if (!#{MilestonesGridPanel}.hasSelection()) {
#{DeleteMilestoneGridButton}.disable();
}" />
</Listeners>
</ext:Button>
<ext:Button ID="RefreshMilestonesGridButton" runat="server" Text="RefresH" Icon="Reload">
<Listeners>
<Click Handler="#{MilestonesGridStore}.load();" />
</Listeners>
</ext:Button>
<ext:Button ID="SaveMilestoneGridButton" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{MilestonesGridStore}.sync();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:GridPanel>