Ext.List LoadMask only shows on first load

[MattUCG]

My app has a search form that takes user input and binds search results to an Ext.List object (I am also using the ListPaging plugin). In the submit delegate for the search form, I run the following code. The first time a search is run, sencha's default greyed-out 'loading' mask is shown until the list is displayed. Every subsequent search just shows nothing until the list is displayed. Can anyone tell what is wrong here:

    onSearchSubmit: function() {
        var searchInput = Ext.getCmp('searchField');
        var searchValue = searchInput.getValue(); 


        var store = Ext.getStore('SearchResults');
        store.removeAll();
        store.getProxy().setExtraParam('query', searchValue);
        store.loadPage(1);
    }

[mitchellsimoens]

This code is working for me.

var store = new Ext.data.Store({
    fields : ['test'],
    proxy  : {
        type        : 'ajax',
        url         : 'data/php.php',
        extraParams : {
            sleep : 2 //use sleep() in PHP to defer
        },
        reader      : {
            type         : 'json',
            rootProperty : 'data'
        }
    }
});

new Ext.Container({
    fullscreen : true,
    layout     : 'fit',
    items      : [
        {
            xtype  : 'toolbar',
            docked : 'top',
            items  : [
                {
                    text    : 'Load Page One',
                    handler : function() {
                        store.loadPage(0);
                    }
                },
                {
                    text    : 'Load Page Two',
                    handler : function() {
                        store.loadPage(1);
                    }
                }
            ]
        },
        {
            xtype   : 'list',
            store   : store,
            itemTpl : '{test}'
        }
    ]
});

This is the JSON:

{
    "success": true,
    "total": 10,
    "data": [
        {
            "test": "One"
        },
        {
            "test": "Two"
        }
    ]
}

[MattUCG]

The problem appears to be with the ListPaging plugin. Adding the plugin causes the load mask to stop working after the first load. Here is a complete example of the problem using Twitters's JSON API:

/app/controller.Search.js:

Ext.define('LoadMaskTest.controller.Search', {
    extend: 'Ext.app.Controller',


    config: {
        control: {
            '#searchFormPanel': {
                submit: 'onSearchSubmit'
            },
        }
    },


    onSearchSubmit: function() {
        var searchInput = Ext.getCmp('searchField');
        var searchValue = searchInput.getValue(); 


        var store = Ext.getStore('SearchResults');
        store.removeAll();
        store.getProxy().setExtraParam('q', searchValue);
        store.loadPage(1);
    },
});

/app/store/SearchResults.js:

Ext.define('LoadMaskTest.store.SearchResults', {
    extend: 'Ext.data.Store',


    config: {
        clearOnPageLoad: false,
        fields: [
            { name: 'id' },
            { name: 'text' },
        ],
        proxy: {
            type: 'jsonp',
            url: 'http://search.twitter.com/search.json',
            reader: {
                rootProperty: 'results'
            }
        },
    },
});

/app/view/Viewport.js:

Ext.define('LoadMaskTest.view.Viewport', {
    extend: 'Ext.Container',


    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'formpanel',
                id: 'searchFormPanel',
                tbar: {
                    text: 'Search'
                },
                items: [
                    {
                        docked: 'top',
                        xtype: 'toolbar',
                        items: [
                            {
                                xtype: 'searchfield',                        
                        
                                id: 'searchField',
                                name: 'searchField',
                                placeHolder: 'Search',
                            },
                        ]
                    },
                ]
            },
            {
                xtype: 'list',                
                scrollable   : 'vertical',
                styleHtmlContent: true,
                store        : 'SearchResults',
                itemTpl      : '<h3>{text}</h3>',
                flex: 1,


                plugins: [
                    {
                        xclass: 'Ext.plugin.ListPaging',
                    }
                ],
            }
        ]
    }
});

/app.js:

Ext.application({
    requires: ['Ext.data.proxy.JsonP'],


    name: 'LoadMaskTest',


    views: ['Viewport'],
    controllers: ['Search'],
    stores: ['SearchResults'],


    launch: function () {
        var panel = Ext.create('LoadMaskTest.view.Viewport');
        Ext.Viewport.add(panel);
    }
});

[zonaib]

MattUCG ! any solution for this problem??

[MattUCG]

It is an open bug:

http://www.sencha.com/forum/showthread.php?193546