Nov 20, 2014, 7:49 AM
Setting different background colors for the combobox inside a gridpanel.
I could able to set different background colors for the combobox values. Below is the coed for that.
Now I want the same inside a Gridpanel. A combobox with different background colors inside a gridpanel. I have tried something like dis below. But it is not working. Please help.
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="color" />
<ext:ModelField Name="bgcolor" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="applyFilter(this)" />
<AfterRender Handler="applyFilter(this)" />
<%-- <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
</Listeners>
<ListConfig>
<Tpl ID="Tpl1" runat="server">
<Html>
<ul class="x-list-plain">
<tpl for=".">
<li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
{text}
</li>
</tpl>
</ul>
</Html>
</Tpl>
</ListConfig>
</ext:ComboBox>
Now I want the same inside a Gridpanel. A combobox with different background colors inside a gridpanel. I have tried something like dis below. But it is not working. Please help.
<ext:GridPanel ID="GridPanel1"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store2" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<%-- <ext:ComponentColumn ID="ComponentColumn1"
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField ID="NumberField1" runat="server" />
</Component>
</ext:ComponentColumn>--%>
<ext:ComponentColumn ID="ComponentColumn2"
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox ID="ComboBox2" runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn runat="server" ID="compo3">
<Component>
<ext:ComboBox
ID="ComboBox3"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store ID="Store3" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
<ext:ModelField Name="color" />
<ext:ModelField Name="bgcolor" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<Listeners>
<Select Handler="applyFilter(this)" />
<AfterRender Handler="applyFilter(this)" />
<%-- <SpecialKey Fn="PreventEscape" PreventDefault="true" />--%>
</Listeners>
<ListConfig>
<Tpl ID="Tpl2" runat="server">
<Html>
<ul class="x-list-plain">
<tpl for=".">
<li role="option" class="x-boundlist-item" style="font-weight:bold; text-align:center; background-color:{bgcolor}; color:{color}">
{text}
</li>
</tpl>
</ul>
</Html>
</Tpl>
</ListConfig>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>