ComboBox "renderer" after selection in GridPanel

  1. #1

    ComboBox "renderer" after selection in GridPanel



    Here is the code for the GridPanel, whenever I select "Corrector" for example, it still shows Proctor (the original selection) how do I make the Renderer use "Corrector" or "Research Assistant" whatever I select in the ComboBox?

    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head id="Head1" runat="server">
    
    
    <title>UOHMS</title>
    
    
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    
    <script type="text/javascript">
    
    
    var customDate = function(value) {
    
    
    if (value == 'Tue Jan 1 00:00:00 EST 1901') { 
    
    
    return '';
    
    
    } else {
    
    
    return Ext.util.Format.date(value, 'd/m/Y');
    
    
    }
    
    
    }
    
    
    </script>
    
    
    <script runat="server">
    
    
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
    
    If (Ext.IsAjaxRequest = False) Then
    
    
    
    
    
    stoJobClassList.DataSource = New Object() { _
    
    
    New Object() {"CO", "Corrector"}, _
    
    
    New Object() {"PC", "Proctor"}, _
    
    
    New Object() {"RA", "Research Assistant"}, _
    
    
    New Object() {"TA", "Teaching Assistant"}, _
    
    
    New Object() {"TU", "Tutor"} _
    
    
    }
    
    
    Me.stoJobClassList.DataBind()
    
    
    
    
    
    stoRateTypeList.DataSource = New Object() { _
    
    
    New Object() {"SG", "Student Graduate"}, _
    
    
    New Object() {"SU", "Student Undergraduate"} _
    
    
    }
    
    
    Me.stoRateTypeList.DataBind()
    
    
    
    
    
    stoJobClassRate.DataSource = New Object() { _
    
    
    New Object() {"1", "PC", "Proctor", "SU", "Student Undergraduate", "2009-01-01T00:00:00", "", 17.21, 21.55, "bmagyar", "2009-01-27T10:05:09"}, _
    
    
    New Object() {"2", "RA", "Research Assistant", "SG", "Student Graduate", "2009-01-01T00:00:00", "", 22.4, 21.55, "bmagyar", "2009-01-27T10:05:09"}, _
    
    
    New Object() {"3", "TA", "Teaching Assistant", "SG", "Student Graduate", "2009-01-01T00:00:00", "", 18.32, 21.55, "bmagyar", "2009-01-27T10:05:09"} _
    
    
    }
    
    
    Me.stoJobClassRate.DataBind()
    
    
    
    
    
    End If
    
    
    End Sub
    
    
    </script>
    
    
    </head>
    
    
    <body>
    
    
    <form id="form1" runat="server">
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    
    
    <ext:Store ID="stoJobClassList" runat="server">
    
    
    <Reader>
    
    
    <ext:ArrayReader ReaderID="ID">
    
    
    <Fields>
    
    
    <ext:RecordField Name="CodeName" />
    
    
    <ext:RecordField Name="CodeValue" />
    
    
    </Fields>
    
    
    </ext:ArrayReader>
    
    
    </Reader>
    
    
    </ext:Store>
    
    
    <ext:Store ID="stoRateTypeList" runat="server">
    
    
    <Reader>
    
    
    <ext:ArrayReader ReaderID="ID">
    
    
    <Fields>
    
    
    <ext:RecordField Name="CodeName" />
    
    
    <ext:RecordField Name="CodeValue" />
    
    
    </Fields>
    
    
    </ext:ArrayReader>
    
    
    </Reader>
    
    
    </ext:Store>
    
    
    
    
    
    <ext:Store ID="stoJobClassRate" runat="server">
    
    
    <Reader>
    
    
    <ext:ArrayReader ReaderID="ID">
    
    
    <Fields>
    
    
    <ext:RecordField Name="TableKey" />
    
    
    <ext:RecordField Name="JobClassCode" />
    
    
    <ext:RecordField Name="JobClassDescription" />
    
    
    <ext:RecordField Name="RateCode" />
    
    
    <ext:RecordField Name="RateDescription" />
    
    
    <ext:RecordField Name="StartDate" Type="Date" />
    
    
    <ext:RecordField Name="EndDate" Type="Date" />
    
    
    <ext:RecordField Name="RegularRate" Type="Float" />
    
    
    <ext:RecordField Name="VacationRate" Type="Float" />
    
    
    <ext:RecordField Name="UpdateUserID" />
    
    
    <ext:RecordField Name="UpdateTimestamp" Type="Date" />
    
    
    </Fields>
    
    
    </ext:ArrayReader>
    
    
    </Reader>
    
    
    </ext:Store>
    
    
    
    
    
    <table cellpadding="0" cellspacing="0">
    
    
    <tr valign="top">
    
    
    <td>
    
    <ext:GridPanel runat="server" ID="grdJobClassRate" Title="Edit Rates Table" Frame="true" 
    
    
    StoreID="stoJobClassRate" Height="360" Width="620">
    
    
    <ColumnModel ID="clmJobClassRate" runat="server">
    
    
    <Columns>
    
    
    <ext:Column DataIndex="JobClassCode" Header="Job Class" Width="130">
    
    
    <Renderer Handler="return record.data['JobClassDescription'];" />
    
    
    <Editor>
    
    
    <ext:ComboBox 
    
    
    ID="cbEditJobClass"
    
    
    runat="server" 
    
    
    Width="160"
    
    
    FieldLabel="Job Class"
    
    
    StoreID="stoJobClassList" 
    
    
    Editable="true"
    
    
    DisplayField="CodeValue"
    
    
    ValueField="CodeName"
    
    
    TypeAhead="true" 
    
    
    Mode="Local"
    
    
    ForceSelection="true"
    
    
    TriggerAction="All"
    
    
    EmptyText="Select..."
    
    
    StyleSpec="background-color:#FFFF99;" 
    
    
    SelectOnFocus="true">
    
    
    <SelectedItem Value="" />
    
    
    </ext:ComboBox> 
    
    
    </Editor> 
    
    
    </ext:Column>
    
    
    <ext:Column DataIndex="RateCode" Header="Rate Type" Width="150">
    
    
    <Renderer Handler="return record.data['RateDescription'];" />
    
    
    <Editor>
    
    
    <ext:ComboBox 
    
    
    ID="cbEditRateType"
    
    
    runat="server" 
    
    
    Width="160"
    
    
    FieldLabel="Rate Type"
    
    
    StoreID="stoRateTypeList" 
    
    
    Editable="true"
    
    
    DisplayField="CodeValue"
    
    
    ValueField="CodeName"
    
    
    TypeAhead="true" 
    
    
    Mode="Local"
    
    
    ForceSelection="true"
    
    
    TriggerAction="All"
    
    
    EmptyText="Select..."
    
    
    StyleSpec="background-color:#FFFF99;" 
    
    
    SelectOnFocus="true">
    
    
    <SelectedItem Value="" />
    
    
    </ext:ComboBox> 
    
    
    </Editor> 
    
    
    </ext:Column>
    
    
    <ext:Column DataIndex="StartDate" Header="Effective" Width="90">
    
    
    <Renderer Fn="customDate" />
    
    
    <Editor>
    
    
    <ext:DateField ID="datEditStartDate" runat="server" />
    
    
    </Editor>
    
    
    </ext:Column>
    
    
    <ext:Column DataIndex="EndDate" Header="Expires" Width="90">
    
    
    <Renderer Fn="customDate" />
    
    
    <Editor>
    
    
    <ext:DateField ID="datEditEndDate" runat="server" />
    
    
    </Editor>
    
    
    </ext:Column>
    
    
    <ext:Column DataIndex="RegularRate" Header="Reg Rate" Width="65">
    
    
    <Editor>
    
    
    <ext:TextField ID="txtRegularRate" runat="server" />
    
    
    </Editor>
    
    
    </ext:Column>
    
    
    <ext:Column DataIndex="VacationRate" Header="Vac Rate" Width="65">
    
    
    <Editor>
    
    
    <ext:TextField ID="txtVacationRate" runat="server" />
    
    
    </Editor>
    
    
    </ext:Column> 
    
    
    </Columns>
    
    
    </ColumnModel>
    
    
    <Buttons>
    
    
    <ext:Button ID="btnCreateNew" runat="server" Text="Create New" Icon="Add">
    
    
    <Listeners>
    
    
    <Click Handler="#{winCreateNew}.show();" />
    
    
    </Listeners>
    
    
    </ext:Button>
    
    
    <ext:Button ID="btnDeleteRow" runat="server" Text="Delete Row" Icon="Delete">
    
    
    <Listeners>
    
    
    <Click Handler="#{winCreateNew}.show();" />
    
    
    </Listeners>
    
    
    </ext:Button>
    
    
    </Buttons>
    
    
    </ext:GridPanel> 
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    
    
    
    </form>
    
    
    </body>
    
    
    </html>
  2. #2

    RE: ComboBox "renderer" after selection in GridPanel

  3. #3

    RE: ComboBox "renderer" after selection in GridPanel

    That works great! A point to note for anyone trying, pay attention to "ReaderID" in your JsonReader or ArrayReader, I did not have that set originally from a previous Store and it wouldn't work properly... once I set it to my key field "CodeName" it worked perfectly.

Similar Threads

  1. Replies: 3
    Last Post: Oct 05, 2012, 11:44 AM
  2. Replies: 2
    Last Post: Sep 01, 2010, 11:28 AM
  3. Replies: 18
    Last Post: Apr 14, 2010, 2:00 PM
  4. Combobox Renderer in Gridpanel bug
    By Washburn in forum 1.x Help
    Replies: 19
    Last Post: Apr 27, 2009, 10:06 AM
  5. Replies: 5
    Last Post: Mar 23, 2009, 7:43 PM

Posting Permissions