Mar 20, 2013, 3:10 AM
[CLOSED] GridPanel ComboBox Editor Icon
Hello,
I am using custom styles in conjunction with item templates and iconCls to get a ComboBox view I need. I could do what I want with a stand-alone combobox but I have problems with using the same combo box as a grid cell editor.
Problems are:
1) When first clicked to edit "Value" column of any row, MyComboEditor.valueModels.length equals zero so I can not set IconCls. Removing the length check causes javascript error.
2) For the proceeding edit cliks, requirement is almost satisfied but combo box editor value is rendered as if there is no Icon so the text appears behind the colored square I place as combo icon.
Here is the sample code:
I am using custom styles in conjunction with item templates and iconCls to get a ComboBox view I need. I could do what I want with a stand-alone combobox but I have problems with using the same combo box as a grid cell editor.
Problems are:
1) When first clicked to edit "Value" column of any row, MyComboEditor.valueModels.length equals zero so I can not set IconCls. Removing the length check causes javascript error.
2) For the proceeding edit cliks, requirement is almost satisfied but combo box editor value is rendered as if there is no Icon so the text appears behind the colored square I place as combo icon.
Here is the sample code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
string Item1Color = "#FF0000";
string Item2Color = "#00FF00";
string Item3Color = "#0000FF";
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { 0, "item1-style", "Item 1", Item1Color},
new object[] { 1, "item2-style", "Item 2", Item2Color},
new object[] { 2, "item3-style", "Item 3", Item3Color},
};
store.DataBind();
System.Web.UI.HtmlControls.HtmlGenericControl mystyles;
mystyles = new System.Web.UI.HtmlControls.HtmlGenericControl();
mystyles.TagName = "style";
mystyles.Attributes.Add("type", "text/css");
string ItemStyles = "";
ItemStyles += ".item1-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item1Color + ";overflow:hidden;}";
ItemStyles += ".item2-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item2Color + ";overflow:hidden;}";
ItemStyles += ".item3-style {background-repeat : no-repeat !important;background-position : 3px 50% !important;padding-left: 10px !important; font-size:10px;padding-left:10px; border:1px solid black;background-color: " + Item3Color + ";overflow:hidden;}";
mystyles.InnerText = ItemStyles;
Page.Header.Controls.Add(mystyles);
ComboBox1.Value = "Item 1";
ComboBox1.IconCls = "item1-style";
List<object> MyList = new List<object>();
for (short i = 0; i < 3; i++)
{
MyList.Add(new
{
ID = i,
ValueID=i
});
}
this.MyStore.DataSource = MyList;
this.MyStore.DataBind();
}
</script>
<script type="text/javascript">
function myRenderer(value) {
return "<span class=" + App.Store1.getById(value).data.itemCls + "> </span> " + App.Store1.getById(value).data.name;
}
</script>
<html>
<head id="Head1" runat="server">
<title>IconCombo - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Render an Icon in ComboBox data items</h1>
<ext:ComboBox ID="ComboBox1" runat="server" Width="400" Editable="false" DisplayField="name" ValueField="ID" LabelWidth="200" FieldLabel="Working stand-alone sample" QueryMode="Local" TriggerAction="All">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="itemCls" />
<ext:ModelField Name="name" />
<ext:ModelField Name="ColorCode" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="App.MyStore.load()"></Load>
</Listeners>
</ext:Store>
</Store>
<Listeners>
<Change Handler="if (this.valueModels.length > 0) { this.setIconCls(this.store.getById(newValue).data.itemCls); }" />
</Listeners>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div>
<span style="font-size:10px; padding-left:10px; border:1px solid black; background-color:{ColorCode}; overflow:hidden;"> </span> {name}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
<ext:GridPanel ID="MyGrid" runat="server" MaxHeight="300" Collapsible="false" Flex="1" Title="My Grid" SelectionMemory="false">
<Store>
<ext:Store ID="MyStore" runat="server" AutoLoad="false">
<Model>
<ext:Model ID="MyStoreModel" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="ValueID" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server" ID="MyColumnModel">
<Columns>
<ext:Column ID="ID" runat="server" Text="ID" DataIndex="ID" Align="Left" Flex="1"/>
<ext:Column ID="MyValue" runat="server" Text="Value" DataIndex="ValueID" Align="Left" Flex="1">
<Renderer Fn="myRenderer"></Renderer>
<Editor>
<ext:ComboBox runat="server" ID="MyComboEditor" DisplayField="name" ValueField="ID" StoreID="Store1">
<ListConfig>
<ItemTpl ID="ItemTpl2" runat="server">
<Html>
<div>
<span style="font-size:10px; padding-left:10px; border:1px solid black; background-color:{ColorCode}; overflow:hidden;"> </span> {name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Handler="if (this.valueModels.length > 0) { this.setIconCls(this.store.getById(newValue).data.itemCls); }"></Change>
</Listeners>
</ext:ComboBox>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server">
<Listeners>
<BeforeEdit Handler="if (App.MyComboEditor.valueModels.length > 0) { App.MyComboEditor.setIconCls(App.Store1.getById(e.value).data.itemCls);}"></BeforeEdit>
</Listeners>
</ext:CellEditing>
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>
Last edited by Daniil; Mar 20, 2013 at 2:11 PM.
Reason: [CLOSED]
Originally Posted by Daniil
