Results 1 to 10 of 10

Thread: Random CSS Value As Result of EXTJS 5 build breaking Application

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext Premium User
    Join Date
    Jan 2014
    Posts
    25

    Default Random CSS Value As Result of EXTJS 5 build breaking Application

    in my nameofapplication-all.css which is automatically generated as a result of and extjs build I am getting a random css element generated: the full css generated follows:

    Code:
    .e308efefc796036fec7aa464956b834ead679f03{display:block;}@import 'nameofapplication-all_01.css';@import 'nameofapplication-all_02.css';

    the random .e308efefc796036fec7aa464956b834ead679f03{display:block;} element appears to be breaking the following inclusions of :

    @nameofapplication-all_01.css
    @import 'nameofapplication-all_02.css


    Can someone please shed some light on why this erroneous css element is being generated.

    Regards,

    Dalste

  2. #2
    Ext Premium User
    Join Date
    Jan 2014
    Posts
    25

    Default

    UPDATE:I edited the nameofapplication-all.css it appears that if any css is added before the two @import statements the @imported files are not loaded by the browser. I wonder why the class with random css name is being generated by extjs build and why it is being added above the @import statements.

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Hi,

    What is the version of ExtJS you're working with?
    What is the version of Sencha Cmd? * You can run "sencha which" to get the full version.

    You might also post back here your index.html file and app.json file from your application.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    36

    Default

    @dalste34is right. I was struggling with this same issue for a couple of days until I came across this thread. In my case the thing that seems to trigger this problem is that when I use the extjs-tab-panel-ui mixin (i.e. the navigation ui from Kitchen sink see below ). if I comment out .SOME_GUID{display:block;},e.g..e308efefc796036fec7aa464956b834ead679f03{display:block;}, The microloader will load the CSS but if not, then no stye is applied

    I am using Ext JS 5 v5.0.1.255 and Sencha Cmd v5.0.1.231.
    PHP Code:
    /**
     * Generates a set of style rules for the "navigation" tab UI.
     */
    @include extjs-tab-panel-ui(
        
    $ui'navi',
        
    $ui-tab-background-colortransparent,
        
    $ui-tab-background-color-over#505050,
        
    $ui-tab-background-color-active#303030,
        
    $ui-tab-background-gradient'none',
        
    $ui-tab-background-gradient-over'none',
        
    $ui-tab-background-gradient-active'none',
        
    $ui-tab-color#acacac,
        
    $ui-tab-color-over#c4c4c4,
        
    $ui-tab-color-active#fff,
        
    $ui-tab-glyph-color#acacac,
        
    $ui-tab-glyph-color-over#c4c4c4,
        
    $ui-tab-glyph-color-active#fff,
        
    $ui-tab-glyph-opacity1,
        
    $ui-tab-border-radius0,
        
    $ui-tab-border-width0,
        
    $ui-tab-inner-border-width0,
        
    $ui-tab-padding24px,
        
    $ui-tab-margin0,
        
    $ui-tab-font-size15px,
        
    $ui-tab-font-size-over15px,
        
    $ui-tab-font-size-active15px,
        
    $ui-tab-line-height19px,
        
    $ui-tab-font-weightbold,
        
    $ui-tab-font-weight-overbold,
        
    $ui-tab-font-weight-activebold,
        
    $ui-tab-icon-width24px,
        
    $ui-tab-icon-height24px,
        
    $ui-bar-background-color#404040,
        
    $ui-bar-background-gradient'none',
        
    $ui-bar-padding0,
        
    $ui-strip-height0
    ); 

  5. #5
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    After defining the ui mixin do you run "sencha app build", "sencha ant sass", other?

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    36

    Default

    @slemmon Yes, I run "sencha package build" and "sencha app build" after defining the ui mixin but I still get this error

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Hi,

    Cmd 5.0.3 was recently released.
    Can you run "sencha upgrade" to download the latest, close all command line / terminal windows, and re-launch a command line window and run "sencha which" to make sure you're running with Cmd 5.0.3.324.

    Then try running the build once more to see if the issue persists.
    *You might run "sencha app upgrade" within your app and "sencha package upgrade" within the theme as well.

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    36

    Default

    Hi @slemmon,This issue is now fixed in Sencha CMD 5.0.3. I tested and this is OK now. Thanks

  9. #9
    Sencha User
    Join Date
    Jul 2014
    Posts
    6

    Default "x-sencha-command" broken in 5.0.3.324

    Hi @slemmon,

    I had the same problem as @dalste34 and I tried your solution with "sencha app upgrade" and "sencha package upgrade" but now the "x-sencha-command" task seems broken...

    I have the same error described in this post.

    The rollout is imminent and its a very bad surprise...

    Please do you have an idea?

    Thanks!

  10. #10
    Sencha User
    Join Date
    Jul 2014
    Posts
    6

    Default Workaround...

    Hello,

    As a workaround, I run the following ANT task into my Maven pom.xml during the packaging of my webapp:

    Code:
    <execution>
      <!--
        Fix the bug from Sencha CMD 5.0.1.231 that add the following string before the first "@import" into the main CSS file ([AppName-all.css]):
          .ed7fe9983be4da80ae69ac14630437def28bb23f{display:block;}
        This bug appeared since we used the "CSS Mixins" to customize ExtJS components like the Toast.
        (For example see "/ext-app/ext/packages/[AppThemeName]/sass/src/window/Window.scss")
        The use of the "CSS Mixins" generates three CSS files with "@import" instead of once.
      -->
      <id>fix-sencha-cmd-bug</id>
       <phase>process-sources</phase>
       <configuration>
        <tasks>
         <ac:if xmlns:ac="antlib:net.sf.antcontrib">
           <not><equals arg1="${envType}" arg2="local" /></not>
           <then>
             <replaceregexp file="${basedir}/src/main/webapp/resources/[AppName-all.css]"
              match=".+?([email protected])"
              replace=""
              byline="true" />
            </then>
          </ac:if> 
        </tasks>
      </configuration>
      <goals>
        <goal>run</goal>
      </goals>
    </execution>

Posting Permissions

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