Hello, webclouder!
Please look at this example:
<!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>
You just use the wrong value for the icon config item. It looks like this:
icon: "/icons/application_side_list-png/ext.axd"
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:
<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>
There are all icons in The Icon enum.