1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default Unanswered: Theming In Extjs 4

    Unanswered: Theming In Extjs 4


    Hi,
    Currently i'm trying to theme some components that i'm working with.
    I have tried changing the base color and it works fine. But i want to change the form textfield to a rounded corner, i thought i will get a variable for text field, which i didn't. When i checked the form variable i saw form-field.

    My questions are;
    1. is the form-field a class of the textfield and is that where i'm suppose to change the textfield?
    2. there is nothing like border-radius on the form variable, where am i suppose to specify the border radius?
    3. Can a textfield border really be changed to a round corner without an image, by specifying the border radius?
    4. Can i specify a different color for the form, toolbar, window and other components separately?

    Thanks in advance.

    Pat.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Here is how I would do it:

    Code:
    new Ext.form.Panel({
        renderTo : document.body,
        items    : [
            {
                xtype      : 'textfield',
                fieldLabel : 'Rounded',
                cls        : 'rounded-input'
            }
        ]
    });
    Code:
    .rounded-input input {
        border-radius : 5px;
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default


    Thanks Simeons, ....... that was a major breakthrough for me.
    I'm grateful.

    But the only thing i'm still having issue with is font-family and size. Pls can u still suggest?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use the same class just add font-family and font-size rules
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Location
    Nigeria
    Posts
    33
    Vote Rating
    0
    Pat Emi is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    You can use the same class just add font-family and font-size rules
    Yes i have done that but it only changes the input text (textfield) font size and family...... no changes to the label text.

Thread Participants: 1