Printable View
hi,
i'm adding items to menu of button dynamically from the client side put the icon is not working work!
i want to use same icons available and built in with Ext.Net from the client-side! please help.Code:btnAddNewSection.menu.addItem({ text: sectionTitle, icon: "ApplicationSideList", listeners: { click: { fn: function(el) { addNewSection(sId); } }} });
Hello, webclouder!
Please look at this example:
You just use the wrong value for the icon config item. It looks like this:Code:<!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 runat="server">
<title></title>
<ext:ResourcePlaceHolder runat="server" Mode="Script"/>
<script type="text/javascript">
Ext.onReady(function() {
btnAddNewSection.menu.addItem(
{
text: "Dynamically added item",
icon: "/icons/application_side_list-png/ext.axd",
listeners: {
click: {
fn: function(el) {
addNewSection(sId);
}
}
}
});
});
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<ext:Button ID="btnAddNewSection" runat="server" Text="Text">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</form>
</body>
</html>
There is the second way to do it. You could use the iconCls property but firstly you have to register an icon using the RegisterIcon method of ResourceManager control. Please look at this:Code:icon: "/icons/application_side_list-png/ext.axd"
There are all icons in The Icon enum.Code:<script runat="server">
protected void Page_Init(object sender, EventArgs e)
{
this.ResourceManager1.RegisterIcon(Icon.ApplicationSideList); //There are all icons in The Icon enum
}
</script>
<!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 runat="server">
<title></title>
<ext:ResourcePlaceHolder runat="server" Mode="Script" />
<script type="text/javascript">
Ext.onReady(function() {
btnAddNewSection.menu.addItem(
{
text: "Dynamically added item",
iconCls: "icon-applicationsidelist",
listeners: {
click: {
fn: function(el) {
addNewSection(sId);
}
}
}
});
});
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<form id="form1" runat="server">
<ext:Button ID="btnAddNewSection" runat="server" Text="Text">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="GroupAdd" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="GroupDelete" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="GroupEdit" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</form>
</body>
</html>
To get an icon url on your machine you can use the GetIconUrl method of a ResourceManager control.Quote:
You just use the wrong value for the icon config item. It looks like this:
Code:icon: "/icons/application_side_list-png/ext.axd"
Code:this.ResourceManager1.GetIconUrl(Icon.ApplicationSideList);