Trouble coding List event handlers in the MVC controller?

[bweiler]

I'm working on a simple MVC template and I've almost got it working, but I'm having trouble coding list event handlers for list item taps in the controller. Based on the code segments below, what am I doing wrong?

Thanks




Ext.define('Test.controller.ContactController', {
extend: 'Ext.app.Controller',
models: ['ContactModel'], // Create the model instances
stores: ['ContactStore'], // Create the store instances
views: ['ContactList'], // Create the view instances
refs: [
{
ref: 'contacts',
selector: 'contactlist',
xtype: 'contactlist',
autoCreate: true
},
{
ref: 'viewport',
selector: 'viewport'
}
],

init: function() {
console.log('Initialized Contacts! This happens before the Application launch function is called');
Ext.Viewport.add({xtype: 'contactlist'});
this.control({
'contactlist list': {

itemTap: this.onItemTap
},
'contactlist': {
itemTap: this.onItemTap
},
'list': {
itemTap: this.onItemTap
}
});
},

onItemTap: function() {
console.log('The panel was rendered');
}
});






Ext.define('Test.view.ContactList', {
extend: 'Ext.Container',
xtype: 'contactlist',
requires: [
'Test.store.ContactStore',
'Test.model.ContactModel'
],
config: {
layout: 'fit',
items: [
{
docked: 'top',
xtype : 'toolbar',
title: 'Test 2'
},
{
xtype: 'list',
itemTpl: '<div class="contact">{firstName} <strong>{lastName}</strong></div>',
store: 'ContactStore'
}]
}
});






Ext.define('Test.store.ContactStore', {
extend: 'Ext.data.Store',
storeId: 'ContactStore',
model: 'Test.model.ContactModel',
sorters: 'lastName',


getGroupString: function(record) {
return record.get('lastName')[0];
},


data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
],

// 2.0 Workaround to load data
proxy: {
type: 'memory',
reader: {
type: 'json',
root: this.data
}
}
});

[mitchellsimoens]

2 things...

First, there is no 'itemTap' event, it's 'itemtap'.

Second, in your Store you define your proxy but in the reader's root config, you do this.data. Really doubt that is doing anything as this is referring to DOMWindow and not the store. Plus it's expecting a string

[bweiler]

I made the changes you suggested and now it works. I really like 2.0. The structure is much cleaner and there is a lot of automation. It's just taking me a bit to understand what is going on beneath the covers.

The 2.0 docs are still a work in progress and don't provide much guidance yet. However, I should have checked the 1.x docs first and not tried to recall the List events from memory.

[mitchellsimoens]

Yes... once the API is frozen the docs will get better. The next release (PR3) will have more doc fixes.