如何在 Ext JS 7 中使用自定义 sass

Question

I have been trying to change the button colour in a form I have created on Ext JS v7.0.0.40

Login.js location is app\\modern\\src\\view\\main\\Login.js

  extend: "Ext.form.Panel",
  xtype: "form-login",
  title: "Login Form",

  bodyPadding: 20,
  width: 320,
  autoSize: true,

  items: [
    {
      xtype: "textfield",
      allowBlank: false,
      required: true,
      label: "User ID",
      name: "user",
      placeholder: "user id"
    },
    {
      xtype: "passwordfield",
      allowBlank: false,
      required: true,
      label: "Password",
      name: "pass",
      placeholder: "password"
    },
    {
      xtype: "checkbox",
      boxLabel: "Remember me",
      name: "remember"
    }
  ],

  buttons: [
    {
      text: "Login",
      handler: "onLogin"
    }
  ]
});

Login.sass location is app\\modern\\sass\\var\\view\\main\\Login.sass

.form-login {
  .button {
    background-color: #ff3737;
  }
}

For some reason I cannot get the color of the button to be changed, I'm sure this has a pretty simple fix.

Thanks in advance!

Answer 1

Welcome to Stack Overflow:

You did not set the cls (custom class for the element) for the form.

And the button styling for the background-color is done in a subelement:

scss file:

.form-login {
  .x-button .x-inner-el {
    background-color: #ff3737;
  }
}

https://fiddle.sencha.com/#view/editor&fiddle/325q

Further information:

• To find out yourself, you can inspect the button and see that,
  • the button cls is x-button
  • adding the background color to the x-button will not help
  • going further down inside the x-button is the x-button-el and adding the background color there will acutally change the color.
• The scss file should go parallel to the form-login file, but you do not have to do that.
• If you plan to use this type of color
  • more often: Use a cls and create a custom component with that style
  • always: Take a look at the documentation to change the button background color in your theme