Results 1 to 6 of 6

Thread: clear itemTpl on back in navigationView

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    29
    Vote Rating
    0
      0  

    Default clear itemTpl on back in navigationView

    Hi everybody.

    I've created a little apps which display a list of movies.
    The first screen display all alphabetic letters.

    1375862115-img1778.png

    When I tap on a letter, I push a view which display all movies which beginning by the letter.
    The first time the container is empty during loading :

    1375862232-img1779.png

    What I Want, it's when I tap on back button and tap another letter, my container don't display the list of metter before but an empty container...
    I got this (when I tap on "L", I see "C" movies, and I want empty list like the second screen) :

    1375862346-img1780.png

    After loading, I got the good list, but it's just during loading.

    1375862501-img1781.png

    So how can I have an empty list on change ? You can find my code.
    Thank a lot and sorry for my english..

    controller.js
    Code:
        onLettreSelect: function(list, index, node, record) {
            this.hideAbcButton1();
            this.hideDateButton1();
            if (!this.showFilm) {
                this.showFilm = Ext.create('Films.view.Lesfilms');
            }
            this.getMainview().push(this.showFilm);
            Ext.getCmp('searchField1').setValue('');
            this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
            var store = Ext.getStore('Movies');
            store.clearFilter();
            store.data.clear();
            store.setProxy({
                type: 'ajax',
                url: 'resources/json/'+record.get('lettre')+'.json'
            });
            store.setSorters({
                sorterFn: function (record) {
                    return record.get('titre').toLowerCase();
                }
            });
            store.load();
        },
    lesfilms.js
    Code:
     Ext.define('Films.view.Lesfilms', {
        extend: 'Ext.List',
        xtype: 'lesfilms',
    
        config: {
            title: 'Films',
            store: 'Movies',
            autoDestroy: false,
            items: [
                {
                    docked: 'top',
                    xtype: 'toolbar',
                    layout : {
                        type  : 'vbox',
                        pack  : 'center',
                        align : 'middle'
                    },
                    items: [
                        {
                            id: 'searchField1',
                            xtype: 'searchfield',
                            placeHolder: 'Recherche...'
                        }
                    ]
                }
            ],
            masked: {
                xtype: 'loadmask',                        
                message: 'Chargement...'
            },
            itemTpl: [
                '<div>{titre}</div>'
            ].join('')
        }
    });

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    101
      0  

    Default

    You can try hiding the list when the item is selected, and showing it again when the store finishes loading.

    controller.js
    Code:
    onLettreSelect: function(list, index, node, record) {
        this.hideAbcButton1();
        this.hideDateButton1();
        if (!this.showFilm) {
            this.showFilm = Ext.create('Films.view.Lesfilms');
        }
        this.getMainview().push(this.showFilm);
        Ext.getCmp('searchField1').setValue('');
        this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
        var store = Ext.getStore('Movies');
        store.clearFilter();
        store.data.clear();
        store.setProxy({
            type: 'ajax',
            url: 'resources/json/'+record.get('lettre')+'.json'
        });
        store.setSorters({
            sorterFn: function (record) {
                return record.get('titre').toLowerCase();
            }
        });
        store.addListener('load', function(){
            //unmask the list too if not somewhere else
            //list.unmask();
            list.show();
        });
    
        list.hide();
        store.load();
    },

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    29
    Vote Rating
    0
      0  

    Default

    Thank you for your reply, but it did not change anything.

  4. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    101
      0  

    Default

    Does the load event get fired? Can you step through the code and check if the List actually hides? What doesn't change?

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    29
    Vote Rating
    0
      0  

    Default

    Yes the load event fire, but after the store load finished.
    So during the load, same thing, I can see previous letter's items when container is masked.

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    29
    Vote Rating
    0
      0  

    Default

    Finally it WORKS !!

    I added a wrong filter (which display nothing) before load, and clear this after and it's ok !
    Thanks a lot :

    Code:
        onLettreSelect: function(list, index, node, record) {
            this.hideAbcButton1();
            this.hideDateButton1();
            if (!this.showFilm) {
                this.showFilm = Ext.create('Films.view.Lesfilms');
            }
            this.getMainview().push(this.showFilm);
            Ext.getCmp('searchField1').setValue('');
            this.getMainview().getNavigationBar().setTitle(record.get('lettre'));
            var store = Ext.getStore('Movies');
            store.filter('titre', '#######');
            store.data.clear();
            store.setProxy({
                type: 'ajax',
                url: 'resources/json/'+record.get('lettre')+'.json'
            });
            store.setSorters({
                sorterFn: function (record) {
                    return record.get('titre').toLowerCase();
                }
            });
            store.clearFilter();
            store.load();
        },

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •