LoadMask & NestedList

[Bigbybob]

Hi everyone,

I'm trying to make a search-engine (i don't know if it's the right word ==> like google but for my company)

So, to resume, i have a dynamic nestedlist. When a user enter a few keywords, my store is loading by an handler on a button.

My data are created in a php script and return in Json.

My problem is : i can't put a loadmask during the search, and we don't know if the research is over, if it's still searching, or anything else.

I've tried a lots of things, in Extjs 3 it's works, but not in sencha touch.

So if you have any idea, or if you want more details...


PS : sorry for my english but i'm french and it's a little difficult for me

[realjax]

Try binding a loadmask direct to the store you are using. This is taken care of for you when using Ext.List but I'm not sure if this also is the case with Ext.NestedList

so

new Ext.LoadMask(Ext.getBody(), {store: yourStoreInstance});

should work..

[Bigbybob]

Thanks for the answer, but it doesn't work for me.

I tried to put this piece of code in everyplace possible... I'm a newbie in touch and like there is no book to learn...

I'll take a loot at Ext.List, maybe i'll find more about my problem

[realjax]

without any code it's going to be tough.

[Bigbybob]

Ok this is my script :

   

       
Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        
        var model = Ext.regModel('ListItem', {
            fields: [{name: 'text', type: 'string'}],
            proxy: {
                type: 'ajax',
                url :'src/recherche.php',
                reader: {
                    type: 'tree',
                    root: 'items',
                    totalProperty  : 'results',
                    successProperty: 'success'
                }
            }
        });
        
        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            autoLoad :false,
        });
           
                          
        var keyword = new Ext.form.TextField({
            xtype: 'searchfield',
            name : 'search',
            placeHolder: 'Search'
        });    
        
        var nestedList = new Ext.NestedList({
            title: 'Resultats',
            displayField: 'text',
            store: store
        });
        
 
        var viewport = new Ext.Panel({
            scroll: 'vertical',
            layout : "fit",
            fullscreen: true,
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [keyword,{
                    ui  : 'confirm-round',
                    text: 'Rechercher',
                    handler:function(){        
                        store.load({params: {keyword : keyword.getValue()}});                    
                    }
                }],
            }],
            items:[nestedList]
        });
          
    }
});

And my json file looks like this :

{
    "success": true,
    "results": "2",
    "text": "Resutlats",
    "items": [
        {
            "text": "POCKET COMMUNICATION--2011-07-07--test",
            "items": [
                {
                    "text": "Operation : test",
                    "leaf": true
                },
                {
                    "text": "Fichiers",
                    "items": [
                        {
                            "text": " Slide1-10000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide1.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide2-5000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide2.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide3-5000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide3.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide4-5000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide4.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide5-7000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide5.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide6-7000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide7-3000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide8-20000ms.txt ",
                            "leaf": true
                        },
                        {
                            "text": " mms.smil ",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Date : 2011-07-07",
                    "leaf": true
                },
                {
                    "text": "Nb Dest : 4",
                    "leaf": true
                },
                {
                    "text": "Raison Sociale : POCKET COMMUNICATION",
                    "leaf": true
                },
                {
                    "text": "Code Postal : 34000",
                    "leaf": true
                },
                {
                    "text": "Ville : MONTPELLIER ",
                    "leaf": true
                },
                {
                    "text": "Enseigne : ",
                    "leaf": true
                },
                {
                    "text": "Activite : ",
                    "leaf": true
                }
            ]
        },
        {
            "text": "POCKET COMMUNICATION--2011-07-07--test",
            "items": [
                {
                    "text": "Operation : test",
                    "leaf": true
                },
                {
                    "text": "Fichiers",
                    "items": [
                        {
                            "text": " Slide1-10000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide1.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide2-5000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide2.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide3-5000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide3.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide4-5000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide4.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide5-7000ms.gif ",
                            "leaf": true
                        },
                        {
                            "text": " Slide5.amr ",
                            "leaf": true
                        },
                        {
                            "text": " Slide6-7000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide7-3000ms.jpeg ",
                            "leaf": true
                        },
                        {
                            "text": " Slide8-20000ms.txt ",
                            "leaf": true
                        },
                        {
                            "text": " mms.smil ",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Date : 2011-07-07",
                    "leaf": true
                },
                {
                    "text": "Nb Dest : 3",
                    "leaf": true
                },
                {
                    "text": "Raison Sociale : POCKET COMMUNICATION",
                    "leaf": true
                },
                {
                    "text": "Code Postal : 34000",
                    "leaf": true
                },
                {
                    "text": "Ville : MONTPELLIER ",
                    "leaf": true
                },
                {
                    "text": "Enseigne : ",
                    "leaf": true
                },
                {
                    "text": "Activite : ",
                    "leaf": true
                }
            ]
        }
    ]
}

Thanks for your time

[realjax]

What are you running it on for test? Ipad/Iphone/Android/Chrome browser?

You might wanna try this handler, see if that works:

handler:function(){ 
    myMask = new Ext.LoadMask(Ext.getBody(), {message: 'Busy recherching :)'});    
    myMask.show();
    store.on('load',myMask.hide);     
    store.load({params: {keyword : keyword.getValue()}});                    
}

[Bigbybob]

I'm running my tests on android 2.2, blackberry (i don't know the exact phone) and iphone version 4."something".. ^^

I've tried your code, my loadMask is starting but it never stop... I think the

store.on('load',myMask.hide);

isn't call. So i did it with a

store.on('exception',myMask.hide);

too but i had the same problem...

I've already tried to do something like this with a

setLoading(true,true); store.load()

on my handler, and setLoading(false) when it's return "true" (at the end of my function load), that worked when there is a result, but when there is nothing... it's still running...

Maybe that's come from my php, when i create my json file. But my file syntax is good. I've checked it on a special website, JSONLint - The JSON Validator.

I've also tried to get my "totalproperty" and my "successproperty" but it look not possible.

[Bigbybob]

Ok i've got an idea.

Do you know a way to have an array with a json file?

[realjax]

Actually, the trailing comma at the end of this declaration might be causing havoc, remove it and try again:

items: [keyword,{
          ui  : 'confirm-round',
          text: 'Rechercher',
          handler:function(){
                  store.load({params: {keyword : keyword.getValue()}});                                     }
       }],

[Bigbybob]

Nope, it doesn't work neither.

I've tried with a "loadmask : true" and the codes you give me yesterday.

Do you know a way to put my Json file into an array? Like that i could test all of it more efficiently.