ExtJS: store.load() doesn't load data

Question

I'm faced with problem in ExtJS 4.2, that store.load() method doesn't load data from server, only retrieve json. My js/itfx/resources/genres.json file:

[{"name":"Action & Adventure","code":"ACTION-ADVENTURE-00"},{"name":"African","code":"AFRICAN-00"},{"name":"Anime","code":"ANIME-00"},{"name":"Bollywood","code":"BOLLYWOOD-00"},{"name":"Classics","code":"CLASSICS-00"},{"name":"Comedy","code":"COMEDY-00"},{"name":"Concert Films","code":"CONCERT-FILMS-00"},{"name":"Documentary","code":"DOCUMENTARY-00"},{"name":"Drama","code":"DRAMA-00"},{"name":"Foreign","code":"FOREIGN-00"},{"name":"Holiday","code":"HOLIDAY-00"},{"name":"Horror","code":"HORROR-00"},{"name":"Independent","code":"INDEPENDENT-00"},{"name":"Kids & Family","code":"KIDS-FAMILY-00"},{"name":"Made for TV","code":"MADE-FOR-TV-00"},{"name":"Middle Eastern","code":"MIDDLE-EASTERN-00"},{"name":"Music Documentaries","code":"MUSIC-DOCUMENTARIES-00"},{"name":"Music Feature Film","code":"MUSIC-FEATURE-FILMS-00"},{"name":"Musicals","code":"MUSICALS-00"},{"name":"Regional Indian","code":"REGIONAL-INDIAN-00"},{"name":"Romance","code":"ROMANCE-00"},{"name":"Russian","code":"RUSSIAN-00"},{"name":"Sci-Fi & Fantasy","code":"SCIFI-FANTASY-00"},{"name":"Short Films","code":"SHORT-FILMS-00"},{"name":"Special Interest","code":"SPECIAL-INTEREST-00"},{"name":"Sports","code":"SPORTS-00"},{"name":"Thriller","code":"THRILLER-00"},{"name":"Turkish","code":"TURKISH-00"},{"name":"Urban","code":"URBAN-00"},{"name":"Western","code":"WESTERN-00"}]

My model:

Ext.define('ITFX.model.films.info.FilmGenre', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name', type: 'string'},
        {name: 'code', type: 'string'}
    ]
});

My store:

Ext.define('ITFX.store.films.info.FilmGenre', {
    extend: 'Ext.data.Store',

    model: 'ITFX.model.films.info.FilmGenre',

    proxy: {
        type: 'ajax',
        url : 'js/itfx/resources/genres.json',
        reader: {
            type: 'json'
        }
    }
});

So, after execute code abowe:

var allFilmGenresStore = Ext.create('ITFX.store.films.info.FilmGenre');
allFilmGenresStore.load();

Methods

allFilmGenresStore.getCount(); //0
allFilmGenresStore.getTotalCount(); //0

will return, that store have nothing loaded What I'm doing wrong? Thanks in advance

Any errors in chrome developer tools console? If you look at the XHR request in chrome developer tools do you see the actual ajax request happen? — bakamike, Aug 16 '13 at 14:12
Are you waiting for the calls for the data to complete? Ajax is asynchronous and you can't run allFilmGenresStore.getCount() right after allFilmGenresStore.load() because the data may not have returned from the server yet. — Reimius, Aug 16 '13 at 17:21

score 0 · Answer 1 · answered Aug 16 '13 at 19:42

0

Yes, thanks for assist, the rout cause was, that store data loaded asynchronously. Code for load data, should be:

allFilmGenresStore.load({ 
    callback : function(records, options, success) { 
        // some custom logik 
    } 
});

answered Aug 16 '13 at 19:42

Evgeniy Fitsner

946
9
14

You can also add listener on the store 'load' event to do something with the data. – dbrin Aug 16 '13 at 20:09

score 0 · Answer 2 · answered Jun 18 '14 at 15:48

0

You have to change reader

reader: {
            type: 'json',
            root: 'root'
        }

and to send json_encode('root' => $data);

I hope it will help you

answered Jun 18 '14 at 15:48

Alexxander.Gor

48
5

ExtJS: store.load() doesn't load data

2 Answers2