1. 7 Aug 2011 10:06 AM #11
    ordinary_guy
    ordinary_guy is offline
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road
      0  

    Default


    Ha, I knew someone would suggest that eventually. Oh from the giddy heights of productivity, the slippery slope we now find ourselves sliding down towards roll-yer-own hell.

    But thanks anyway for your advice dj.

    No doubt some people will go down that route, and still manage to keep their sanity.
    But personally, my first experience with custom theming last weekend didn't go well at all.

    First, finding that the resources/themes/templates/resources/css/my-ext-theme.css that ships with 4.0.2a contains a stacktrace ...

    "Syntax error: File to import not found or unreadable: ext4/default/all. .."

    ... it all went downhill thereafter.
    Reply With Quote Reply With Quote
  2. 8 Aug 2011 6:03 AM #12
    dj
    dj is offline
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    576
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about
      0  

    Default


    Are you sure that you are using the newest versions of Compass and Sass? ExtJS uses cutting edge features of both.

    I use Sass 3.1.7, Compass 0.11.5 and ExtJS 4.0.5. I just compiled my-ext-theme.scss just fine (after altering the config.rb file to point to the right location) I also compiled ext-all.scss and what I got thereafter is pretty much the same output as the precompiled CSS file (31 bytes smaller because of better compression algorithms, no functional changes)

    Here's the diff of the two ext-all.css files (with "\n" inserted after each "}" so that diff can process it)
    Code:
    --- resources/css/ext-all-precompiled-nl.css	2011-08-08 15:25:35.000000000 +0200
+++ resources/css/ext-all-nl.css	2011-08-08 15:25:28.000000000 +0200
@@ -12,7 +12,7 @@
 input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
 *:focus{outline:none}
 .x-border-box,.x-border-box *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}
-.x-body{color:#000;font-size:12px;font-family:tahoma, arial, verdana, sans-serif}
+.x-body{color:#000;font-size:12px;font-family:tahoma,arial,verdana,sans-serif}
 .x-clear{overflow:hidden;clear:both;height:0;width:0;font-size:0;line-height:0}
 .x-layer{position:absolute;overflow:hidden;zoom:1}
 .x-shim{position:absolute;left:0;top:0;overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}
@@ -78,7 +78,7 @@
 .x-focus-frame-left,.x-focus-frame-right{border-left:solid 2px #15428b;width:2px}
 .x-mask{z-index:100;position:absolute;top:0;left:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;width:100%;height:100%;zoom:1;background:#ccc}
 .x-mask-msg{z-index:20001;position:absolute;top:0;left:0;padding:2px;border:1px solid;border-color:#99bce8;background-image:none;background-color:#dfe9f6}
-.x-mask-msg div{padding:5px 10px 5px 25px;background-image:url('../../resources/themes/images/default/grid/loading.gif');background-repeat:no-repeat;background-position:5px center;cursor:wait;border:1px solid #a3bad9;background-color:#eee;color:#222;font:normal 11px tahoma, arial, verdana, sans-serif}
+.x-mask-msg div{padding:5px 10px 5px 25px;background-image:url('../../resources/themes/images/default/grid/loading.gif');background-repeat:no-repeat;background-position:5px center;cursor:wait;border:1px solid #a3bad9;background-color:#eee;color:#222;font:normal 11px tahoma,arial,verdana,sans-serif}
 .x-boundlist{border-width:1px;border-style:solid;border-color:#98c0f4;background:#fff}
 .x-boundlist .x-toolbar{border-width:1px 0 0 0}
 .x-boundlist-item{padding:2px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:ignore;cursor:default;cursor:pointer;cursor:hand;position:relative;border-width:1px;border-style:dotted;border-color:#fff}
@@ -132,7 +132,7 @@
 .x-nbr .x-btn-default-small-tl,.x-nbr .x-btn-default-small-bl,.x-nbr .x-btn-default-small-tr,.x-nbr .x-btn-default-small-br,.x-nbr .x-btn-default-small-tc,.x-nbr .x-btn-default-small-bc,.x-nbr .x-btn-default-small-ml,.x-nbr .x-btn-default-small-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-small-corners.gif')}
 .x-nbr .x-btn-default-small-ml,.x-nbr .x-btn-default-small-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-small-sides.gif');background-position:0 0}
 .x-nbr .x-btn-default-small-mc{padding:0 0 0 0}
-.x-btn-default-small .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 4px}
+.x-btn-default-small .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 4px}
 .x-btn-default-small-icon button,.x-btn-default-small-icon .x-btn-inner,.x-btn-default-small-noicon button,.x-btn-default-small-noicon .x-btn-inner{height:16px;line-height:16px}
 .x-btn-default-small-icon button{padding:0;width:16px !important;height:16px}
 .x-btn-default-small-icon .x-btn-icon{width:16px;height:16px;top:0;left:0;bottom:0;right:0}
@@ -181,7 +181,7 @@
 .x-nbr .x-btn-default-medium-tl,.x-nbr .x-btn-default-medium-bl,.x-nbr .x-btn-default-medium-tr,.x-nbr .x-btn-default-medium-br,.x-nbr .x-btn-default-medium-tc,.x-nbr .x-btn-default-medium-bc,.x-nbr .x-btn-default-medium-ml,.x-nbr .x-btn-default-medium-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-medium-corners.gif')}
 .x-nbr .x-btn-default-medium-ml,.x-nbr .x-btn-default-medium-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-medium-sides.gif');background-position:0 0}
 .x-nbr .x-btn-default-medium-mc{padding:0px 0px 0px 0px}
-.x-btn-default-medium .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
+.x-btn-default-medium .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
 .x-btn-default-medium-icon button,.x-btn-default-medium-icon .x-btn-inner,.x-btn-default-medium-noicon button,.x-btn-default-medium-noicon .x-btn-inner{height:24px;line-height:24px}
 .x-btn-default-medium-icon button{padding:0;width:24px !important;height:24px}
 .x-btn-default-medium-icon .x-btn-icon{width:24px;height:24px;top:0;left:0;bottom:0;right:0}
@@ -230,7 +230,7 @@
 .x-nbr .x-btn-default-large-tl,.x-nbr .x-btn-default-large-bl,.x-nbr .x-btn-default-large-tr,.x-nbr .x-btn-default-large-br,.x-nbr .x-btn-default-large-tc,.x-nbr .x-btn-default-large-bc,.x-nbr .x-btn-default-large-ml,.x-nbr .x-btn-default-large-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-large-corners.gif')}
 .x-nbr .x-btn-default-large-ml,.x-nbr .x-btn-default-large-mr{zoom:1;background-image:url('../../resources/themes/images/default/btn/btn-default-large-sides.gif');background-position:0 0}
 .x-nbr .x-btn-default-large-mc{padding:0px 0px 0px 0px}
-.x-btn-default-large .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
+.x-btn-default-large .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
 .x-btn-default-large-icon button,.x-btn-default-large-icon .x-btn-inner,.x-btn-default-large-noicon button,.x-btn-default-large-noicon .x-btn-inner{height:32px;line-height:32px}
 .x-btn-default-large-icon button{padding:0;width:32px !important;height:32px}
 .x-btn-default-large-icon .x-btn-icon{width:32px;height:32px;top:0;left:0;bottom:0;right:0}
@@ -279,7 +279,7 @@
 .x-nbr .x-btn-default-toolbar-small-tl,.x-nbr .x-btn-default-toolbar-small-bl,.x-nbr .x-btn-default-toolbar-small-tr,.x-nbr .x-btn-default-toolbar-small-br,.x-nbr .x-btn-default-toolbar-small-tc,.x-nbr .x-btn-default-toolbar-small-bc,.x-nbr .x-btn-default-toolbar-small-ml,.x-nbr .x-btn-default-toolbar-small-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-small-ml,.x-nbr .x-btn-default-toolbar-small-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-small-mc{padding:0 0 0 0}
-.x-btn-default-toolbar-small .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 4px}
+.x-btn-default-toolbar-small .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 4px}
 .x-btn-default-toolbar-small-icon button,.x-btn-default-toolbar-small-icon .x-btn-inner,.x-btn-default-toolbar-small-noicon button,.x-btn-default-toolbar-small-noicon .x-btn-inner{height:16px;line-height:16px}
 .x-btn-default-toolbar-small-icon button{padding:0;width:16px !important;height:16px}
 .x-btn-default-toolbar-small-icon .x-btn-icon{width:16px;height:16px;top:0;left:0;bottom:0;right:0}
@@ -326,7 +326,7 @@
 .x-nbr .x-btn-default-toolbar-medium-tl,.x-nbr .x-btn-default-toolbar-medium-bl,.x-nbr .x-btn-default-toolbar-medium-tr,.x-nbr .x-btn-default-toolbar-medium-br,.x-nbr .x-btn-default-toolbar-medium-tc,.x-nbr .x-btn-default-toolbar-medium-bc,.x-nbr .x-btn-default-toolbar-medium-ml,.x-nbr .x-btn-default-toolbar-medium-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-medium-ml,.x-nbr .x-btn-default-toolbar-medium-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-medium-mc{padding:0px 0px 0px 0px}
-.x-btn-default-toolbar-medium .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
+.x-btn-default-toolbar-medium .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
 .x-btn-default-toolbar-medium-icon button,.x-btn-default-toolbar-medium-icon .x-btn-inner,.x-btn-default-toolbar-medium-noicon button,.x-btn-default-toolbar-medium-noicon .x-btn-inner{height:24px;line-height:24px}
 .x-btn-default-toolbar-medium-icon button{padding:0;width:24px !important;height:24px}
 .x-btn-default-toolbar-medium-icon .x-btn-icon{width:24px;height:24px;top:0;left:0;bottom:0;right:0}
@@ -373,7 +373,7 @@
 .x-nbr .x-btn-default-toolbar-large-tl,.x-nbr .x-btn-default-toolbar-large-bl,.x-nbr .x-btn-default-toolbar-large-tr,.x-nbr .x-btn-default-toolbar-large-br,.x-nbr .x-btn-default-toolbar-large-tc,.x-nbr .x-btn-default-toolbar-large-bc,.x-nbr .x-btn-default-toolbar-large-ml,.x-nbr .x-btn-default-toolbar-large-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-large-ml,.x-nbr .x-btn-default-toolbar-large-mr{zoom:1}
 .x-nbr .x-btn-default-toolbar-large-mc{padding:0px 0px 0px 0px}
-.x-btn-default-toolbar-large .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma, arial, verdana, sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
+.x-btn-default-toolbar-large .x-btn-inner{font-size:11px;font-weight:normal;font-family:tahoma,arial,verdana,sans-serif;color:#333;background-repeat:no-repeat;padding:0 3px}
 .x-btn-default-toolbar-large-icon button,.x-btn-default-toolbar-large-icon .x-btn-inner,.x-btn-default-toolbar-large-noicon button,.x-btn-default-toolbar-large-noicon .x-btn-inner{height:32px;line-height:32px}
 .x-btn-default-toolbar-large-icon button{padding:0;width:32px !important;height:32px}
 .x-btn-default-toolbar-large-icon .x-btn-icon{width:32px;height:32px;top:0;left:0;bottom:0;right:0}
@@ -427,7 +427,7 @@
 .x-btn-group-default-framed{border-color:#b7c8d7;-moz-box-shadow:#e3ebf5 0 1px 0px 0 inset,#e3ebf5 0 -1px 0px 0 inset,#e3ebf5 -1px 0 0px 0 inset,#e3ebf5 1px 0 0px 0 inset;-webkit-box-shadow:#e3ebf5 0 1px 0px 0 inset,#e3ebf5 0 -1px 0px 0 inset,#e3ebf5 -1px 0 0px 0 inset,#e3ebf5 1px 0 0px 0 inset;-o-box-shadow:#e3ebf5 0 1px 0px 0 inset,#e3ebf5 0 -1px 0px 0 inset,#e3ebf5 -1px 0 0px 0 inset,#e3ebf5 1px 0 0px 0 inset;box-shadow:#e3ebf5 0 1px 0px 0 inset,#e3ebf5 0 -1px 0px 0 inset,#e3ebf5 -1px 0 0px 0 inset,#e3ebf5 1px 0 0px 0 inset}
 .x-btn-group-header-default-framed{margin:2px 2px 0 2px}
 .x-btn-group-header-body-default-framed{padding:1px 0;background:#c2d8f0;-moz-border-radius-topleft:2px;-webkit-border-top-left-radius:2px;-o-border-top-left-radius:2px;-ms-border-top-left-radius:2px;-khtml-border-top-left-radius:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;-webkit-border-top-right-radius:2px;-o-border-top-right-radius:2px;-ms-border-top-right-radius:2px;-khtml-border-top-right-radius:2px;border-top-right-radius:2px}
-.x-btn-group-header-text-default-framed{font:normal 11px tahoma, arial, verdana, sans-serif;color:#3e6aaa}
+.x-btn-group-header-text-default-framed{font:normal 11px tahoma,arial,verdana,sans-serif;color:#3e6aaa}
 .x-datepicker{border:1px solid #1b376c;background-color:#fff;position:relative}
 .x-datepicker a{-moz-outline:0 none;outline:0 none;color:#15428b;text-decoration:none;border-width:0}
 .x-datepicker-inner,.x-datepicker-inner td,.x-datepicker-inner th{border-collapse:separate}
@@ -448,7 +448,7 @@
 .x-datepicker-month{text-align:center}
 .x-datepicker-month button{color:#fff !important}
 table.x-datepicker-inner{width:100%;table-layout:fixed}
-table.x-datepicker-inner th{width:25px;height:19px;padding:0;color:#233d6d;font:normal 10px tahoma, arial, verdana, sans-serif;text-align:right;border-bottom:1px solid #b2d1f5;border-collapse:separate;background-image:none;background-color:#dfecfb;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edf4fd), color-stop(100%, #cde1f9));background-image:-webkit-linear-gradient(top, #edf4fd,#cde1f9);background-image:-moz-linear-gradient(top, #edf4fd,#cde1f9);background-image:-o-linear-gradient(top, #edf4fd,#cde1f9);background-image:-ms-linear-gradient(top, #edf4fd,#cde1f9);background-image:linear-gradient(top, #edf4fd,#cde1f9);cursor:default}
+table.x-datepicker-inner th{width:25px;height:19px;padding:0;color:#233d6d;font:normal 10px tahoma,arial,verdana,sans-serif;text-align:right;border-bottom:1px solid #b2d1f5;border-collapse:separate;background-image:none;background-color:#dfecfb;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edf4fd), color-stop(100%, #cde1f9));background-image:-webkit-linear-gradient(top, #edf4fd,#cde1f9);background-image:-moz-linear-gradient(top, #edf4fd,#cde1f9);background-image:-o-linear-gradient(top, #edf4fd,#cde1f9);background-image:-ms-linear-gradient(top, #edf4fd,#cde1f9);background-image:linear-gradient(top, #edf4fd,#cde1f9);cursor:default}
 table.x-datepicker-inner th span{display:block;padding-right:7px}
 table.x-datepicker-inner tr{height:20px}
 table.x-datepicker-inner td{border:1px solid;height:17px;border-color:#fff;text-align:right;padding:0}
@@ -467,7 +467,7 @@
 .x-monthpicker{border:1px solid #1b376c;background-color:#fff}
 .x-monthpicker-months,.x-monthpicker-years{float:left;height:167px;width:88px}
 .x-monthpicker-item{float:left;margin:4px 0 5px 0;font:normal 11px tahoma,arial,verdana,sans-serif;text-align:center;vertical-align:middle;height:18px;width:43px;border:0 none}
-.x-monthpicker-item a{display:block;margin:0 5px 0 5px;text-decoration:none;color:#15428b;border:1px solid white;line-height:17px}
+.x-monthpicker-item a{display:block;margin:0 5px 0 5px;text-decoration:none;color:#15428b;border:1px solid #fff;line-height:17px}
 .x-monthpicker-item a:hover{background-color:#ddecfe}
 .x-monthpicker-item a.x-monthpicker-selected{background-color:#dfecfb;border:1px solid #8db2e3}
 .x-monthpicker-months{border-right:1px solid #1b376c;width:87px}

    For your Charting-in-a-normal-page needs, try to start with this scss file
    Code:
    $include-default:false;
$scope-reset-css: true;

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

@if $scope-reset-css {
    .#{$prefix}reset {
        @if $include-default {
          @include extjs-drawcomponent;
        }
        @include extjs-dragdrop;
        @include extjs-resizable;
        @include extjs-splitter;
        @include extjs-layout;
        @include extjs-tool;
        @include extjs-scroller;
    }

    @include extjs-reset-extras;
}
@else {
    @if $include-default {
      @include extjs-drawcomponent;
    }

    @include extjs-dragdrop;
    @include extjs-resizable;
    @include extjs-splitter;
    @include extjs-layout;
    @include extjs-tool;
    @include extjs-scroller;
}
    It compiles down to this CSS (33KB)
    Code:
    .x-border-box .x-reset,.x-border-box .x-reset *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}.x-reset html,.x-reset body,.x-reset div,.x-reset dl,.x-reset dt,.x-reset dd,.x-reset ul,.x-reset ol,.x-reset li,.x-reset h1,.x-reset h2,.x-reset h3,.x-reset h4,.x-reset h5,.x-reset h6,.x-reset pre,.x-reset code,.x-reset form,.x-reset fieldset,.x-reset legend,.x-reset input,.x-reset textarea,.x-reset p,.x-reset blockquote,.x-reset th,.x-reset td{margin:0;padding:0}.x-reset table{border-collapse:collapse;border-spacing:0}.x-reset fieldset,.x-reset img{border:0}.x-reset address,.x-reset caption,.x-reset cite,.x-reset code,.x-reset dfn,.x-reset em,.x-reset strong,.x-reset th,.x-reset var{font-style:normal;font-weight:normal}.x-reset li{list-style:none}.x-reset caption,.x-reset th{text-align:left}.x-reset h1,.x-reset h2,.x-reset h3,.x-reset h4,.x-reset h5,.x-reset h6{font-size:100%}.x-reset q:before,.x-reset q:after{content:""}.x-reset abbr,.x-reset acronym{border:0;font-variant:normal}.x-reset sup{vertical-align:text-top}.x-reset sub{vertical-align:text-bottom}.x-reset input,.x-reset textarea,.x-reset select{font-family:inherit;font-size:inherit;font-weight:inherit}.x-reset *:focus{outline:none}.x-body{color:#000;font-size:12px;font-family:tahoma,arial,verdana,sans-serif}.x-clear{overflow:hidden;clear:both;height:0;width:0;font-size:0;line-height:0}.x-layer{position:absolute;overflow:hidden;zoom:1}.x-shim{position:absolute;left:0;top:0;overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.x-hide-display{display:none !important}.x-hide-visibility{visibility:hidden !important}.x-item-disabled{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.x-ie6 .x-item-disabled{filter:none}.x-hidden,.x-hide-offsets{display:block !important;position:absolute!important;left:-10000px !important;top:-10000px !important}.x-hide-nosize{height:0!important;width:0!important}.x-masked-relative{position:relative}.x-ie6 .x-masked select,.x-ie6.x-body-masked select{visibility:hidden !important}.x-css-shadow{position:absolute;-moz-border-radius:5px 5px;-webkit-border-radius:5px 5px;-o-border-radius:5px 5px;-ms-border-radius:5px 5px;-khtml-border-radius:5px 5px;border-radius:5px 5px}.x-ie-shadow{background-color:#777;display:none;position:absolute;overflow:hidden;zoom:1}.x-frame-shadow{display:none;position:absolute;overflow:hidden}.x-frame-shadow *{overflow:hidden}.x-frame-shadow *{padding:0;border:0;margin:0;clear:none;zoom:1}.x-frame-shadow .xstc,.x-frame-shadow .xsbc{height:6px;float:left}.x-frame-shadow .xsc{width:100%}.x-frame-shadow .xsml{background:transparent repeat-y 0 0}.x-frame-shadow .xsmr{background:transparent repeat-y -6px 0}.x-frame-shadow .xstl{background:transparent no-repeat 0 0}.x-frame-shadow .xstc{background:transparent repeat-x 0 -30px}.x-frame-shadow .xstr{background:transparent repeat-x 0 -18px}.x-frame-shadow .xsbl{background:transparent no-repeat 0 -12px}.x-frame-shadow .xsbc{background:transparent repeat-x 0 -36px}.x-frame-shadow .xsbr{background:transparent repeat-x 0 -6px}.x-frame-shadow .xstl,.x-frame-shadow .xstc,.x-frame-shadow .xstr,.x-frame-shadow .xsbl,.x-frame-shadow .xsbc,.x-frame-shadow .xsbr{width:6px;height:6px;float:left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/shared/shadow.png')}.x-frame-shadow .xsml,.x-frame-shadow .xsmr{width:6px;float:left;height:100%;background-image:url('../../../ext-4.0.5/resources/themes/images/default/shared/shadow-lr.png')}.x-frame-shadow .xsmc{float:left;height:100%;background-image:url('../../../ext-4.0.5/resources/themes/images/default/shared/shadow-c.png')}.x-frame-shadow .xst,.x-frame-shadow .xsb{height:6px;overflow:hidden;width:100%}.x-box-tl{background:transparent no-repeat 0 0;zoom:1}.x-box-tc{height:8px;background:transparent repeat-x 0 0;overflow:hidden}.x-box-tr{background:transparent no-repeat right -8px}.x-box-ml{background:transparent repeat-y 0;padding-left:4px;overflow:hidden;zoom:1}.x-box-mc{background:repeat-x 0 -16px;padding:4px 10px}.x-box-mc h3{margin:0 0 4px 0;zoom:1}.x-box-mr{background:transparent repeat-y right;padding-right:4px;overflow:hidden}.x-box-bl{background:transparent no-repeat 0 -16px;zoom:1}.x-box-bc{background:transparent repeat-x 0 -8px;height:8px;overflow:hidden}.x-box-br{background:transparent no-repeat right -24px}.x-box-tl,.x-box-bl{padding-left:8px;overflow:hidden}.x-box-tr,.x-box-br{padding-right:8px;overflow:hidden}.x-box-tl{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/corners.gif')}.x-box-tc{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/tb.gif')}.x-box-tr{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/corners.gif')}.x-box-ml{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/l.gif')}.x-box-mc{background-color:#eee;background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/tb.gif');font-family:"Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;color:#393939;font-size:15px}.x-box-mc h3{font-size:18px;font-weight:bold}.x-box-mr{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/r.gif')}.x-box-bl{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/corners.gif')}.x-box-bc{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/tb.gif')}.x-box-br{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/corners.gif')}.x-box-blue .x-box-bl,.x-box-blue .x-box-br,.x-box-blue .x-box-tl,.x-box-blue .x-box-tr{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/corners-blue.gif')}.x-box-blue .x-box-bc,.x-box-blue .x-box-mc,.x-box-blue .x-box-tc{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/tb-blue.gif')}.x-box-blue .x-box-mc{background-color:#c3daf9}.x-box-blue .x-box-mc h3{color:#17385b}.x-box-blue .x-box-ml{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/l-blue.gif')}.x-box-blue .x-box-mr{background-image:url('../../../ext-4.0.5/resources/themes/images/default/box/r-blue.gif')}.x-focus-element{position:absolute;top:-10px;left:-10px;width:0px;height:0px}.x-focus-frame{position:absolute;left:0px;top:0px;z-index:100000000;width:0px;height:0px}.x-focus-frame-top,.x-focus-frame-bottom,.x-focus-frame-left,.x-focus-frame-right{position:absolute;top:0px;left:0px}.x-focus-frame-top,.x-focus-frame-bottom{border-top:solid 2px #15428b;height:2px}.x-focus-frame-left,.x-focus-frame-right{border-left:solid 2px #15428b;width:2px}.x-mask{z-index:100;position:absolute;top:0;left:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;width:100%;height:100%;zoom:1;background:#ccc}.x-mask-msg{z-index:20001;position:absolute;top:0;left:0;padding:2px;border:1px solid;border-color:#99bce8;background-image:none;background-color:#dfe9f6}.x-mask-msg div{padding:5px 10px 5px 25px;background-image:url('../../../ext-4.0.5/resources/themes/images/default/grid/loading.gif');background-repeat:no-repeat;background-position:5px center;cursor:wait;border:1px solid #a3bad9;background-color:#eee;color:#222;font:normal 11px tahoma,arial,verdana,sans-serif}.x-reset .x-dd-drag-repair .x-dd-drag-ghost{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);opacity:0.6}.x-reset .x-dd-drag-repair .x-dd-drop-icon{display:none}.x-reset .x-dd-drag-ghost{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=85);opacity:0.85;padding:5px;padding-left:20px;white-space:nowrap;color:#000;font:normal 11px tahoma,arial,verdana,sans-serif;border:1px solid;border-color:#ddd #bbb #bbb #ddd;background-color:#fff}.x-reset .x-dd-drop-icon{position:absolute;top:3px;left:3px;display:block;width:16px;height:16px;background-color:transparent;background-position:center;background-repeat:no-repeat;z-index:1}.x-reset .x-view-selector{position:absolute;left:0;top:0;width:0;background-color:#c3daf9;border:1px dotted #3399bb;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;zoom:1}.x-reset .x-dd-drop-nodrop .x-dd-drop-icon{background-image:url('../../../ext-4.0.5/resources/themes/images/default/dd/drop-no.gif')}.x-reset .x-dd-drop-ok .x-dd-drop-icon{background-image:url('../../../ext-4.0.5/resources/themes/images/default/dd/drop-yes.gif')}.x-reset .x-dd-drop-ok-add .x-dd-drop-icon{background-image:url('../../../ext-4.0.5/resources/themes/images/default/dd/drop-add.gif')}.x-reset .x-resizable-handle{position:absolute;z-index:100;font-size:1px;line-height:6px;overflow:hidden;zoom:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;background-color:#fff}.x-reset .x-resizable-handle-east{width:6px;height:100%;right:0;top:0}.x-reset .x-resizable-over .x-resizable-handle-east{cursor:e-resize}.x-reset .x-resizable-handle-south{width:100%;height:6px;left:0;bottom:0}.x-reset .x-resizable-over .x-resizable-handle-south{cursor:s-resize}.x-reset .x-resizable-handle-west{width:6px;height:100%;left:0;top:0}.x-reset .x-resizable-over .x-resizable-handle-west{cursor:w-resize}.x-reset .x-resizable-handle-north{width:100%;height:6px;left:0;top:0}.x-reset .x-resizable-over .x-resizable-handle-north{cursor:n-resize}.x-reset .x-resizable-handle-southeast{width:6px;height:6px;right:0;bottom:0;z-index:101}.x-reset .x-resizable-over .x-resizable-handle-southeast{cursor:se-resize}.x-reset .x-resizable-handle-northwest{width:6px;height:6px;left:0;top:0;z-index:101}.x-reset .x-resizable-over .x-resizable-handle-northwest{cursor:nw-resize}.x-reset .x-resizable-handle-northeast{width:6px;height:6px;right:0;top:0;z-index:101}.x-reset .x-resizable-over .x-resizable-handle-northeast{cursor:ne-resize}.x-reset .x-resizable-handle-southwest{width:6px;height:6px;left:0;bottom:0;z-index:101}.x-reset .x-resizable-over .x-resizable-handle-southwest{cursor:sw-resize}.x-reset .x-ie .x-resizable-handle-east{margin-right:-1px}.x-reset .x-ie .x-resizable-handle-south{margin-bottom:-1px}.x-reset .x-resizable-over .x-resizable-handle,.x-reset .x-resizable-pinned .x-resizable-handle{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}.x-reset .x-window .x-window-handle{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.x-reset .x-window-collapsed .x-window-handle{display:none}.x-reset .x-resizable-proxy{border:1px dashed #3b5a82;position:absolute;left:0;top:0;overflow:hidden;z-index:50000}.x-reset .x-resizable-overlay{position:absolute;left:0;top:0;width:100%;height:100%;display:none;z-index:200000;background-color:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.x-reset .x-resizable-over .x-resizable-handle-east,.x-reset .x-resizable-over .x-resizable-handle-west,.x-reset .x-resizable-pinned .x-resizable-handle-east,.x-reset .x-resizable-pinned .x-resizable-handle-west{background-position:left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/e-handle.gif')}.x-reset .x-resizable-over .x-resizable-handle-south,.x-reset .x-resizable-over .x-resizable-handle-north,.x-reset .x-resizable-pinned .x-resizable-handle-south,.x-reset .x-resizable-pinned .x-resizable-handle-north{background-position:top;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/s-handle.gif')}.x-reset .x-resizable-over .x-resizable-handle-southeast,.x-reset .x-resizable-pinned .x-resizable-handle-southeast{background-position:top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/se-handle.gif')}.x-reset .x-resizable-over .x-resizable-handle-northwest,.x-reset .x-resizable-pinned .x-resizable-handle-northwest{background-position:bottom right;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/nw-handle.gif')}.x-reset .x-resizable-over .x-resizable-handle-northeast,.x-reset .x-resizable-pinned .x-resizable-handle-northeast{background-position:bottom left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/ne-handle.gif')}.x-reset .x-resizable-over .x-resizable-handle-southwest,.x-reset .x-resizable-pinned .x-resizable-handle-southwest{background-position:top right;background-image:url('../../../ext-4.0.5/resources/themes/images/default/sizer/sw-handle.gif')}.x-reset .x-splitter .x-collapse-el{position:absolute;cursor:pointer;background-color:transparent;background-repeat:no-repeat !important}.x-reset .x-layout-split-left,.x-reset .x-layout-split-right{top:50%;margin-top:-17px;width:5px;height:35px}.x-reset .x-layout-split-top,.x-reset .x-layout-split-bottom{left:50%;width:35px;height:5px;margin-left:-17px}.x-reset .x-layout-split-left{background:no-repeat top right;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-left.gif')}.x-reset .x-layout-split-right{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-right.gif')}.x-reset .x-layout-split-top{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-top.gif')}.x-reset .x-layout-split-bottom{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-bottom.gif')}.x-reset .x-splitter-collapsed .x-layout-split-left{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-right.gif')}.x-reset .x-splitter-collapsed .x-layout-split-right{background:no-repeat top right;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-left.gif')}.x-reset .x-splitter-collapsed .x-layout-split-top{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-bottom.gif')}.x-reset .x-splitter-collapsed .x-layout-split-bottom{background:no-repeat top left;background-image:url('../../../ext-4.0.5/resources/themes/images/default/util/splitter/mini-top.gif')}.x-reset .x-splitter-horizontal{cursor:e-resize;cursor:row-resize;font-size:1px}.x-reset .x-splitter-vertical{cursor:e-resize;cursor:col-resize;font-size:1px}.x-reset .x-splitter-collapsed{cursor:default}.x-reset .x-splitter-active{z-index:4;font-size:1px;background-color:#b4b4b4;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8}.x-reset .x-splitter-active .x-collapse-el{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.x-reset .x-proxy-el{position:absolute;background:#b4b4b4;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);opacity:0.8}.x-reset .x-docked{position:absolute;z-index:1}.x-reset .x-docked-top{border-bottom-width:0 !important}.x-reset .x-docked-bottom{border-top-width:0 !important}.x-reset .x-docked-left{border-right-width:0 !important}.x-reset .x-docked-right{border-left-width:0 !important}.x-reset .x-docked-noborder-top{border-top-width:0 !important}.x-reset .x-docked-noborder-right{border-right-width:0 !important}.x-reset .x-docked-noborder-bottom{border-bottom-width:0 !important}.x-reset .x-docked-noborder-left{border-left-width:0 !important}.x-reset .x-box-inner{overflow:hidden;zoom:1;position:relative;left:0;top:0}.x-reset .x-box-item{position:absolute !important;left:0;top:0}.x-reset .x-box-layout-ct,.x-reset .x-border-layout-ct{overflow:hidden;zoom:1}.x-reset .x-overflow-hidden{overflow:hidden !important}.x-reset .x-inline-children > *{display:inline-block !important}.x-reset .x-abs-layout-item{position:absolute}.x-reset .x-border-layout-ct{background-color:#dfe8f6}.x-reset .x-border-region-slide-in{z-index:5}.x-reset .x-region-collapsed-placeholder{z-index:4}.x-reset .x-accordion-hd .x-panel-header-text{color:#000;font-weight:normal}.x-reset .x-accordion-hd{background:#d9e7f8 !important;-moz-box-shadow:inset 0 0 0 0 #d9e7f8;-webkit-box-shadow:inset 0 0 0 0 #d9e7f8;-o-box-shadow:inset 0 0 0 0 #d9e7f8;box-shadow:inset 0 0 0 0 #d9e7f8}.x-reset .x-accordion-hd .x-tool-collapse-top,.x-reset .x-accordion-hd .x-tool-collapse-right,.x-reset .x-accordion-hd .x-tool-collapse-bottom,.x-reset .x-accordion-hd .x-tool-collapse-left{background-position:0 -255px}.x-reset .x-accordion-hd .x-tool-expand-top,.x-reset .x-accordion-hd .x-tool-expand-right,.x-reset .x-accordion-hd .x-tool-expand-bottom,.x-reset .x-accordion-hd .x-tool-expand-left{background-position:0 -240px}.x-reset .x-accordion-hd .x-tool-over .x-tool-collapse-top,.x-reset .x-accordion-hd .x-tool-over .x-tool-collapse-right,.x-reset .x-accordion-hd .x-tool-over .x-tool-collapse-bottom,.x-reset .x-accordion-hd .x-tool-over .x-tool-collapse-left{background-position:-15px -255px}.x-reset .x-accordion-hd .x-tool-over .x-tool-expand-top,.x-reset .x-accordion-hd .x-tool-over .x-tool-expand-right,.x-reset .x-accordion-hd .x-tool-over .x-tool-expand-bottom,.x-reset .x-accordion-hd .x-tool-over .x-tool-expand-left{background-position:-15px -240px}.x-reset .x-accordion-hd{border-width:1px 0 1px 0 !important;padding:4px 5px 5px 5px;border-top-color:#f3f7fb !important}.x-reset .x-accordion-body{border-width:0 !important}.x-reset .x-accordion-hd-sibling-expanded{border-top-color:#99bce8 !important;-moz-box-shadow:inset 0 1px 0 0 #f3f7fb;-webkit-box-shadow:inset 0 1px 0 0 #f3f7fb;-o-box-shadow:inset 0 1px 0 0 #f3f7fb;box-shadow:inset 0 1px 0 0 #f3f7fb}.x-reset .x-accordion-hd-last-collapsed{border-bottom-color:#d9e7f8 !important}.x-reset .x-frame-tl,.x-reset .x-frame-tr,.x-reset .x-frame-tc,.x-reset .x-frame-bl,.x-reset .x-frame-br,.x-reset .x-frame-bc{overflow:hidden;background-repeat:no-repeat}.x-reset .x-frame-tc,.x-reset .x-frame-bc{background-repeat:repeat-x}.x-reset .x-frame-mc{position:relative;background-repeat:repeat-x;overflow:hidden}.x-reset .x-box-scroller-left{float:left;height:100%;z-index:5}.x-reset .x-box-scroller-left .x-toolbar-scroll-left,.x-reset .x-box-scroller-left .x-tabbar-scroll-left{width:18px;position:relative;cursor:pointer;height:20px;background:transparent no-repeat -18px 0;background-image:url('../../../ext-4.0.5/resources/themes/images/default/tab-bar/scroll-left.gif')}.x-reset .x-box-scroller-left .x-toolbar-scroll-left-hover{background-position:0 0}.x-reset .x-box-scroller-left .x-toolbar-scroll-left-disabled,.x-reset .x-box-scroller-left .x-tabbar-scroll-left-disabled{background-position:-18px 0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:default}.x-reset .x-box-scroller-left .x-toolbar-scroll-left{background-image:url('../../../ext-4.0.5/resources/themes/images/default/toolbar/scroll-left.gif');background-position:-14px 0}.x-reset .x-box-scroller-left .x-toolbar-scroll-left-hover{background-position:0 0}.x-reset .x-box-scroller-left .x-toolbar-scroll-left-disabled{background-position:-14px 0}.x-reset .x-box-scroller-left .x-toolbar-scroll-left{width:14px;height:22px;border-bottom:1px solid #8db2e3}.x-reset .x-horizontal-box-overflow-body{float:left}.x-reset .x-box-scroller-right{float:right;height:100%;z-index:5}.x-reset .x-box-scroller-right .x-toolbar-scroll-right,.x-reset .x-box-scroller-right .x-tabbar-scroll-right{width:18px;position:relative;cursor:pointer;height:20px;background:transparent no-repeat 0 0;background-image:url('../../../ext-4.0.5/resources/themes/images/default/tab-bar/scroll-right.gif')}.x-reset .x-box-scroller-right .x-toolbar-scroll-right-hover{background-position:-18px 0}.x-reset .x-box-scroller-right .x-toolbar-scroll-right-disabled,.x-reset .x-box-scroller-right .x-tabbar-scroll-right-disabled{background-position:0 0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:default}.x-reset .x-box-scroller-right .x-toolbar-scroll-right{background-image:url('../../../ext-4.0.5/resources/themes/images/default/toolbar/scroll-right.gif')}.x-reset .x-box-scroller-right .x-toolbar-scroll-right-hover{background-position:-14px 0}.x-reset .x-box-scroller-right .x-toolbar-scroll-right-disabled{background-position:0 0}.x-reset .x-box-scroller-right .x-toolbar-scroll-right{width:14px;height:22px;border-bottom:1px solid #8db2e3}.x-reset .x-box-scroller-top .x-box-scroller{line-height:0;font-size:0}.x-reset .x-box-scroller-top .x-menu-scroll-top{background:transparent no-repeat center center;background-image:url('../../../ext-4.0.5/resources/themes/images/default/layout/mini-top.gif');height:8px;cursor:pointer}.x-reset .x-box-scroller-bottom .x-box-scroller{line-height:0;font-size:0}.x-reset .x-box-scroller-bottom .x-menu-scroll-bottom{background:transparent no-repeat center center;background-image:url('../../../ext-4.0.5/resources/themes/images/default/layout/mini-bottom.gif');height:8px;cursor:pointer}.x-reset .x-box-menu-right{float:right;padding-right:2px}.x-reset .x-column{float:left}.x-reset .x-ie6 .x-column{display:inline}.x-reset .x-tool{height:15px}.x-reset .x-tool img{overflow:hidden;width:15px;height:15px;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-image:url('../../../ext-4.0.5/resources/themes/images/default/tools/tool-sprites.gif');margin:0}.x-reset .x-panel-header-horizontal .x-tool,.x-reset .x-window-header-horizontal .x-tool{margin-left:2px}.x-reset .x-panel-header-vertical .x-tool,.x-reset .x-window-header-vertical .x-tool{margin-bottom:2px}.x-reset .x-tool-placeholder{visibility:hidden}.x-reset .x-tool-toggle{background-position:0 -60px}.x-reset .x-tool-over .x-tool-toggle{background-position:-15px -60px}.x-reset .x-panel-collapsed .x-tool-toggle,.x-reset .x-fieldset-collapsed .x-tool-toggle{background-position:0 -75px}.x-reset .x-panel-collapsed .x-tool-over .x-tool-toggle,.x-reset .x-fieldset-collapsed .x-tool-over .x-tool-toggle{background-position:-15px -75px}.x-reset .x-tool-close{background-position:0 0}.x-reset .x-tool-minimize{background-position:0 -15px}.x-reset .x-tool-maximize{background-position:0 -30px}.x-reset .x-tool-restore{background-position:0 -45px}.x-reset .x-tool-gear{background-position:0 -90px}.x-reset .x-tool-prev{background-position:0 -105px}.x-reset .x-tool-next{background-position:0 -120px}.x-reset .x-tool-pin{background-position:0 -135px}.x-reset .x-tool-unpin{background-position:0 -150px}.x-reset .x-tool-right{background-position:0 -165px}.x-reset .x-tool-left{background-position:0 -180px}.x-reset .x-tool-help{background-position:0 -300px}.x-reset .x-tool-save{background-position:0 -285px}.x-reset .x-tool-search{background-position:0 -270px}.x-reset .x-tool-minus{background-position:0 -255px}.x-reset .x-tool-plus{background-position:0 -240px}.x-reset .x-tool-refresh{background-position:0 -225px}.x-reset .x-tool-up{background-position:0 -210px}.x-reset .x-tool-down{background-position:0 -195px}.x-reset .x-tool-move{background-position:0 -375px}.x-reset .x-tool-resize{background-position:0 -360px}.x-reset .x-tool-collapse{background-position:0 -345px}.x-reset .x-tool-expand{background-position:0 -330px}.x-reset .x-tool-print{background-position:0 -315px}.x-reset .x-tool-expand-bottom,.x-reset .x-tool-collapse-bottom{background-position:0 -195px}.x-reset .x-tool-expand-top,.x-reset .x-tool-collapse-top{background-position:0 -210px}.x-reset .x-tool-expand-left,.x-reset .x-tool-collapse-left{background-position:0 -180px}.x-reset .x-tool-expand-right,.x-reset .x-tool-collapse-right{background-position:0 -165px}.x-reset .x-tool-over .x-tool-close{background-position:-15px 0}.x-reset .x-tool-over .x-tool-minimize{background-position:-15px -15px}.x-reset .x-tool-over .x-tool-maximize{background-position:-15px -30px}.x-reset .x-tool-over .x-tool-restore{background-position:-15px -45px}.x-reset .x-tool-over .x-tool-gear{background-position:-15px -90px}.x-reset .x-tool-over .x-tool-prev{background-position:-15px -105px}.x-reset .x-tool-over .x-tool-next{background-position:-15px -120px}.x-reset .x-tool-over .x-tool-pin{background-position:-15px -135px}.x-reset .x-tool-over .x-tool-unpin{background-position:-15px -150px}.x-reset .x-tool-over .x-tool-right{background-position:-15px -165px}.x-reset .x-tool-over .x-tool-left{background-position:-15px -180px}.x-reset .x-tool-over .x-tool-down{background-position:-15px -195px}.x-reset .x-tool-over .x-tool-up{background-position:-15px -210px}.x-reset .x-tool-over .x-tool-refresh{background-position:-15px -225px}.x-reset .x-tool-over .x-tool-plus{background-position:-15px -240px}.x-reset .x-tool-over .x-tool-minus{background-position:-15px -255px}.x-reset .x-tool-over .x-tool-search{background-position:-15px -270px}.x-reset .x-tool-over .x-tool-save{background-position:-15px -285px}.x-reset .x-tool-over .x-tool-help{background-position:-15px -300px}.x-reset .x-tool-over .x-tool-print{background-position:-15px -315px}.x-reset .x-tool-over .x-tool-expand{background-position:-15px -330px}.x-reset .x-tool-over .x-tool-collapse{background-position:-15px -345px}.x-reset .x-tool-over .x-tool-resize{background-position:-15px -360px}.x-reset .x-tool-over .x-tool-move{background-position:-15px -375px}.x-reset .x-tool-over .x-tool-expand-bottom,.x-reset .x-tool-over .x-tool-collapse-bottom{background-position:-15px -195px}.x-reset .x-tool-over .x-tool-expand-top,.x-reset .x-tool-over .x-tool-collapse-top{background-position:-15px -210px}.x-reset .x-tool-over .x-tool-expand-left,.x-reset .x-tool-over .x-tool-collapse-left{background-position:-15px -180px}.x-reset .x-tool-over .x-tool-expand-right,.x-reset .x-tool-over .x-tool-collapse-right{background-position:-15px -165px}.x-reset .x-horizontal-scroller-present .x-grid-body{border-bottom-width:0px}.x-reset .x-vertical-scroller-present .x-grid-body{border-right-width:0px}.x-reset .x-scroller{overflow:hidden}.x-reset .x-scroller-vertical{border:1px solid #99bce8;border-top-color:#c5c5c5}.x-reset .x-scroller-horizontal{border:1px solid #99bce8}.x-reset .x-vertical-scroller-present .x-scroller-horizontal{border-right-width:0px}.x-reset .x-scroller-ct{overflow:hidden;position:absolute;margin:0;padding:0;border:none;left:0px;top:0px;box-sizing:content-box !important;-ms-box-sizing:content-box !important;-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important}.x-reset .x-scroller-vertical .x-scroller-ct{overflow-y:scroll}.x-reset .x-scroller-horizontal .x-scroller-ct{overflow-x:scroll}.x-reset .x-html html,.x-reset .x-html address,.x-reset .x-html blockquote,.x-reset .x-html body,.x-reset .x-html dd,.x-reset .x-html div,.x-reset .x-html dl,.x-reset .x-html dt,.x-reset .x-html fieldset,.x-reset .x-html form,.x-reset .x-html frame,.x-reset .x-html frameset,.x-reset .x-html h1,.x-reset .x-html h2,.x-reset .x-html h3,.x-reset .x-html h4,.x-reset .x-html h5,.x-reset .x-html h6,.x-reset .x-html noframes,.x-reset .x-html ol,.x-reset .x-html p,.x-reset .x-html ul,.x-reset .x-html center,.x-reset .x-html dir,.x-reset .x-html hr,.x-reset .x-html menu,.x-reset .x-html pre{display:block}.x-reset .x-html li{display:list-item;list-style:disc}.x-reset .x-html head{display:none}.x-reset .x-html table{display:table}.x-reset .x-html tr{display:table-row}.x-reset .x-html thead{display:table-header-group}.x-reset .x-html tbody{display:table-row-group}.x-reset .x-html tfoot{display:table-footer-group}.x-reset .x-html col{display:table-column}.x-reset .x-html colgroup{display:table-column-group}.x-reset .x-html td,.x-reset .x-html th{display:table-cell}.x-reset .x-html caption{display:table-caption}.x-reset .x-html th{font-weight:bolder;text-align:center}.x-reset .x-html caption{text-align:center}.x-reset .x-html body{margin:8px}.x-reset .x-html h1{font-size:2em;margin:.67em 0}.x-reset .x-html h2{font-size:1.5em;margin:.75em 0}.x-reset .x-html h3{font-size:1.17em;margin:.83em 0}.x-reset .x-html h4,.x-reset .x-html p,.x-reset .x-html blockquote,.x-reset .x-html ul,.x-reset .x-html fieldset,.x-reset .x-html form,.x-reset .x-html ol,.x-reset .x-html dl,.x-reset .x-html dir,.x-reset .x-html menu{margin:1.12em 0}.x-reset .x-html h5{font-size:.83em;margin:1.5em 0}.x-reset .x-html h6{font-size:.75em;margin:1.67em 0}.x-reset .x-html h1,.x-reset .x-html h2,.x-reset .x-html h3,.x-reset .x-html h4,.x-reset .x-html h5,.x-reset .x-html h6,.x-reset .x-html b,.x-reset .x-html strong{font-weight:bolder}.x-reset .x-html blockquote{margin-left:40px;margin-right:40px}.x-reset .x-html i,.x-reset .x-html cite,.x-reset .x-html em,.x-reset .x-html var,.x-reset .x-html address{font-style:italic}.x-reset .x-html pre,.x-reset .x-html tt,.x-reset .x-html code,.x-reset .x-html kbd,.x-reset .x-html samp{font-family:monospace}.x-reset .x-html pre{white-space:pre}.x-reset .x-html button,.x-reset .x-html textarea,.x-reset .x-html input,.x-reset .x-html select{display:inline-block}.x-reset .x-html big{font-size:1.17em}.x-reset .x-html small,.x-reset .x-html sub,.x-reset .x-html sup{font-size:.83em}.x-reset .x-html sub{vertical-align:sub}.x-reset .x-html sup{vertical-align:super}.x-reset .x-html table{border-spacing:2px}.x-reset .x-html thead,.x-reset .x-html tbody,.x-reset .x-html tfoot{vertical-align:middle}.x-reset .x-html td,.x-reset .x-html th{vertical-align:inherit}.x-reset .x-html s,.x-reset .x-html strike,.x-reset .x-html del{text-decoration:line-through}.x-reset .x-html hr{border:1px inset}.x-reset .x-html ol,.x-reset .x-html ul,.x-reset .x-html dir,.x-reset .x-html menu,.x-reset .x-html dd{margin-left:40px}.x-reset .x-html ul,.x-reset .x-html menu,.x-reset .x-html dir{list-style-type:disc}.x-reset .x-html ol{list-style-type:decimal}.x-reset .x-html ol ul,.x-reset .x-html ul ol,.x-reset .x-html ul ul,.x-reset .x-html ol ol{margin-top:0;margin-bottom:0}.x-reset .x-html u,.x-reset .x-html ins{text-decoration:underline}.x-reset .x-html br:before{content:"\A"}.x-reset .x-html :before,.x-reset .x-html :after{white-space:pre-line}.x-reset .x-html center{text-align:center}.x-reset .x-html :link,.x-reset .x-html :visited{text-decoration:underline}.x-reset .x-html :focus{outline:invert dotted thin}.x-reset .x-html BDO[DIR="ltr"]{direction:ltr;unicode-bidi:bidi-override}.x-reset .x-html BDO[DIR="rtl"]{direction:rtl;unicode-bidi:bidi-override}.x-border-box .x-reset .x-tab-default-top{height:21px}.x-border-box .x-reset .x-tab-default-bottom{height:21px}.x-border-box .x-reset .x-tip-anchor{width:10px;height:10px}.x-border-box .x-reset .x-form-text{height:22px}.x-border-box .x-reset textarea.x-form-field{height:auto}.x-border-box .x-reset .x-field-default-toolbar .x-form-text{height:20px}.x-border-box .x-reset .x-form-trigger{height:22px}.x-border-box .x-reset .x-field-default-toolbar .x-form-trigger{height:20px}.x-border-box .x-reset.x-ie9 .x-grid-header-ct{padding-left:1px}.x-reset.x-webkit *:focus{outline:none !important}.x-reset.x-webkit .x-form-empty-field{line-height:15px}.x-reset.x-webkit .x-fieldset-header{padding-top:1px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-body{height:25px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-strip{height:3px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-body-default-plain{height:23px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-strip-default-plain{height:3px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-body{height:25px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-strip{height:3px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-body-default-plain{height:23px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-strip-default-plain{height:3px}.x-border-box .x-reset .x-tab-default-top{height:21px}.x-border-box .x-reset .x-tab-default-bottom{height:21px}.x-border-box .x-reset .x-tip-anchor{width:10px;height:10px}.x-border-box .x-reset .x-form-text{height:22px}.x-border-box .x-reset textarea.x-form-field{height:auto}.x-border-box .x-reset .x-field-default-toolbar .x-form-text{height:20px}.x-border-box .x-reset .x-form-trigger{height:22px}.x-border-box .x-reset .x-field-default-toolbar .x-form-trigger{height:20px}.x-border-box .x-reset.x-ie9 .x-grid-header-ct{padding-left:1px}.x-reset.x-webkit *:focus{outline:none !important}.x-reset.x-webkit .x-form-empty-field{line-height:15px}.x-reset.x-webkit .x-fieldset-header{padding-top:1px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-body{height:25px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-strip{height:3px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-body-default-plain{height:23px}.x-border-box .x-reset .x-tab-bar-top .x-tab-bar-strip-default-plain{height:3px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-body{height:25px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-strip{height:3px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-body-default-plain{height:23px}.x-border-box .x-reset .x-tab-bar-bottom .x-tab-bar-strip-default-plain{height:3px}
    This CSS is scoped so that you can include it in a normal page, all ExtJS charts need to be in a div container with the class "x-reset".
    You probably can get rid of even more CSS, try removing more @include statements. As far as I know, charting virtually nowhere depends on CSS for it's rendering and styling. Only some VML rules for Internet Explorer (have a look at resources/theme/stylesheets/ext4/default/widgets/_drawcomponent.scss)
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address
    Reply With Quote Reply With Quote
  3. 8 Aug 2011 1:30 PM #13
    alphadogg
    alphadogg is offline
    Ext JS Premium Member
    Join Date
    Mar 2010
    Posts
    218
    Vote Rating
    1
    alphadogg is on a distinguished road
      0  

    Default


    Quote Originally Posted by dj View Post
    Are you sure that you are using the newest versions of Compass and Sass? ExtJS uses cutting edge features of both.
    To pre-paraphrase ordinary_guy, that would be one of the sources of problems... Building stable, "serious business" web apps with cutting edge technologies is often a hellish mix.
    Reply With Quote Reply With Quote
  4. 9 Aug 2011 2:07 AM #14
    ordinary_guy
    ordinary_guy is offline
    Sencha User ordinary_guy's Avatar
    Join Date
    Apr 2011
    Location
    London
    Posts
    8
    Vote Rating
    0
    ordinary_guy is on a distinguished road
      0  

    Default


    Thanks for posting a solution dj, I might give it another go.
    I installed the latest Ruby, Sass and Compass, as I had not used them before.

    Am using Ext JS 4.0.2a rather than 4.0.5.
    So most likely the Sencha team fixed the problem.

    Is 4.0.5 generally available for download yet?
    Reply With Quote Reply With Quote
  5. 10 Aug 2011 6:03 AM #15
    dj
    dj is offline
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    576
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about
      0  

    Default


    It's available for support subscribers at support.sencha.com
    Daniel Jagszent
    dɐɳiel@ʝɐgszeɳt.de <- convert to plain ASCII to get my email address
    Reply With Quote Reply With Quote

Similar Threads

  1. ExtJS 2.1 and charts
    By jsfan in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 May 2010, 3:54 AM
  2. Charts from ext gwt 2.0 available to extjs?
    By abnervv in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 17 Aug 2009, 5:20 AM
  3. extjs charts 3.0
    By sptangirala in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 27 Apr 2009, 9:26 PM
  4. how to use pie charts with Extjs
    By mallik in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 27 Jul 2008, 1:34 AM
  5. Plotkit Charts and extJs
    By dragontree in forum Community Discussion
    Replies: 11
    Last Post: 11 Sep 2007, 9:11 AM