Oct 29, 2010, 3:24 AM
-
-
Oct 29, 2010, 8:43 PMHi,
To add a predefined icon please use the Panel's Icon property.
To add a custom icon please use Panel's IconCls (css class) property. -
Oct 30, 2010, 1:00 AMI'm sorry, maybe you do not clearly understand what I mean.
I want to achieve how to dynamically load the tab, the tab label to the right side to add icons -
Oct 30, 2010, 4:29 AMYou can set the .TabWidth property, see
http://dev.sencha.com/deploy/dev/doc...ember=tabWidth
If that does not solve the problem, please post a code sample demonstrating how you currently have your TabPanel configured. -
Oct 31, 2010, 1:38 AM
Note iconCls: icon,function addTab(tabPanel, id, url, title, icon) { var tab = tabPanel.getComponent(id); if (!tab) { tab = tabPanel.add({ id: id, title: title, closable: true, iconCls: icon, autoLoad: { showMask: true, url: url, mode: 'iframe', maskMsg: 'loading【 ' + title + '】' } }); } tabPanel.setActiveTab(tab); }
No problem with this code.
Node I set the Icon = "ColorWheel" IconCls = "icoticket" IconCls = "icocar" and so on ...<ext:TreeNode Text="UserCenter" Expanded="true" Icon="House" AllowChildren="false"> <Nodes> <ext:TreeNode NodeID="order" Text="My Order" Icon="Cart" Href="Order.aspx" HrefTarget="ExampleTabs" Leaf="true" IconCls="icon-cart"> </ext:TreeNode> <ext:TreeNode Text="TravelServiceManage" Expanded="true" Icon="RainbowStar" AllowChildren="false"> <Nodes> <ext:TreeNode NodeID="tour" Text="Travel" Icon="ColorWheel" Href="Tourmanage.aspx" HrefTarget="ExampleTabs" Leaf="true"> </ext:TreeNode> <ext:TreeNode NodeID="room" Text="House" IconCls="icoroom" Href="Roommanage.aspx" HrefTarget="ExampleTabs" Leaf="true"> </ext:TreeNode> <ext:TreeNode NodeID="car" Text="Car" IconCls="icocar" Href="Carmanage.aspx" HrefTarget="ExampleTabs" Leaf="true"> </ext:TreeNode> <ext:TreeNode NodeID="ticket" Text="Vote" IconCls="icoticket" Href="Ticketmanage.aspx" HrefTarget="ExampleTabs" Leaf="true"> </ext:TreeNode> </Nodes> </ext:TreeNode> <ext:TreeNode NodeID="msg" Text="GhostMsg" Icon="Comments" Href="Msg.aspx" HrefTarget="ExampleTabs" Leaf="true" IconCls="icon-comments"> </ext:TreeNode> <ext:TreeNode NodeID="info" Text="Info" Icon="User" Href="Info.aspx" HrefTarget="ExampleTabs" Leaf="true" IconCls="icon-user"> </ext:TreeNode> </Nodes> </ext:TreeNode>
I also set IconCls = "icon-user" IconCls = "icon-comments"
More ...
Problem has arisen ...
If I write directly to a specific value, no problem, loading can occur when the tab I set the icon.<Listeners> <Click Handler="if(node.isLeaf()){e.stopEvent();addTab(ExampleTabs,node.id,node.attributes.href,node.text,'icon-house');}" /> </Listeners>
But if I use the "node.iconcls" as a parameter, the icon will not appear.
Please help me solve this problem.Last edited by Daniil; Oct 31, 2010 at 8:25 PM. Reason: Please use [CODE] tags -
Oct 31, 2010, 8:29 PMHi,
I'm not sure where the problem is.
Please provide us with a full sample code.
Please see examples of "very helpful examples" here
http://forums.ext.net/showthread.php...ing-New-TopicsLast edited by Daniil; Nov 01, 2010 at 10:49 AM. -
Nov 01, 2010, 1:29 AMHi Daniil :
Sorry
The following is the complete code
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Index.aspx.cs" Inherits = "HHW_ADVISER.Index"%> <% @ Register Assembly = "Coolite.Ext.Web" Namespace = "Coolite.Ext.Web" TagPrefix = "ext"%> <! 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> Hengheng Travel Network - User Management Center </ title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="resources/css/main.css" rel="stylesheet" type="text/css" /> <script src="/extjs/resources/ExampleTab.js" type="text/javascript"> </ script> <script type="text/javascript"> var loadExample = function (href, id) { var tab = ExampleTabs.getComponent (id); if (tab) { ExampleTabs.setActiveTab (tab); } Else { createExampleTab (id, href); } } function addTab (tabPanel, id, url, title, icon) { var tab = tabPanel.getComponent (id); if (! tab) { tab = tabPanel.add ({ id: id, title: title, closable: true, iconCls: icon, autoLoad: { showMask: true, url: url, mode: 'iframe', maskMsg: 'Loading module 【' + title + '】, please wait' } }); } tabPanel.setActiveTab (tab); } var selectionChaged = function (dv, nodes) { if (nodes.length> 0) { var url = nodes [0]. getAttribute ("ext: url"); id = nodes [0]. getAttribute ("ext: id"); loadExample (url, id); } } var viewClick = function (dv, e) { var group = e.getTarget ("h2", 3, true); if (group) { group.up ("div"). toggleClass ("collapsed"); } } </ Script> <style type="text/css"> body {font-family: "Times New Roman", arial; font-size: 12px; color: # 404040;} li {list-style-type: none;} a: link {color: # 404040; text-decoration: none;} a: visited {color: # 404040; text-decoration: none;} a: hover {color: # BA2636; text-decoration: underline;} a: active {color: # 404040;} . Shop_top {height: 53px; background: url (http://www.henghengw.com/shop/lxs/images/shoptop.gif);} . Shop_top_sav {float: right; padding-right: 20px; height: 23px; margin-top: 30px;} . X-tree-node. Icoroom {background-image: url (http://img.henghengw.com/img/ico/ico10.gif);} . X-tree-node. Icocar {background-image: url (http://img.henghengw.com/img/ico/ico11.gif);} . X-tree-node. Icoticket {background-image: url (http://img.henghengw.com/img/ico/ico12.gif);} </ Style> </ Head> <body> <form id="form1" runat="server"> <ext:ScriptManager ID="ScriptManager1" runat="server" Theme="Default"> </ Ext: ScriptManager> <ext:ViewPort ID="ViewPort1" runat="server"> <Body> <ext:BorderLayout ID="BorderLayout1" runat="server"> <North> <Ext: Panel ID = "Panel2" runat = "server" Cls = "images-view" Height = "50" Border = "false" Icon = "House"> <Body> <div class="shop_top"> <span class="shop_top_sav"> <a href="http://www.henghengw.com/index.html"> Hengheng Network Home </ a> | <a href="http://www.henghengw.com/line/index.html"> tour around </ a> | <a href = "http://www.henghengw.com/china/index.html" > Domestic travel </ a> | <a href="http://www.henghengw.com/world/index.html"> outbound travel </ a> | <a href = "http://www.henghengw.com / travel / index.html "> Travel agency </ a> | <a href="http://www.henghengw.com/scenic/index.html"> MICE Travel </ a> | <a Href="http://www.henghengw.com/line/linelist.html"> Travel Alerts </ a> | <a href = 'http://m.henghengw.com/member/login.aspx ' target = '_top'> [log] </ a> <a href='http://m.henghengw.com/member/reg.aspx' target='_top'> [Up] </ a> <a href='http://www.henghengw.com/orderlist.aspx' target='_top'> [View Order] </ a> </ span> </ Div> </ Body> </ Ext: Panel> </ North> <West Collapsible="true" Split="true"> <ext:Panel ID="Panel1" runat="server" Title="Left sidebar" Width="175"> <Body> <ext:FitLayout runat="server"> <Ext: TreePanel ID = "exampleTree" runat = "server" Title = "" AutoScroll = "true" Lines = "True" CollapseFirst = "false" ContainerScroll = "true" RootVisible = "true" AutoShow = "False" ButtonAlign = "Left" Shadow = "None" SingleExpand = "False" Collapsible = "True"> <TopBar> <ext:Toolbar ID="Toolbar1" runat="server"> <Items> <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Style: "/> <Ext: ComboBox ID = "cbTheme" runat = "server" EmptyText = "System skin" Width = "80" Editable = "false" TypeAhead = "true"> <Items> <ext:ListItem Text="Default" Value="Default" /> <ext:ListItem Text="Gray" Value="Gray" /> <ext:ListItem Text="Slate" Value="Slate" /> </ Items> <Listeners> <Select Handler = "Coolite.AjaxMethods.GetThemeUrl (cbTheme.getValue (), {success: function (result) {Coolite.Ext.setTheme (result); ExampleTabs.items.each (function (el) {if (! Ext. isEmpty (el.iframe)) {el.iframe.dom.contentWindow.Coolite.Ext.setTheme (result);}});}}); "/> </ Listeners> </ Ext: ComboBox> <ext:ToolbarFill ID="ToolbarFill1" runat="server" /> <ext:ToolbarButton ID="ToolbarButton1" runat="server" IconCls="icon-expand-all"> <Listeners> <Click Handler="#{exampleTree}.root.expand(true);" /> </ Listeners> <ToolTips> <ext:ToolTip ID="ToolTip1" IDMode="Ignore" runat="server" Html="Expand all" /> </ ToolTips> </ Ext: ToolbarButton> <ext:ToolbarButton ID="ToolbarButton2" runat="server" IconCls="icon-collapse-all"> <Listeners> <Click Handler="#{exampleTree}.root.collapse(true);" /> </ Listeners> <ToolTips> <ext:ToolTip ID="ToolTip2" IDMode="Ignore" runat="server" Html="Merge all" /> </ ToolTips> </ Ext: ToolbarButton> </ Items> </ Ext: Toolbar> </ TopBar> <Root> <ext:TreeNode Text="User Management Center" Expanded="true" Icon="House" AllowChildren="false"> <Nodes> <Ext: TreeNode NodeID = "order" Text = "My Order" Icon = "Cart" Href = "Order.aspx" HrefTarget = "ExampleTabs" Leaf = "true" IconCls = "icon-cart"> </ Ext: TreeNode> <ext:TreeNode Text="Tourism Services Management" Expanded="true" Icon="RainbowStar" AllowChildren="false"> <Nodes> <Ext: TreeNode NodeID = "tour" Text = "Tourism" Icon = "ColorWheel" Href = "Tourmanage.aspx" HrefTarget = "ExampleTabs" Leaf = "true"> </ Ext: TreeNode> <Ext: TreeNode NodeID = "room" Text = "booking" IconCls = "icoroom" Href = "Roommanage.aspx" HrefTarget = "ExampleTabs" Leaf = "true"> </ Ext: TreeNode> <Ext: TreeNode NodeID = "car" Text = "Car" IconCls = "icocar" Href = "Carmanage.aspx" HrefTarget = "ExampleTabs" Leaf = "true"> </ Ext: TreeNode> <Ext: TreeNode NodeID = "ticket" Text = "booking" IconCls = "icoticket" Href = "Ticketmanage.aspx" HrefTarget = "ExampleTabs" Leaf = "true"> </ Ext: TreeNode> </ Nodes> </ Ext: TreeNode> <Ext: TreeNode NodeID = "msg" Text = "Visitor Message" Icon = "Comments" Href = "Msg.aspx" HrefTarget = "ExampleTabs" Leaf = "true" IconCls = "icon-comments"> </ Ext: TreeNode> <Ext: TreeNode NodeID = "info" Text = "Basic Information" Icon = "User" Href = "Info.aspx" HrefTarget = "ExampleTabs" Leaf = "true" IconCls = "icon-user"> </ Ext: TreeNode> </ Nodes> </ Ext: TreeNode> </ Root> <Listeners> <Click Handler="if(node.isLeaf()){e.stopEvent();addTab(ExampleTabs,node.id,node.attributes.href,node.text,node.iconcls);}" /> </ Listeners> </ Ext: TreePanel> </ Ext: FitLayout> <ext:TaskManager ID="TaskManager1" runat="server"> <Tasks> <ext:Task AutoRun="true" Interval="5000"> <AjaxEvents> <Update OnEvent="IsExitsSession"> </ Update> </ AjaxEvents> </ Ext: Task> </ Tasks> </ Ext: TaskManager> </ Body> </ Ext: Panel> </ West> <Center Split="false"> <ext:TabPanel ID="ExampleTabs" runat="server" ActiveTabIndex="0" EnableTabScroll="true"> <Tabs> <Ext: Tab ID = "order" runat = "server" IconCls = "icon-application" Title = "My Order" AutoScroll = "true" Icon = "Cart"> <Body> <ext:FitLayout ID="FitLayout1" runat="server"> <Ext: Panel ID = "HomePanel" runat = "server" Cls = "images-view" Height = ".100" Border = "false" Icon = "House"> <AutoLoad Url="Order.aspx" Mode="IFrame"> </ AutoLoad> <LoadMask Msg="Load Order..." ShowMask="true" /> </ Ext: Panel> </ Ext: FitLayout> </ Body> </ Ext: Tab> </ Tabs> <Plugins> <ext:TabCloseMenu ID="TabCloseMenu1" runat="server" /> </ Plugins> </ Ext: TabPanel> </ Center> </ Ext: BorderLayout> </ Body> </ Ext: ViewPort> </ Form> </ Body> </ Html>
-
Nov 04, 2010, 9:15 PMHi,
Seems I understood where the problem is.
If you would like to use iconCls on client site it needs to register it on server side.
Example
Please note that if IconCls is used in markup registration happens internally.protected void Page_Load(object sender, EventArgs e) { ScriptManager.GetInstance(this.Page).RegisterIcon(Icon.House); }
Similar Threads
-
[CLOSED] How to increase timeout
By wisdomchuck in forum 1.x Legacy Premium HelpReplies: 3Last Post: Jun 29, 2012, 6:38 PM -
How we can increase the Row height of Listview
By NishaLijo in forum 1.x HelpReplies: 1Last Post: Mar 23, 2012, 1:14 PM -
Increase The Height of LadMode.IFrame
By ajay.maddinani in forum 1.x HelpReplies: 0Last Post: Oct 14, 2010, 3:32 AM -
Increase timeout session
By Kamal in forum 1.x HelpReplies: 0Last Post: Jul 15, 2009, 1:29 PM -
How to remove defualt icons and put new icons in tree node.
By abhi_distance in forum 1.x HelpReplies: 0Last Post: Apr 03, 2009, 5:47 AM