list initialize in controller

Question

I'm a newbie in sencha and i'm trying to load a store with parameters depending on what view i'm in;

Therefor i'm trying to catch the initialize event for my list and loading the store in that.

But the initialize method does not seem to fire

my controller

Ext.define('FifaKings.controller.MainController', {
    extend: 'Ext.app.Controller',

    config: {
        views: ['Main','InsertMatch','Kings'],
        models: ['Match','User','Team'],
        stores: ['Match','Team','User'],
        refs: [
            {
                ref: 'insertMatchForm',
                selector: '#insertMatchForm'
            }
        ]
    },

    init: function() {
        console.log('Initialized!');
        Ext.Viewport.add(Ext.create('FifaKings.view.Main'));

        this.control({
            'button[action=insertMatchSubmit]' : {
                tap: 'insertMatchForm'
            },
            'list[id=kingsLeagueList]' : {
                initialize: 'loadKingsMatches'
            }

        });

    },

    insertMatchForm : function(){
        var form = this.getInsertMatchForm();

        form.submit({
            url:'contact.php'
        });
    },

    loadKingsMatches : function(){
        console.log('shit is working');
    }
});

my view:

Ext.define('FifaKings.view.Kings', {
    extend: 'Ext.navigation.View',

    requires:[
        'Ext.dataview.List'
    ],
    xtype:'kingspanel',
    config: {
        title: 'Kings',
        iconCls: 'star',

        items: {
            xtype: 'list',
            id:'kingsLeagueList',
            itemTpl: new Ext.XTemplate(
                '<table width="100%" border="0">',
                    '<tr>',
                    '<td width=\"35%\">{Player1}</td>',
                    '<td width=\"30%\" align=\"center\">{ScorePlayer1} - {ScorePlayer2}</td>',
                    '<td width=\"35%\" align=\"right\">{Player2}</td>',
                    '</tr>',
                '</table>'
        ),
        store: 'Match'

        }

    }
});

What does Ext.ComponentQuery.query('list[id=kingsLeagueList]')[0] return in the console ? — Titouan de Bailleul
i changed id to itemId and now Ext.ComponentQuery.query('list[itemId=kingsLeagueList]')[0] does return the list but it still doesn't call my method — SnK
Ext.ComponentQuery.query(...)[0] is what is called when you add a reference to a component in your controller. Try to change the reference of your list to something like #kingsLeagueList instead of list[id=kingsLeagueList]. — Titouan de Bailleul
Also I wonder why you set up the controller's controls within its init function ? Any reason for that ? — Titouan de Bailleul

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-08-10T12:47:36

To reference your list, you should do something like this :

 this.control({
     'button[action=insertMatchSubmit]' : {
         tap: 'insertMatchForm'
     },
     'kingspanel list' : {
         initialize: 'loadKingsMatches'
     }
 });

I'm used never to work with ids in case I have to create two identical component

Hope this helps

list initialize in controller

1 Answers