Results 1 to 7 of 7

Thread: Extjs 6.1 glyph is not working inside Toolbar, which works fine in Extjs 5.1

  1. #1
    Sencha User
    Join Date
    Dec 2010
    Location
    Pasadena, CA
    Posts
    28
    Answers
    1

    Default Answered: Extjs 6.1 glyph is not working inside Toolbar, which works fine in Extjs 5.1

    I am migrating applications to Extjs 5 to Extjs 6. What i found glyph in button inside Toolbar which works fine in Extjs 5.1, is not working in Extjs 6.
    I tried to add in application.js file in launch method,
    Ext.setGlyphFontFamily('FontAwesome');
    then, for My bottom toolbar which extends Toolbar, below is my code,

    Ext.define('BottomToolbar', {
    extend: Ext.toolbar.Toolbar,
    xtype: 'bottomToolbar',
    dock: 'bottom',
    border: false,
    items: [
    {
    xtype: 'tbseparator'
    },
    {
    xtype: 'tbfill'
    },
    {
    xtype: 'button',
    text: 'Refresh',
    glyph: 61473//0xf021 //
    },
    {
    xtype: 'tbseparator'
    },
    {
    xtype: 'button',
    text: 'Save',
    glyph: 61639//0xf0c7

    },
    {
    xtype: 'tbseparator'
    },
    {
    xtype: 'button',
    text: 'Save for Later',
    glyph: 61555
    },
    {
    xtype: 'tbseparator'
    },
    {
    xtype: 'button',
    text: 'Complete',
    glyph: 61452
    }
    ]
    });

    Where as glyph is working fine everywhere except inside Toolbar. Looking for some quick fix.Can any body please tell me, if any thing wrong here in my code. If i will not get solution, i need to use iconCls and save those as image and give there path in css file.

  2. Thanks Alexander, Your solution works on classic theme.That's what i needed. I can fix my issue now.

  3. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi--

    Your code seems to be working as expected (see Fiddle below) in Ext JS 6.0.1.

    https://fiddle.sencha.com/#fiddle/16c9

    Thanks
    Joel

  4. #3
    Sencha User
    Join Date
    Dec 2010
    Location
    Pasadena, CA
    Posts
    28
    Answers
    1

    Default

    Hey Joel,
    Thanks for reply. But, I forget to tell you in my question, I am trying this in Classic View.
    Please try this fiddle with selecting in framework to Ext JS 6.0.1.250 Classic. you can't see the icon. I just tried your fiddle and after changing framework to Ext JS 6.0.1.250 Classic, i can't the icon.
    Thanks
    Ranjay Singh

    Quote Originally Posted by joel.watson View Post
    Hi--

    Your code seems to be working as expected (see Fiddle below) in Ext JS 6.0.1.

    https://fiddle.sencha.com/#fiddle/16c9

    Thanks
    Joel

  5. #4
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Quote Originally Posted by ranjay View Post
    Hey Joel,
    Thanks for reply. But, I forget to tell you in my question, I am trying this in Classic View.
    Please try this fiddle with selecting in framework to Ext JS 6.0.1.250 Classic. you can't see the icon. I just tried your fiddle and after changing framework to Ext JS 6.0.1.250 Classic, i can't the icon.
    Thanks
    Ranjay Singh
    Have you included the FontAwesome package in your application? The Triton theme does this by default, while the other packages do not.

    Thanks
    Joel

  6. #5
    Sencha User
    Join Date
    Dec 2010
    Location
    Pasadena, CA
    Posts
    28
    Answers
    1

    Default

    Yes, I have included font Awesome. It's in My app.json as well like
    "requires": [
    "font-awesome"
    ],
    and Inside launch() of My Application.js as well like
    Ext.setGlyphFontFamily('FontAwesome');
    At the same time is there any other thing i need to do, let me know as well. I will do it. But, seems like in my page, glyph is working fine inside all other components, except -Toolbar.
    So, I am sure, it's not the issue of font awesome.

  7. #6
    Sencha Premium User alexander.urban's Avatar
    Join Date
    Nov 2013
    Posts
    320
    Answers
    9

    Default

    Not sure why it doesn't work for you, but this fiddle does work: https://fiddle.sencha.com/#fiddle/16qf and all I did was to copy the @font-face CSS.

    EDIT: After having added the requirement, have you recompiled using Cmd?

  8. #7
    Sencha User
    Join Date
    Dec 2010
    Location
    Pasadena, CA
    Posts
    28
    Answers
    1

    Default

    Thanks Alexander, Your solution works on classic theme.That's what i needed. I can fix my issue now.

Similar Threads

  1. Replies: 2
    Last Post: 16 Feb 2016, 9:35 AM
  2. Replies: 1
    Last Post: 11 Feb 2015, 1:19 PM
  3. Drag Source not working with extjs 3.4. Works fine with Extjs 3.0.
    By Pratik_Patel in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 25 Jun 2013, 5:47 AM
  4. NEW MDM ZINC 4 supports with Extjs :-) Yeah it works fine...
    By SnakeMedia in forum Community Discussion
    Replies: 1
    Last Post: 21 Oct 2011, 7:26 AM
  5. Toolbar enableOverflow works fine in Firefox 3.5 but not in IE 7
    By manjeet.vaseer in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 7 Apr 2011, 3:04 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •