1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    5
    Vote Rating
    0
    ggkaushik is on a distinguished road

      0  

    Default Unanswered: Designing ExtJS Buttons

    Unanswered: Designing ExtJS Buttons


    I want to create a new button style for my organisation.

    Can someone guide me?

    Is there a proper way of designing a button stylr in extjs 4.2.1?
    What are the images I need to design in photoshop?

    I want the button to look similar in IE/FF/Safari.

    Thanks

  2. #2
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8
    Vote Rating
    5
    palakurthivishal can only hope to improve

      1  

    Default


    Hello ggkaushik,
    Create a class by extending Ext.button.Button( extending gives your class gives the same config properties of the extending class, it means the newly created class is also of type button here), customize the config properties just the way you like it in the new class, like this
    Code:
    Ext.create('App.view.CustomButton',{
    extend : 'Ext.button.Button',
    alias : 'widget.myOrgButton',
    // you can modify all the config properties here
    width : customWidth,
    height : customHeight,
    style : {
    // add style attributes
    }
    });
    Use it as,
    Code:
    {
    xtype : 'myOrgButton'
    }

  3. #3
    Sencha User
    Join Date
    May 2009
    Posts
    5
    Vote Rating
    0
    ggkaushik is on a distinguished road

      0  

    Default


    palakurthivishal ... Thanks

    But how to apply the style? I am stuck with it.

    I am using a images as attached.
    Attached Images

  4. #4
    Sencha User palakurthivishal's Avatar
    Join Date
    Jul 2013
    Location
    India
    Posts
    74
    Answers
    8
    Vote Rating
    5
    palakurthivishal can only hope to improve

      0  

    Default


    Hello ggkaushik,
    By looking at the buttons, I can say you have to use the suitable gradient. Then you need to define a css class which has background : "yourBlueGradient", and you have to give it as "cls" property to your customButton.
    To design circular buttons you need to give border-radius property.
    I don't know how to achieve scrollbar css.


  5. #5
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    44
    Answers
    5
    Vote Rating
    1
    rsravishankar is on a distinguished road

      0  

    Default


    Finally, how did you get this done. Can you kindly let me know the detailed steps? I'm new to ExtJS. Thanks in advance.