Results 1 to 2 of 2

Thread: ToggleButton Material Design Extjs

  1. #1
    Sencha User
    Join Date
    Jul 2016
    Posts
    5
    Vote Rating
    0
      0  

    Default ToggleButton Material Design Extjs

    Good day, I just want to thank the forum ExtJs leaving some of my experience ... sorry for my English. I use google translate

    Portal it's a project name, The component is located in the extendContorl folder

    Component -> Portal/classic/extendControls/src/ToggleButtonExtend.js


    PHP Code:

    Ext
    .define('Portal.extendControls.ToggleButtonExtend', {
        
    extend'Ext.slider.Single',
        
    alias'widget.toggleButtonExtend',
        
    cls'toggleoff',
        
    value0,    width195,
        
    maxWidth195,
        
    increment1,
        
    minValue0,
        
    maxValue1,
        
    labelWidth150,
        
    constrainThumbstrue,
        
    tipText: function (toggle) {
            return (
    toggle.value == 1) ? 'True' 'False';
        },
        
    initComponent: function () {
            
    this.callParent();
        },
        
    getValue: function () {
            var 
    toggleValue this.thumbs[0].value;
            if (
    toggleValue === 1) {
               
    this.removeCls('toggleoff');
                
    this.addCls('toggleon');
            } else {
                
    this.removeCls('toggleon');
                
    this.addCls('toggleoff');
            }
            return 
    this.callParent([0]);
        },
        
    listeners: {
            
    afterRender: function (toggle) {
                var 
    toggleValue toggle.thumbs[0].value;
                if (
    toggleValue === 1) {
                    
    this.removeCls('toggleoff');
                    
    this.addCls('toggleon');
                }
            }
        }
    }); 


    CssFile -> Portal/resources/css/AppStyle.css
    PHP Code:
    .x-slider-horz .x-slider-thumb:before {
        
    contentnone;
    }

    .
    x-slider-horz:before {
        
    height15px;
        
    margin-top: -7px;
        
    border-radius15px;
        
    bordernone;}
    /*----- <Off> -----*/
    .toggleoff .x-slider-horz .x-slider-thumb {
        
    width21px;
        
    height21px;    
        
    border-radius21px;    
        
    background-color#FFF;    
        
    bordersolid 0px #FFF;    
        
    bordersolid 0px #023a62;    
        
    transitionbackground .3s easebox-shadow 0.1s ease;    
        
    box-shadow0 1px 3px 1px rgba(0,0,0,0.4);    
        -
    webkit-box-shadow0 1px 3px 1px rgba(0,0,0,0.4);    
        -
    moz-box-shadow0 1px 3px 1px rgba(0,0,0,0.4);
    }

    .
    toggleoff .x-slider:before {    
        
    background-color#AFAFAF;    
        
    transitionbackground .3s ease
        
    box-shadow 0.1s ease;
    }

    /*----- </Off> -----*/


    /*----- <On> -----*/
    .toggleon .x-slider-horz .x-slider-thumb {    
        
    width21px;    
        
    height21px;    
        
    border-radius21px;    
        
    background-color#276592;    
        
    bordersolid 0px #276592;    
        
    transitionbackground .3s easebox-shadow 0.1s ease;    
        
    box-shadow0 1px 3px 1px rgba(0,0,0,0.4);    
        -
    webkit-box-shadow0 1px 3px 1px rgba(0,0,0,0.4);    
        -
    moz-box-shadow0 1px 3px 1px rgba(0,0,0,0.4);
    }

    .
    toggleon .x-slider:before {    
        
    background-color#59A3D9;    
        
    transitionbackground .3s easebox-shadow 0.1s ease;
    }

    /*----- </On> -----*/


    /*----- <//Componente ToggleButton> -----*/ 
    Use component

    PHP Code:

    xtype
    'toggleButtonExtend',
    fieldLabel'Estado',
    value

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,921
    Vote Rating
    292
      0  

    Default

    Thanks for sharing your work with the community! Perhaps you could post a demo?
    https://fiddle.sencha.com/#view/editor

    Lifecycle management for your web apps

Similar Threads

  1. [OPEN] Material Icons and Ext.theme.Material not documented
    By mtkutz in forum Sencha Documentation
    Replies: 3
    Last Post: 9 Jan 2017, 3:33 PM
  2. Google Material Design theme
    By dandvd in forum Ext 5: Q&A
    Replies: 43
    Last Post: 5 Jun 2016, 10:28 PM
  3. material design
    By memahdi in forum Ext 6: Q&A
    Replies: 4
    Last Post: 1 Jun 2016, 10:19 AM
  4. Learning material for ExtJs 5
    By sahand in forum Ext 5: Q&A
    Replies: 3
    Last Post: 4 Aug 2014, 7:01 PM

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
  •