Jun 15, 2009, 8:47 AM
How to bind combo box editor in a grid to show/edit referenced objects
Hi,
This a very simple ui. I have a list of computers in a grid. each computer has a link to an operating system. As an experiment, I'm trying to use a combo box to represent the operating system associated with each computer and use it to let user change the operating system. something like order/customer relation in the world.
Unfortunately, it does not show the operating system. On top of that, if you change the OS value and click on save, InvalidCast expetion will raise.
would you please let me know how this should be coded?
Regards
This a very simple ui. I have a list of computers in a grid. each computer has a link to an operating system. As an experiment, I'm trying to use a combo box to represent the operating system associated with each computer and use it to let user change the operating system. something like order/customer relation in the world.
Unfortunately, it does not show the operating system. On top of that, if you change the OS value and click on save, InvalidCast expetion will raise.
would you please let me know how this should be coded?
Regards
<!-- The following code is based on Coolite MVC sample.-->
<body>
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store ID="dsComputer" runat="server" RemoteSort="true" UseIdConfirmation="true">
<Proxy>
<ext:HttpProxy Url="/Computers/PagedOrderedList/" />
</Proxy>
<UpdateProxy>
<ext:HttpWriteProxy Url="/Computers/SaveChangesWithConfirmation/" />
</UpdateProxy>
<Reader>
<ext:JsonReader ReaderID="ID" Root="data">
<Fields>
<ext:RecordField Name="ID" SortDir="ASC"/>
<ext:RecordField Name="Name" />
<ext:RecordField Name="OperatingSystem" />
</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="dsOperatingSystems" runat="server" RemoteSort="true" UseIdConfirmation="true">
<Proxy>
<ext:HttpProxy Url="/OperatingSystems/PagedOrderedList/" />
</Proxy>
<Reader>
<ext:JsonReader ReaderID="ID" Root="data">
<Fields>
<ext:RecordField Name="ID" SortDir="ASC"/>
<ext:RecordField Name="Name" />
</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:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:GridPanel
ID="GridPanel1"
runat="server"
Header="false"
Border="false"
StoreID="dsComputer"
TrackMouseOver="true"
ClicksToEdit="1"
AutoExpandColumn="Name">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ColumnID="ID" DataIndex="ID" Header="ID">
<Editor>
<ext:TextField ID="TextField3" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ColumnID="Name" DataIndex="Name" Header="Name">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ColumnID="OperatingSystem" DataIndex="OperatingSystem" Header="OperatingSystem">
<Editor>
<%--<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />--%>
<ext:ComboBox ID="cmbOperatingSys" runat="server" StoreID="dsOperatingSystems" TypeAhead="true" Mode="Local"
ForceSelection="true" TriggerAction="All" DisplayField="Name" ValueField="ID"
EmptyText="Loading..." ValueNotFoundText="Loading...">
</ext:ComboBox>
</Editor>
</ext:Column>
<ext:CommandColumn Width="25" Hideable="false">
<Commands>
<ext:GridCommand CommandName="edit" Icon="ApplicationFormEdit">
<ToolTip Text="Edit" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
<ext:CommandColumn Width="25" Hideable="false">
<Commands>
<ext:GridCommand CommandName="delete" Icon="Cross">
<ToolTip Text="Delete" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="#{dsComputer}.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="#{dsComputer}.rejectChanges();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="dsComputer" 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>
</body>
