Sencha Touch dataview with paging plugin

Question

Så i have noticed a very annoying bug in Sencha Touch. When i try to add the paging plugin to my dataview the "load more" text is placed above the items, not below like i want it to. It works with the standard listview.

I found another thread asking me to add "inifinte:true" to my dataview, but that did not help. Nor did "bottom:0" or "docked:'bottom'" options. Here is my code:

{
  xtype: 'dataview',
  plugins: {
     type: 'listpaging',
     loadMoreText: 'Indlæs flere..',
     autoPaging: true
  },
  flex: 1,
  cls: 'inspectionImages',
  itemId: 'imageContainer',
  padding: 10,
  style: 'background: #F7F7F7; color: black',
  emptyText: 'Der er ingen billeder på synet.',
  itemTpl: ['...'],
  loadingText: 'Henter billeder..',
  store: 'Images'
}

Also here is an example sencha fiddle code - framework is 2.4.x:

Ext.application({
launch: function () {
    var touchTeam = Ext.create('Ext.DataView', {
        fullscreen: true,
        plugins: {
            type: 'listpaging',
            loadMoreText: 'Indlæs flere..',
            autoPaging: true
        },
        store: {
            fields: ['name', 'age'],
            data: [{
                name: 'Jamie',
                age: 100
            }, {
                name: 'Rob',
                age: 21
            }, {
                name: 'Tommy',
                age: 24
            }, {
                name: 'Jacky',
                age: 24
            }, {
                name: 'Ed',
                age: 26
            }]
        },
        itemTpl: '<div>{name} is {age} years old</div>'
    });

    touchTeam.getStore().add({
        name: 'Abe Elias',
        age: 33
    });

    touchTeam.getStore().getAt(0).set('age', 42);
  } // launch
}); // application()

I have checked with the Ext.dataview.dataview in the sencha touch documentation, and this shows similar behaviour when adding the paging plugin so i know that this is probably not my own fault. I really would like the loadinText to be placed in the bottom of the dataview. Any suggestions would highly be appreciated!

Answer 1

The List Paging Plugin is Developed for Lists. If you are using it for the DataView then The Load more Text Will appear at the Top. I have faced the same Problem.I have Gone Through the List paging Plugin Js. Then Got Solution By just Changing the Css Property..

Inspect the "loading-spinner" CLass and change the Style to: style="font-size: 180%; margin: 10px auto;position:absolute; bottom: 0px; left: 50% and Inspect the Class -"list-paging-msg" And change the style to style="position:absolute; bottom: 0px; left: 50%;"

Answer 2

This is a bug in Sencha Touch. Mitchell Simoens has told here that it is meant for List only but I believe this should also support the dataview as it is light compared to list.

In sencha forum solutions , you can see they have changed the xtype from dataview to list. I also had same problem and I did the same. But you can do some addition if you want the look and feel of dataview instead of list.

disableSelection: true,
pressedCls: '',

I hope this helps you. Let me know if you need anything else.

Answer 3

I have found the solution after gone through the code of List paging Plugin, Ext.dataview.DataView and Ext.dataview.List.

Initialize list paging plugin after dataview initialized, then the "load more component" position will be right.

Ext.define('MyDataView', {
    extend: 'Ext.dataview.DataView',
    
    config: {
        /* do not set here
        plugins: [{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }, {
            xclass: 'Ext.plugin.PullRefresh'
        }]
        */
    },

    initialize: function() {
        var me = this;

        me.callParent();

        // Initialize plugin here, so the listpaging component will append after dataview container
        me.setPlugins([{
            xclass: 'Ext.plugin.ListPaging',
            autoPaging: true
        }, {
            xclass: 'Ext.plugin.PullRefresh'
        }]);
    }
}

Answer 4

As it turns out the pagingplugin were not meant for Dataview. It can be used though. In the end i ended up just manually moving the "load more" text in the DOM at the end of each load of the plugin. To ensure no listeners were lost i used the appendchild JS function and applying some custom css. Now everything works as expected.