Hello. I'm just starting out with extjs 4.0.2a. I've set up my environment to use pre versions of compass, sass and haml gems, and copied and configured the templates to successfully compile my apps css. When I point from ext-all.css to my app's css, whitespace below each panel's top dock area appears unexpectedly. Has anyone else come across this and know how to fix it?
Here's a before and after:
Screen shot 2011-06-27 at 19.21.13.png
Screen shot 2011-06-27 at 19.24.04.png
UPDATE
I did a diff on the css files, and apart from the order and paths, there wasn't anything missing other than this:
Code:
.x-form-file-wrap .x-form-text {
color: #777777;
}
.x-form-file-wrap .x-form-file-btn {
float: left;
overflow: hidden;
}
.x-form-file-wrap .x-form-file-input {
font-size: 100px;
height: 30px;
opacity: 0;
position: absolute;
right: -2px;
top: -4px;
}
Which didn't seem relevant, so I just set $include_default: true; and removed lines 10-38 as instructed.
A bit more investigation pointed to the omission of @include extjs-layout in the app.scss template, so I've set $include_default: false and ordered the includes the same as in _all.scss
Code:
@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; // missing from template
@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;
/**
* missing from template
*/
@include extjs-dragdrop;
@include extjs-resizable;
@include extjs-splitter;
@include extjs-layout; // missing this caused the gap
@include extjs-tool;
@include extjs-scroller;
@include extjs-html;