[FIXED] [EE] Tree List IconCls not showing in several themes

  1. #1

    [FIXED] [EE] Tree List IconCls not showing in several themes

    Hi, I want to use the Tree List example in a form, and I see that the icon is only shown in the Triton and Graphite themes.
    Is there any additional setting for the other themes?
    The example that I am seeing is the following:

    https://examples4.ext.net/#/TreePanel/List/Overview/

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Multi Node Tree List built using markup - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
        <script type="text/javascript">
            var syncSettings = function () {
                App.ExpanderOnlyToggle.setChecked(App.TreeList1.getExpanderOnly());
                App.SingleExpandToggle.setChecked(App.TreeList1.getSingleExpand());
                App.MicroToggleBtn.setPressed(App.TreeList1.getMicro());
            }
    
            var handleSEToggle = function (me) {
                if (me.checked) {
                    // If setting Single Expand, collapse everyone to ensure only one
                    // node ever gets expanded. Do not recurse into nodes, as manually
                    // collapsing a node does not collapse its children.
                    App.TreeList1.getStore().getRoot().collapseChildren(false);
                }
    
                App.TreeList1.setSingleExpand(me.checked);
            }
    
            var handleNavToggle = function (button, pressed) {
                var treelist = App.TreeList1,
                    ct = treelist.ownerCt;
    
                treelist.setExpanderFirst(!pressed);
                treelist.setUi(pressed ? 'nav' : null);
                treelist.setHighlightPath(pressed);
                ct[pressed ? 'addCls' : 'removeCls']('treelist-with-nav');
    
                // If switching to Nav while already on Micro, adjust the width
                if (treelist.getMicro()) {
                    ct.setWidth(treelist.toolsElement.getWidth())
                }
    
                if (Ext.isIE8) {
                    this.repaintList(treelist);
                }
            }
    
            var handleMicroToggle = function (me) {
                var tl = App.TreeList1,
                    ct = tl.ownerCt;
                App.TreeList1.setMicro(me.pressed);
    
                if (me.pressed) {
                    tl.macroWidth = ct.getWidth();
                    ct.setWidth(tl.toolsElement.getWidth());
                } else {
                    if (tl.macroWidth === undefined) {
                        tl.macroWidth = 200;
                    }
                    ct.setWidth(tl.macroWidth);
                }
            }
    
            var handleTLSel = function (me, node) {
                var pane = App.SelectionPanel,
                    cn = node,
                    selPath = [];
    
                while (!cn.isRoot()) {
                    selPath.push(cn.data.text);
                    cn = cn.parentNode;
                }
                pane.setHtml("Selected: <br /><b>" + selPath.reverse().join(" > ") + "</b>");
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
                <Listeners>
                    <DocumentReady Fn="syncSettings" />
                </Listeners>
            </ext:ResourceManager>
    
            <h1>Tree List Component Overview</h1>
    
            <p>
                The <b>TreeList</b> component is a simplified and lightweight version of the <b>TreePanel</b>, useful for simple and responsive navigation trees.
            </p>
    
            <ext:Window
                ID="Window1"
                runat="server"
                Title="TreeList"
                IconCls="x-fa fa-gears"
                Width="500"
                Height="450"
                Closable="False"
                Resizable="false"
                Layout="BorderLayout">
                <HeaderConfig runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Options">
                            <Menu>
                                <ext:Menu runat="server" ID="OptionsMenu">
                                    <Items>
                                        <ext:CheckMenuItem
                                            ID="ExpanderOnlyToggle"
                                            runat="server"
                                            Text="Expander Only"
                                            Handler="App.TreeList1.setExpanderOnly(this.checked)" />
                                        <ext:CheckMenuItem ID="SingleExpandToggle" runat="server" Text="Single Expand">
                                            <Listeners>
                                                <CheckChange Fn="handleSEToggle" />
                                            </Listeners>
                                        </ext:CheckMenuItem>
                                    </Items>
                                </ext:Menu>
                            </Menu>
                        </ext:Button>
                        <ext:Button
                            ID="NavToggleBtn"
                            runat="server"
                            Text="Nav"
                            EnableToggle="true">
                            <Listeners>
                                <Toggle Fn="handleNavToggle" />
                            </Listeners>
                        </ext:Button>
                        <ext:Button
                            ID="MicroToggleBtn"
                            runat="server"
                            Text="Micro"
                            EnableToggle="true">
                            <Listeners>
                                <Toggle Fn="handleMicroToggle" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </HeaderConfig>
                <Items>
                    <ext:Panel
                        ID="TreeListPanel"
                        runat="server"
                        Width="250"
                        Border="false"
                        Region="West"
                        Split="true"
                        Scrollable="Both">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:TreeList runat="server" ID="TreeList1">
                                <Listeners>
                                    <SelectionChange Fn="handleTLSel" />
                                </Listeners>
                                <Store>
                                    <ext:TreeStore ID="TreeStore1" runat="server">
                                        <Root>
                                            <ext:Node Expanded="true">
                                                <Children>
                                                    <ext:Node Text="Home" IconCls="x-fa fa-home">
                                                        <Children>
                                                            <ext:Node Text="Messages" IconCls="x-fa fa-inbox" Leaf="true" />
                                                            <ext:Node Text="Archive" IconCls="x-fa fa-database">
                                                                <Children>
                                                                    <ext:Node Text="First" IconCls="x-fa fa-sliders" Leaf="true" />
                                                                    <ext:Node Text="No Icon" IconCls="" Leaf="true" />
                                                                </Children>
                                                            </ext:Node>
                                                            <ext:Node Text="Music" IconCls="x-fa fa-music" Leaf="true" />
                                                            <ext:Node Text="Video" IconCls="x-fa fa-film" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                    <ext:Node Text="Users" IconCls="x-fa fa-user">
                                                        <Children>
                                                            <ext:Node Text="Tagged" IconCls="x-fa fa-tag" Leaf="true" />
                                                            <ext:Node Text="Inactive" IconCls="x-fa fa-trash" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                    <ext:Node Text="Groups" IconCls="x-fa fa-group" Leaf="true" />
                                                    <ext:Node Text="Settings" IconCls="x-fa fa-wrench">
                                                        <Children>
                                                            <ext:Node Text="Sharing" IconCls="x-fa fa-share-alt" Leaf="true" />
                                                            <ext:Node Text="Notifications" IconCls="x-fa fa-flag" Leaf="true" />
                                                            <ext:Node Text="Network" IconCls="x-fa fa-signal" Leaf="true" />
                                                        </Children>
                                                    </ext:Node>
                                                </Children>
                                            </ext:Node>
                                        </Root>
                                    </ext:TreeStore>
                                </Store>
                            </ext:TreeList>
                        </Items>
                    </ext:Panel>
                    <ext:Panel
                        ID="SelectionPanel"
                        runat="server"
                        Region="Center"
                        BodyPadding="10" />
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
  2. #2
    Hello @ibambino, thanks for your interest in the recently added TreeList component, and welcome to Ext.NET forums!

    The icons in the example you pointed uses the IconCls interface, referencing font awesome icon style CSS classes, which are available only on the themes you mentioned (Triton and Graphite).

    For other themes (including trion/graphite), you can use the stock icons. They match better the gray and blue/default/classic themes, but are available on all themes. Here's a list of the available icons in that range: https://examples4.ext.net/#/Miscella.../Icon_Summary/

    Notice here you'll be using Icon= not IconCls.

    In the Triton and Graphite theme you have the Font-awesome icon set. But you can instead just create your own reference to font awesome; I noticed ExtJS styling misses a lot of the icons, so you'd benefit from all available glyphs if you do so, and the awesome theme is free, so you can just include it on your page.

    I believe you can simply follow these two steps on font awesome and have it working to your needs, for any theme:
    1. Include font awesome CSS like explained here (although downloading the font and using local references would be potentially faster than relying in CDN): https://fontawesome.com/how-to-use/o...fonts-with-css
    2. Reference the icons from IconCls the same way as instructed here: https://fontawesome.com/how-to-use/o...cons/basic-use

    Now, I'm not sure why Ext JS does not contain CSS for all glyphs, maybe it has rights just to a subset, which is not necessarily just the free set of glyphs, as they also got some in the regular set. This would need to be further investigated.

    Just if you're asking why, what Ext JS licenses is what Ext.NET licenses, so if Ext JS does not have rightful access to the full font awesome pack, Ext.NET follows; as Ext JS also licensed a paid font pack called Pictos, it probably has Font Awesome licensed; but maybe they either didn't renew the license to an updated glyph set, or they have it licensed but just didn't include the fonts to their own CSS file.

    I hope this covers all the aspects; we should review the example to make it handle showing the icons to the other themes; I just need to think a way to do so without compromising the readability of the example.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again,

    Just for reference, the version Ext.NET includes for font awesome (in the supported themes) is 4.7.0 (list: https://fontawesome.com/v4.7.0/cheatsheet/), so the reason I found some missing is because I was looking at the 5.x version of font awesome, which is now linked by default by the "Font Awesome Cheatsheet" link from Sencha documentation on the available fonts.

    (this also corrects me saying above that some glyphs were missing from the shipped CSS file, it is just font awesome website that opens 5.x list by default now)
    Fabrício Murta
    Developer & Support Expert
  4. #4
    Thank you Fabricio, very clear.
  5. #5
    Hello again, @ilbambino!

    We've fixed the examples by making them include the Font Awesome manually and wrapping the CSS class when in a theme not Graphite/Triton, so that the icons are displayed no matter what theme is chosen.

    We've logged as issues under the respective examples explorers' repositories:
    - WebForms: Issue #24
    - MVC: Issue #9

    Thanks again for reporting the issue. Now we hope the example works on all themes and the required changes does not interfere in understanding the base concept of the component while reviewing the respective examples' source code.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Feb 11, 2015, 4:26 PM
  2. Replies: 1
    Last Post: Nov 10, 2014, 11:38 AM
  3. Replies: 5
    Last Post: Jun 16, 2009, 1:27 PM
  4. [CLOSED] Icons not showing up w/ASP.NET Themes
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 20, 2009, 2:08 AM
  5. Replies: 3
    Last Post: Sep 16, 2008, 3:50 PM

Tags for this Thread

Posting Permissions