Results 1 to 4 of 4

Thread: HOW TO change the trigger cls?

  1. #1
    Sencha User
    Join Date
    Apr 2014
    Posts
    139
    Answers
    5

    Default Answered: HOW TO change the trigger cls?

    Hi:

    I'm trying to modify the default search image with fontawesome icon via css.

    I've changed the cls from:

    Code:
            search: {
                weight: 1,
                cls: Ext.baseCSSPrefix + 'form-search-trigger',
                handler: 'onSearchClick',
                scope: 'this'
            },
    to


    Code:
    search: {
                weight: 1,
                cls: 'searchfield_search_trigger',
                handler: 'onSearchClick',
                scope: 'this'
            }
    in my css I have

    Code:
    .searchfield_search_trigger:after {    
        content: "\f087"; 
        color: white; 
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;   
    font-size: large; 
             
    }
    I can see the icon sitting ontop of the default trigger image.
    How do I get rid of the default trigger image?


    I tested this following css and it works:

    Code:
    <html>
    <head>
        <!--font awesome-->
        <link href="./resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="./resources/font-awesome/css/font-awesome-animation.min.css" rel="stylesheet">
    
    <style>
        body{
            background-color: black;
        }
    
        div:after{
            content: "\f087"; 
            color: white;
              font-family: FontAwesome;
              font-style: normal;
              font-weight: normal;
        }
    
    </style>
    </head>
    <body>
        <div>
            
        </div>
    </body>    
    </html>
    Hoping to get it replace with icons for high DPI screens as the search image is blurry.

    Thanks
    J.

  2. Hi--

    There are a few ways to do this. If you want to keep with what you have (manual style definition for FA icons), you can get something pretty clean with the following:

    Code:
        // common class for FA trigger icons
        .fa-trigger {
        	background-image: none !important;
        	font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            text-align: center;
        	padding-top: 12px;
        }
        // custom class for actual instance
        .my-foo-trigger:after {
        	content: "\f087";
        	color: red;
        }
    However, I think it's easier and more maintainable to just apply the regular font-awesome icons and then add some adjustments to compensate:

    Code:
    // trigger def
    truck: {
        cls: 'fa fa-truck green',
        handler: function() {
            console.log('bar trigger clicked');
        }
    }
    // CSS tweaks for positioning
        .x-form-trigger.fa {
        	display:table-cell;
        	background-image:none !important;
        	padding-top:5px;
        }
    Like I said, I like the second way better as it allows you to stick with the normal approach for FA icons, and only requires a very small override.

    Hope that helps! Check out the Fiddle below for both approaches.

    Thanks!
    Joel


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

    Default

    Hi--

    There are a few ways to do this. If you want to keep with what you have (manual style definition for FA icons), you can get something pretty clean with the following:

    Code:
        // common class for FA trigger icons
        .fa-trigger {
        	background-image: none !important;
        	font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            text-align: center;
        	padding-top: 12px;
        }
        // custom class for actual instance
        .my-foo-trigger:after {
        	content: "\f087";
        	color: red;
        }
    However, I think it's easier and more maintainable to just apply the regular font-awesome icons and then add some adjustments to compensate:

    Code:
    // trigger def
    truck: {
        cls: 'fa fa-truck green',
        handler: function() {
            console.log('bar trigger clicked');
        }
    }
    // CSS tweaks for positioning
        .x-form-trigger.fa {
        	display:table-cell;
        	background-image:none !important;
        	padding-top:5px;
        }
    Like I said, I like the second way better as it allows you to stick with the normal approach for FA icons, and only requires a very small override.

    Hope that helps! Check out the Fiddle below for both approaches.

    Thanks!
    Joel


  4. #3
    Sencha User
    Join Date
    Apr 2014
    Posts
    139
    Answers
    5

    Default

    Hi Joel:

    The 2nd method described it doesn't seem to work with the ext js 6.0 triton theme. Any idea why?

    Thanks
    J.

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

    Default

    Quote Originally Posted by juanbill View Post
    Hi Joel:

    The 2nd method described it doesn't seem to work with the ext js 6.0 triton theme. Any idea why?

    Thanks
    J.
    There are probably some conflicting CSS rules, as Triton has FA support baked in. Mileage in the approach from Ext JS 5 to Ext JS 6 Triton will vary, and will probably need some tweaks.

    Thanks
    Joel

Tags for this Thread

Posting Permissions

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