Queries on a few Extjs 6 Features

Page 1 of 2 12 LastLast
  1. #1

    Queries on a few Extjs 6 Features

    Hi ... I'm an early adopter of the early ext.net releases. Been away for awhile and very happy to see an Ext.Net 4 release based on extjs 6. Congrats. Very keen to look at some implementation scenarios. Having played with the examples I have a couple of questions.

    1. The Treelist Widget (http://examples.sencha.com/extjs/6.0...ink/#tree-list) - has it been ported across with the Nav and Micro options?

    2. Font Icons (packages). Are the Font-Awesome/Pictos packages built-in with the Triton theme? I still only see the much older Silk icons in the examples.

    3. Theming. Are we able to work with SASS/Mixins for Triton? I suspect we'll need Architect to do so simply?

    I hope you don't mind answering these points.

    Great to see the Modern toolkit will also form the basis of an Ext.Net Mobile release in the future. You guys continue to do an outstanding job - particularity in the support department (which has always been first rate in my experience).
  2. #2
    Is this the wrong forum for these queries?
    Thanks in advance.
  3. #3
    Hello @Adrian,

    First of all, thank you for the kind words and we are happy to hear you are back to Ext.NET!

    I apologize for the slow response.

    1. The Treelist Widget (ExtJS example) - has it been ported across with the Nav and Micro options?
    The Tree List Widget has not been incorporated yet. It is logged in Github issues - #958. Certainly, each request of this functionality increases its priority for implementation.

    2. Font Icons (packages). Are the Font-Awesome/Pictos packages built-in with the Triton theme? I still only see the much older Silk icons in the examples.
    The FontAwesome package is built-in. You can use FontAwesome icons with ease without manual including of FontAwesome fonts and CSS rules. Please see the example below.

    As for the Pictos package it is not included in the Triton theme in ExtJS by default. Therefore, it was not built-in into Triton in Ext.NET as well. Your request caused us to build it in - the issue #1310. It was already incorporated in the "ExtJS_602" branch which is the source for Ext.NET 4.1.0 that is going to be released soon.

    As for the old Silk icons. Yes, it is still used in Ext.NET and in some Ext.NET Examples, but I don't only see them in the examples. I would rather say I mostly see FontAwesome icons. It is used in the Triton theme itself. So, most of the components use FontAwesome. The Examples tree nodes on the left are all FontAwesome icons. Yes, Silk icons are still in place, but we are in the process to migrate to FontAwesome icons as much as possible.

    The example below demonstrates the usage of FontAwesome and Pictos icons with Ext.NET. Please note that the FontAwesome example's part is working right away with Ext.NET 4.0.0, but the Pictos one will start working with the next 4.1.0 release or with ExtJS_602 branch which is under active development (note: the ExtJS_602 branch and all other Ext.NET sources are available for Premium Support subscribers only).

    Example
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v4 Example</title>
    </head>
    <body style="padding: 20px;">
        <form runat="server">
            <ext:ResourceManager runat="server" Theme="Triton" />
    
            <h3>
                <a href="http://fortawesome.github.io/Font-Awesome/icon/balance-scale">FontAwesome Balance Scale Icon</a> via Glyph
            </h3>
    
            <ext:Container runat="server" Layout="HBoxLayout">
                <Defaults>
                    <ext:Parameter Name="margin" Value="5" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:Button 
                        runat="server" 
                        Text="FontAwesome Balance Scale" 
                        GlyphSpec="xf24e@FontAwesome" 
                        Scale="Small" />
    
                    <ext:Button 
                        runat="server" 
                        Text="FontAwesome Balance Scale" 
                        GlyphSpec="xf24e@FontAwesome" 
                        Scale="Medium" />
    
                    <ext:Button 
                        runat="server" 
                        Text="FontAwesome Balance Scale" 
                        GlyphSpec="xf24e@FontAwesome" 
                        Scale="Large" />
                </Items>
            </ext:Container>
    
            <h3>
                <a href="http://fortawesome.github.io/Font-Awesome/icon/home">FontAwesome Home Icon</a> via IconCls
            </h3>
    
            <ext:Panel 
                runat="server" 
                IconCls="x-fa fa-home" 
                Title="FontAwesome Home Icon via IconCls" 
                Html="I am a Panel with a FontAwecome icon in my header"
                Width="400" />
    
            <h3>
                <a href="http://pictos.cc/classic/font">Pictos Anchor Icon</a> via Glyph
            </h3>
    
            <ext:Container runat="server" Layout="HBoxLayout">
                <Defaults>
                    <ext:Parameter Name="margin" Value="5" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:Button 
                        runat="server" 
                        Text="Pictos Anchor" 
                        GlyphSpec="x0061@Pictos" 
                        Scale="Small" />
    
                    <ext:Button 
                        runat="server" 
                        Text="Pictos Anchor" 
                        GlyphSpec="x0061@Pictos" 
                        Scale="Medium" />
    
                    <ext:Button 
                        runat="server" 
                        Text="Pictos Anchor" 
                        GlyphSpec="x0061@Pictos" 
                        Scale="Large" />
                </Items>
            </ext:Container>
    
            <h3>
                <a href="http://pictos.cc/classic/font">Pictos Home Icon</a> via IconCls
            </h3>
    
            <ext:Panel 
                runat="server" 
                IconCls="pictos pictos-home" 
                Title="Pictos Home Icon via IconCls"
                Html="I am a Panel with a Pictos icon in my header"
                Width="400" />
        </form>
    </body>
    </html>
    3. Theming. Are we able to work with SASS/Mixins for Triton? I suspect we'll need Architect to do so simply?
    Ext.NET doesn't change or add anything here. You can deal with SASS/Mixins in a regular ExtJS way. In my best understanding, the Sencha Architect is not a requirement for dealing with SASS/Mixins. Recently, I was working on generating styles of our custom UI options (Danger, Info, etc) for the Triton theme (the issue #1245) and done everything using solely Sencha CMD.
    Last edited by Daniil; Apr 21, 2016 at 3:59 PM.
  4. #4
    Thank you for the comprehensive reply Daniil. You've answered all my queries.

    I'm definitely keen for the Tree List Widget to be incorporated into Ext.NET - I see it as a fundamental/standard component for admin-type apps these days - so I hope a few other people will jump in here and support its implementation.

    Happy to see FontAwesome + Pictos are now incorporated into the framework (sorry I missed the FontAwesome implementation). And you're right - its fairly trivial to adjust base CSS styles using Sencha CMD.

    PS. Glad to be back and working with Ext.NET 4 and great to see you're still with Ext.NET too Daniil :)
    Adrian.
  5. #5
    I'm definitely keen for the Tree List Widget to be incorporated into Ext.NET - I see it as a fundamental/standard component for admin-type apps these days - so I hope a few other people will jump in here and support its implementation.
    Agree!

    and great to see you're still with Ext.NET too Daniil :)
    Thank you! And I am not going to quit in any foreseeable future:)
  6. #6
    Daniil, i think that something is wrong on the example provided on post #3, at line 47.

    it's necessary to replace
    IconCls="x-fa fa-home"
    By
    IconCls="fa fa-home"
    In addition, i would replace the head element by the following
    <head runat="server">
        <title>Ext.NET v4 Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
    </head>
    Last edited by RaphaelSaldanha; Apr 22, 2016 at 11:45 AM.
  7. #7
    Hello Raphael!

    Thank you for the suggestions.

    Could you, please, clarify why it is required to replace IconCls="x-fa fa-home" with IconCls="fa fa-home"?

    Initially, I used "x-fa fa-home" as recommended in the ExtJS Font Packages guide:
    http://docs.sencha.com/extjs/6.0/cor.../font_ext.html

    I tried with "fa fa-home" and it appears to produce the same result. In my understanding, "fa" is a native FontAwesome CSS class, but "x-fa" is defined in ExtJS. In this example they produces the same result (at least, for me), but I tend to think that using "x-fa" is preferable, because it might contain CSS rules specific to ExtJS/Ext.NET components and a lack of these rules might probably cause issues in other scenarios.

    In addition, i would replace the head element by the following
    Just to clarify - the FontAwesome CSS is built into the Triton theme and being attached automatically to a page. I don't see that including that .css file manually is required. Please elaborate on your suggestion.

    Does the example doesn't not work for you as it is?
  8. #8
    Just to clarify - the FontAwesome CSS is built into the Triton theme and being attached automatically to a page. I don't see that including that .css file manually is required. Please elaborate on your suggestion.
    I think that i missed something. I tested against Crisp theme and on it the .css is not included automatically, so i was required to include it manually.

    I tried with "fa fa-home" and it appears to produce the same result. In my understanding, "fa" is a native FontAwesome CSS class, but "x-fa" is defined in ExtJS. In this example they produces the same result (at least, for me), but I tend to think that using "x-fa" is preferable, because it might contain CSS rules specific to ExtJS/Ext.NET components and a lack of these rules might probably cause issues in other scenarios.
    x-fa fa-home only works on Triton theme and as i said before i tested against Crisp. Sorry for that.

    As your example was intended to run on Triton theme, i think that my suggestions are irrelevant, although it may help anyone that wants to use FontAwesome against a theme other than Triton.
    Last edited by RaphaelSaldanha; Apr 22, 2016 at 4:28 PM.
  9. #9
    Yeah, the FontAwesome and Pictos (as of 4.1.0) font packages are built in the Triton theme only.
  10. #10
    Hi guys - I just wanted to keep this thread alive and encourage the adoption of the Tree List Widget (http://examples.sencha.com/extjs/6.2...ink/#tree-list) for Ext.Net. Hopefully a few other developers here can lend their support to get the component ported across?

    Regards
    Adrian.
Page 1 of 2 12 LastLast

Similar Threads

  1. TreePanel GridFilters (Features not found)
    By millenovanta in forum 2.x Help
    Replies: 1
    Last Post: Sep 15, 2013, 5:07 PM
  2. [CLOSED] Adding custom grid features
    By jchau in forum 2.x Premium Help
    Replies: 4
    Last Post: Dec 24, 2012, 4:58 PM
  3. Calendar control and additional features
    By Tallmaris in forum 1.x Help
    Replies: 1
    Last Post: Aug 18, 2011, 1:00 PM
  4. When the new features will be published ext.net ?
    By thiefo in forum Open Discussions
    Replies: 1
    Last Post: Oct 12, 2010, 2:13 PM
  5. Desktop features
    By Yannis in forum 1.x Help
    Replies: 0
    Last Post: Jun 17, 2010, 6:19 PM

Tags for this Thread

Posting Permissions