Results 1 to 1 of 1

Thread: Whitespace below panel top dock area with app css compiled by compass

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Vote Rating

    Default Whitespace below panel top dock area with app css compiled by compass

    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

    I did a diff on the css files, and apart from the order and paths, there wasn't anything missing other than this:
    .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
    @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;
    Last edited by gwhn; 27 Jun 2011 at 1:01 PM. Reason: Fix

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts