Build CMD missing some styles in the app.css file.

[okwei]

I'm using the latest Sencha Cmd 3.0.0.250 and Sencha touch 2.1.0

Used "sencha app build production" to build my application, 2 problems:

1. the build version of the app.css seems to miss many styles - in my case, it seems to be for the 'Ext.plugin.PullRefresh' and 'Ext.plugin.ListPaging', so the "Pull down to refresh" on top of the page and "load more" on the bottom of the page is not styled properly.

2. the build process seems to minified my app.css in the source code directory: /myApp/resources/css/app.css. So it also breaks the development files.

[okwei]

Tried with the latest sencha Cmd v3.0.2.288, same problems. This is how the pull down list look like when the styles are missing.

Capture.PNG

[manujanardhanan]

@okwei whr is your custom css resides ? its in a separate css file ?

[okwei]

@okwei whr is your custom css resides ? its in a separate css file ?

No, these are not custom css, I dont have a custom css file at all, they are in the /myApp/resources/css/app.css file when the app is generated by the command. But some styles are missing after build. the build process also changed the content of the /myApp/resources/css/app.css file.

[byemen]

I have't tried about pull to refresh plugin but I have an answer for list paging plugin.

first of all you need to add

@include sencha-loading-spinner;

this line to your app.scss file and

put

.x-list-paging {
padding: 1em 0;
}

.x-list-paging .x-loading-spinner {
display: none;
margin: auto;
}

.x-list-paging .x-list-paging-msg {
text-align: center;
color: #006bb6;
clear: both;
-webkit-border-radius: 6px;
border-radius: 6px;
}

.x-list-paging.x-loading {
padding: 0.5em;
}

.x-list-paging.x-loading .x-loading-spinner {
display: block;
}

.x-list-paging.x-loading .x-list-paging-msg {
display: none;
}


these style code to your index.html file.

it works for me

cheers!

[okwei]

I will give it a try, where's the related documentation for the @include sencha-loading-spinner;