View Full Version : Trying to use ListPagingPlugin and it attempts to load a mysterious file Plugin.js

21 Jan 2012, 7:54 PM
Here is my view/Threads.js

The list loads fine when the plugin is not present.

    extend: 'Ext.Panel',
    xtype: 'threads',
    id: 'myappthreads',
    requires: ['MyApp.view.Threaddetails'],
    config: {
        layout: 'card',
        items :[
               xtype: 'toolbar',
               docked: 'top',              
                items: [
                        text: "back",
                        ui: 'back',
                        handler: function(){
                xtype: 'list',
                store: 'MyApp.store.Threads',
                itemTpl: '<div><div>{title}</div><div>{replycount}</div></div>',
                plugins: [{ptype: 'listpaging'}],
                listeners: {
                    itemtap : function (view, idx, target, evt, opts){
                xtype: 'threaddetails',
                id: 'threadDetails'

Here is what my console output gives me with the debug.js file loaded

[Ext.Loader] Synchronously loading 'Ext.plugin.Plugin'; consider adding Ext.require('Ext.plugin.Plugin') above Ext.onReady

Additionally, I'm noting that a {appDir}/plugin/Plugin.js file is trying to be loaded up with a 404.

My store has the proper {pageSize: 25, clearOnPageLoad: false } properties.

What am I doing wrong? Please note that this is my first attempt at building out any app using ExtJS.

The Plugin attempts to load in when this view is loaded and executed by another action.

Any help is appreciated :)

21 Jan 2012, 9:16 PM
I see inside the Ext.Component definition, within the applyPlugins method, it's initiating a factory object using Ext.plugin.Plugin

applyPlugins: function(config) {
var ln, i;

if (!config) {
return config;

config = [].concat(config);

for (i = 0, ln = config.length; i < ln; i++) {
config[i] = Ext.factory(config[i], 'Ext.plugin.Plugin', null, 'plugin');//RIGHT HERE

return config;

Is this right? I don't see any reference elsewhere to Ext.plugin.Plugin nor do I see a file that matches the pattern.

22 Jan 2012, 1:09 AM
So, after doing some more digging, I discovered that the ListPaging plugin definition didn't have an alias: attribute.

I wonder if this should be submitted as a bug, but I'm not sure as I'm so new to ExtJS in general.

When I added the attribute to the ListPaging definition, my browser threw up on an undefined createInterceptor call off of Ext.util.Functions (and noticed that the method was defined in the Ext.Function object. Another issue?)

So, I adjusted that in my local copy of all-debug.js, and ran across quite a few other issues with the plugin, calling non existent methods and so forth. So...after about a couple hours of sifting through some of the libraries, I was able to patch together a working plugin. Mind you, I had to change some logic in the store object so my second page wouldn't scroll up to the top, but my plugin definition ended up looking like this

Ext.define('Ext.plugin.ListPaging', {
requires: 'Ext.PluginManager',
extend: 'Ext.util.Observable',
alternateClassName: 'Ext.plugins.ListPagingPlugin',
alias: 'plugin.listpaging',

//autoPaging: false,
autoPaging: true,

loadMoreText: 'Load More...',

init: function(list) {

this.list = list, scroller = list.getScrollable().getScroller();

scrollend: this.onScrollEnd,
scope: this

list.onBeforeLoad = Ext.Function.createInterceptor(list.onBeforeLoad, this.onBeforeLoad, this);
//this.mon(list, 'update', this.onListUpdate, this);

onListUpdate: function() {
if (!this.autoPaging) {
this.el.removeCls(Ext.baseCSSPrefix + 'loading');

this.loading = false;

render: function() {
var list = this.list,
targetEl = list.getEl(),
html = '';

if (!this.autoPaging) {
html += '<div class="' + Ext.baseCSSPrefix + 'list-paging-msg">' + this.loadMoreText + '</div>';

this.el = targetEl.createChild({
cls: Ext.baseCSSPrefix + 'list-paging' + (this.autoPaging ? ' ' + Ext.baseCSSPrefix + 'loading' : ''),
html: html// + Ext.LoadingSpinner

if (this.autoPaging) {
//this.mon(list.getScrollable(),'scrollend', this.onScrollEnd, this);
else {
this.mon(this.el, 'tap', this.onPagingTap, this);

this.rendered = true;

onBeforeLoad: function() {

if (this.loading && this.list.getStore().getCount() > 0) {
//this.list.setMask({disabled: true});
return false;

onPagingTap: function(e) {
if (!this.loading) {
this.loading = true;console.log('before next page');
this.list.getStore().nextPage();console.log('after next page');
this.el.addCls(Ext.baseCSSPrefix + 'loading');

onScrollEnd: function(scroller, pos) {
var padding = 30;
if ( (pos.y + padding) >= Math.abs(scroller.getMaxPosition().y)) {
this.loading = true;
}, function(){

Ext.preg('listpaging', Ext.plugins.ListPagingPlugin);


6 Feb 2012, 3:12 AM
Does anybody know if this has been fixed now?
I still have the problem. I can't get ListPaging to work properly.
I'm using Sencha Touch 2 Beta, the alias attribute is integrated, but I still have an "Uncaught TypeError: Cannot call method 'createInterceptor' of undefined" error on "Ext.define.init sencha-touch-all.js:15"

That's the code I'm using:

Ext.define('eGloss.view.Appointments', {extend: 'Ext.Panel',
config: {
layout: 'fit',
items: [{
xtype: 'list',
store: Ext.create('eGloss.store.Appointments'),
plugins: [
xclass: 'Ext.plugin.ListPaging',
autoPaging: true
itemTpl: '<span>{AppointmentID} {CustomerID}: {care}<br/>{Start:date("H:i")} - {End:date("H:i")}</span>',
grouped: true,
indexBar: false
this.on('activate', function() {
//load the store


Thanks for your help.

6 Feb 2012, 11:19 AM
Hi phuber,

For beta 2 we have done quite a bit of work on the ListPaging plugin. Please let us know if you still experience any problems with it after the next release.