Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invisible PullRefresh with SlideNavigation. CSS conflict #54

Open
trevoriancox opened this issue Jul 4, 2013 · 3 comments
Open

Invisible PullRefresh with SlideNavigation. CSS conflict #54

trevoriancox opened this issue Jul 4, 2013 · 3 comments

Comments

@trevoriancox
Copy link

This issue is specific to SlideNavigation. I have no problem on screens that are based on Panel. Using Sencha Touch 2.2.0.

PullRefresh is working (iOS, Chrome), but the arrow, text, and animation appear only if I do NOT include this in my SCSS:
[CODE]@import 'sencha-touch/default/src/dataview/List';[/CODE]
but of course that leaves me with a List that is not styled.

In all of the following cases, the list moves down and leaves blank space, and the arrow, text, and animation do not appear:

  • Using [CODE]touch/resources/css-debug/sencha-touch.css[/CODE]
  • Including [CODE]@import 'sencha-touch/default/all';[/CODE]
  • Including [CODE]@import 'sencha-touch/default/src/dataview/List';[/CODE]

My code:

Ext.define("ftapp.view.SlideMain", {
    extend: 'Ext.ux.slidenavigation.View',
....

Ext.define('ftapp.view.comp.MsgList', {
extend: 'Ext.dataview.List',
requires: 'ftapp.model.Msg',
xtype: 'msglist',
config: {
ui: 'round',
singleSelect: false, // no selection
disableSelection: true,
onItemDisclosure: true,
deferEmptyText: true, // defer until first load
itemTpl :'<div class="msgsrc">{fname}</div>', 
emptyText: '<div class="x-html">There are no news items.</div>',
store: 'RemoteMsg',
scrollToTopOnRefresh: false,

plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull down to refresh.',
}
],

},
});

And my SCSS:

@import 'sencha-touch/base';
@import 'sencha-touch/default';

@import 'sencha-touch/default/src/Panel';
@import 'sencha-touch/default/src/Button';
@import 'sencha-touch/default/src/picker/Picker';
@import 'sencha-touch/default/src/Toolbar';
@import 'sencha-touch/default/src/carousel/Carousel';
@import 'sencha-touch/default/src/form/Panel';
@import 'sencha-touch/default/src/MessageBox';
@import 'sencha-touch/default/src/dataview/List'; // *** breaks PullRefresh
@import 'sencha-touch/default/src/plugin/PullRefresh';
@import 'sencha-touch/default/src/field/Checkbox';
@import 'sencha-touch/default/src/field/Field';
@import 'sencha-touch/default/src/field/Search';
@import 'sencha-touch/default/src/field/Select';
@import 'sencha-touch/default/src/field/TextArea';
@import 'sencha-touch/default/src/form/FieldSet';

@rafasgomez
Copy link

It's because of "ui: 'round'," parameter config...

@trevoriancox
Copy link
Author

Yes, thanks! Switching to list.ui='normal' resolves the issue with PullRefresh.

@ds8k
Copy link

ds8k commented Apr 20, 2015

I've got this same problem but don't have ui: round anywhere in my code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants