Jun 08, 2011, 4:21 PM
how to change cell backcolor in gridpanel checkbox cecked column
Hello everyone, I have a gridpanel with 2 columns that contain a ceckbox, I would change the background color of the checkbox checked on the load cell data.
the gridpanel have RowEditor plugin this is the code of the grid:
And this is the function meRender:
the gridpanel have RowEditor plugin this is the code of the grid:
<%--GRIDPANEL PEAR--%>
<ext:GridPanel ID="gridPanelPear" Layout="Fit" runat="server" StoreID="storePear" AutoExpandColumn="DescrizioneLavorazioni" StripeRows="true">
<%--TOOLBAR PEAR--%>
<TopBar>
<ext:Toolbar ID="ToolBarPear" runat="server">
<Items>
<ext:ToolbarSpacer ID="tblSpacerUno" runat="server"></ext:ToolbarSpacer>
<%--BOTTONE INSERT PEAR--%>
<ext:Button ID="btnInsert" runat="server" Icon="CalculatorAdd" Text="Inserisci Ordine">
<Listeners>
<Click Handler="WindowAddPEAR.show()" />
</Listeners>
<ToolTips>
<ext:ToolTip runat="server" ID="tlpInsertArtPear" Target="btnInsert" Html="Aggiungi nuovo Ordine PEAR">
</ext:ToolTip>
</ToolTips>
</ext:Button>
<%--FINE BOTTONE INSERT PEAR--%>
<ext:ToolbarSeparator ID="tblSeparatoreUno" runat="server"></ext:ToolbarSeparator>
<%--BOTTONE DELETE PEAR--%>
<ext:Button ID="btnDeletePear" runat="server" Icon="CalculatorDelete" Text="Cancella Ordine">
<DirectEvents>
<Click OnEvent="btnDeletePear_Click">
<Confirmation ConfirmRequest="true" Title="Conferma Cancellazione" Message="Sei sicuro di voler cancellare gli Ordini?" />
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
<ToolTips>
<ext:ToolTip runat="server" ID="tlpCancella" Target="btnDeletePear" Html="Cancella Ordini">
</ext:ToolTip>
</ToolTips>
</ext:Button>
<%--FINE BOTTONE DELETE PEAR--%>
<ext:ToolbarSpacer ID="ToolbarSpacerDue" runat="server"></ext:ToolbarSpacer>
<ext:ToolbarSeparator ID="ToolbarSeparatorDue" runat="server"></ext:ToolbarSeparator>
</Items>
</ext:Toolbar>
</TopBar>
<%--FINE TOOLBAR PEAR--%>
<Plugins>
<ext:RowEditor ID="editorPear" runat="server" SaveText="Aggiorna" CancelText="Annulla" CommitChangesText="È necessario accettare o annullare le modifiche" ErrorText="Errore"></ext:RowEditor>
<ext:GridFilters runat="server" ID="GridFiltersPear" Local="true">
<Filters>
<ext:StringFilter DataIndex="CodiceArticoliPearVari" />
<ext:NumericFilter DataIndex="QuantitaVari" />
<ext:DateFilter DataIndex="DataScadenza">
<DatePickerOptions runat="server" TodayText="Now" />
</ext:DateFilter>
</Filters>
</ext:GridFilters>
</Plugins>
<ColumnModel ID="columnModelPear" runat="server">
<Columns>
<ext:Column ColumnID="ID" DataIndex="ID" Hidden="true"></ext:Column>
<ext:RowNumbererColumn />
<ext:Column ColumnID="CodiceArticoliPearVari" Width="150" DataIndex="CodiceArticoliPearVari" Header="Codice Articolo">
<Editor>
<ext:TextField ID="txtCodiceArticoliPearVari" runat="server"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="QuantitaVari" Width="80" DataIndex="QuantitaVari" Header="Quantita">
<Editor>
<ext:TextField ID="txtQuantita" runat="server"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DescrizioneLavorazioni" DataIndex="DescrizioneLavorazioni" Header="Descrizione">
<Editor>
<ext:TextField ID="txtDescrizioneLavorazioni" runat="server"></ext:TextField>
</Editor>
</ext:Column>
<ext:Column ColumnID="DataScadenza" DataIndex="DataScadenza" Width="100" Header="Data Scadenza">
<Renderer Fn="Ext.util.Format.dateRenderer('d-m-Y')" />
<Editor>
<ext:DateField ID="dtfDataScadenza" runat="server"></ext:DateField>
</Editor>
</ext:Column>
<ext:Column ColumnID="Consegnati" Width="80" DataIndex="Consegnati" Header="Consegnati">
<Renderer Fn="meRenderer" />
<Editor>
<ext:Checkbox ID="chkConsegnati" runat="server" Cls="x-editor-center" />
</Editor>
</ext:Column>
<ext:Column ColumnID="InLavorazione" Width="80" DataIndex="InLavorazione" Editable="True" Header="In Lavorazione">
<Renderer Fn="meRenderer" />
<Editor>
<ext:Checkbox ID="chkInLavorazione" runat="server" Cls="x-editor-center" />
</Editor>
</ext:Column>
And this is the function meRender:
<script type="text/javascript" language="javascript">
var meRenderer = function (v, p, record) {
p.css += " x-grid3-check-col-td";
return '<div class="x-grid3-check-col' + (v ? "-on" : "") + " x-grid3-cc-" + this.dataIndex + '"> </div>';
}
</script>
Can anyone help me please?
Thanks a lot
Fabrizio