1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Answers
    1
    Vote Rating
    4
    MattUCG is on a distinguished road

      0  

    Default Unanswered: Ext.List LoadMask only shows on first load

    Unanswered: Ext.List LoadMask only shows on first load


    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:

    Code:
        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);
        }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Answers
    3522
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This code is working for me.

    Code:
    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:

    Code:
    {
        "success": true,
        "total": 10,
        "data": [
            {
                "test": "One"
            },
            {
                "test": "Two"
            }
        ]
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Answers
    1
    Vote Rating
    4
    MattUCG is on a distinguished road

      0  

    Default


    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:
    Code:
    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:
    Code:
    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:
    Code:
    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:
    Code:
    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);
        }
    });

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Answers
    3
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


    MattUCG ! any solution for this problem??

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    39
    Answers
    1
    Vote Rating
    4
    MattUCG is on a distinguished road

      0