Results 1 to 3 of 3

Thread: How to design the docked buttons??

  1. #1
    Sencha User roymj88's Avatar
    Join Date
    Nov 2011
    Location
    India
    Posts
    19
    Vote Rating
    0
      0  

    Default How to design the docked buttons??

    Hi,

    Is it possible to change the design of the buttons like submit, back etc which are used in the docked toolbars.

    For eg :-

    I have used the following button,

    Code:
    {
           xtype:'button',
           class:'submitbutton',
           text:'Submit',
           handler:function(){
                 Test.Viewport.setActiveItem('second',{type:'slide', direction:'left'});  
           }
    }
    I had named it to a different class and gave style accordingly :

    Code:
    .submitbutton{
        background-color:#FFF;
        border-radius:7px;
        color:#000;
        padding:10%;    
    }
    But the styles are having no effect. Please let me know how can i change the designs of the buttons.

    Thanks

    Roy M J

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,029
    Vote Rating
    1368
      0  

    Default

    Instead of using 'class', use 'cls'
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Sencha User rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      0  

    Default

    I suggest you use `ui` instead of `cls`, and use the SASS mixins to generate a new style of button for your application.

    Documentation here: http://docs.sencha.com/touch/2-0/#!/...ncha-button-ui
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Posting Permissions

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