Extjs 4按钮颜色使用SASS问题？

Question

I am Sankar.I tried to give color for a particular Extjs button using SASS.But Iam unable to findout the solution.Please help me about this.I given the following code.

$base-color: #5291C5;

@import 'compass';
@import 'ext4/default/all';

@include extjs-button-ui(
    'smallbtn',  
    $border-radius: 10px,
    $border-color: #A52A2A,
    $background-color: #A52A2A,
    $color: #A52A2A

    enter code here
);

Extra Information

Thanks for your reply.I given @include @import 'ext4/default/all'; at the bottom.Then it is showing some syntax error.I am unable to get a solution for this.The requirement for me as I created a "tbar" some thing like this { text: 'Retrieve', id: 'btnConsolidatedRetrieve', ui:'green' } The .scss file which i given is

$include-default: false;


$base-color: #5291C5;

@import 'compass';
@import 'ext4/default/all';

@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
@include extjs-form-field;
@include extjs-form-fieldset;
@include extjs-form-file;
@include extjs-form-checkboxfield;
@include extjs-form-checkboxgroup;
@include extjs-form-triggerfield;
@include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;


@include extjs-button-ui(
'green',  

$border-color: #CC00FF
);

$relative-image-path-for-uis: true; 

After giving this the "tbar" is not changing.Please give me a simple example for this.I am unable to find toolbar-button for this ui.

Answer 1

This code won't work unless you make sure the @import 'ext4/default/all'; line is at the very bottom. Anything declared after it will not take effect on the variables imported from _all.scss since the mixins in _all.scss need to have access to those values before they are compiled. You can certainly declare your own code after the import all line, if it's not needed for processing of the widgets etc.

Also, check for error messages in the terminal when you do compass compile , as that will usually catch syntax errors or bad image urls.

The following two articles should provide more help for you. They were invaluable to me as I learned how to make SASS UIs for ExtJS:

http://existdissolve.com/2011/09/extjs-4-theming-getting-this-thing-to-go/

http://existdissolve.com/2011/09/extjs-4-theming-custom-uis/