PDA

View Full Version : [CLOSED] [#491] Populate Icon ComboBox during DirectEvent



prost
May 15, 2014, 10:48 AM
Hi,
I need to populate a combobox during a DirectEvent (it must also be possible that it is a custom image instead of an Ext.NET icon).

Following sample does not work:


<%@ 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)
{

}


public void OnPopulateComboButtonClick(object sender, DirectEventArgs e)
{
Store store = this.ComboBox1.GetStore();


store.DataSource = new object[]
{
new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"}
};


store.DataBind();


this.ResourceManager1.RegisterIcon(Icon.FlagFr);
this.ResourceManager1.RegisterIcon(Icon.FlagCa);
this.ResourceManager1.RegisterIcon(Icon.FlagDe);
this.ResourceManager1.RegisterIcon(Icon.FlagUs);
this.ResourceManager1.RegisterIcon(Icon.FlagIt);
}

</script>


<html>
<head id="Head1" runat="server">
<title>IconCombo - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.icon-combo-item {
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px !important;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />


<h1>Render an Icon in ComboBox data items</h1>


<ext:Button ID="PopulateComboButton" runat="server" Text="Populate combo">
<DirectEvents>
<Click OnEvent="OnPopulateComboButtonClick" />
</DirectEvents>
</ext:Button>


<ext:ComboBox
ID="ComboBox1"
runat="server"
Width="250"
Editable="false"
DisplayField="name"
ValueField="name"
QueryMode="Local"
TriggerAction="All"
EmptyText="Select a country...">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="icon-combo-item {iconCls}">
{name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Handler="if(this.valueModels.length>0){this.setIconCls(this.valueModels[0].get('iconCls'));}" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>




When adding a custom image, I use following method to register a style:


X.ResourceManager.RegisterClientStyleBlock();

This method also seems not to work in a DirectEvent.

Hope you can help, thx.

Daniil
May 15, 2014, 3:26 PM
Hi @prost,

Thank you for the report. Created an Issue.
https://github.com/extnet/Ext.NET/issues/491

It has been fixed in the trunk, revision #5846.

Now this example works.

Example

<%@ Page Language="C#" %>

<script runat="server">
public void OnPopulateComboButtonClick(object sender, DirectEventArgs e)
{
Store store = this.ComboBox1.GetStore();

store.DataSource = new object[]
{
new object[] { ResourceManager.GetIconClassName(Icon.FlagFr), "France"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagCa), "Canada"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagDe), "Germany"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagUs), "United States"},
new object[] { ResourceManager.GetIconClassName(Icon.FlagIt), "Italy"},
new object[] { "testIcon", "TestIcon"}
};

store.DataBind();

this.ResourceManager1.RegisterIcon(Icon.FlagFr);
this.ResourceManager1.RegisterIcon(Icon.FlagCa);
this.ResourceManager1.RegisterIcon(Icon.FlagDe);
this.ResourceManager1.RegisterIcon(Icon.FlagUs);
this.ResourceManager1.RegisterIcon(Icon.FlagIt);
X.ResourceManager.RegisterClientStyleBlock("testIcon", ".testIcon { background-image: url(resources/images/test.png); }");
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style>
.icon-combo-item {
background-repeat: no-repeat !important;
background-position: 3px 50% !important;
padding-left: 24px !important;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Button runat="server" Text="Populate ComboBox" OnDirectClick="OnPopulateComboButtonClick" />

<ext:ComboBox
ID="ComboBox1"
runat="server"
Width="250"
Editable="false"
DisplayField="name"
ValueField="name"
QueryMode="Local"
TriggerAction="All"
EmptyText="Select a country...">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="iconCls" />
<ext:ModelField Name="name" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl runat="server">
<Html>
<div class="icon-combo-item {iconCls}">
{name}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Listeners>
<Change Handler="if(this.valueModels.length>0){this.setIconCls(this.valueModels[0].get('iconCls'));}" />
</Listeners>
</ext:ComboBox>
</form>
</body>
</html>

prost
May 16, 2014, 1:26 PM
Works, Thanks!