List throws errors on scrolling when small store

[stan229]

REQUIRED INFORMATION


Ext version tested:


Sencha Touch 2.0 rev PR1



Browser versions tested against:


Chrome 15
Safari 5.1.1




Description:


When you have a list with a store that is smaller than the height of the list, it floods with errors trying to scroll



Steps to reproduce the problem:


Initialize store with small amount of Models
Scroll List



The result that was expected:


List would scroll without errors



The result that occurs instead:


Console gets flooded with the following errors
Uncaught TypeError: Cannot read property 'next' of undefined (Chrome)
TypeError: 'undefined' is not an object (evaluating 'a.next') (Safari)



Test Case:




//Model
Ext.define('SuperQualifier.model.Borrower', {
extend : 'Ext.data.Model',
fields : [{
name : "id",
type : "int"
}, {
name : "lastName",
type : "string"
}, {
name : "firstName",
type : "string"
}],
proxy: {
type:"rest",
url:'../borrower/getBorrowers',
reader: {
type: 'json',
root: ''
}
}
})

//Store
Ext.define('SuperQualifier.store.Borrowers', {
extend : 'Ext.data.Store',
model : 'SuperQualifier.model.Borrower',
requires : ['SuperQualifier.model.Borrower'],
getGroupString : function(record) {
return record.get('lastName')[0];
},
sorters: 'lastName'
});

//List
Ext.define('SuperQualifier.view.BorrowerList', {
extend : 'Ext.List',
xtype : 'borrowerlist',
config : {
store : 'Borrowers',
itemTpl : '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
grouped : true,
indexBar: true,
}
});

//JSON Data
[
• {
◦ "class": "com.breakpoint.Borrower",
◦ "id": 1,
◦ "dateCreated": "2011-11-02T05:26:32Z",
◦ "firstName": "Testfirst",
◦ "lastName": "Testlast",
◦ "lastUpdated": "2011-11-02T05:26:32Z",
◦ "qualifiers": [ ]
• }
]





HELPFUL INFORMATION


Operating System:


OSX 10.7.1

[mitchellsimoens]

This is producing no errors for me:


Ext.define('SuperQualifier.model.Borrower', {
extend : 'Ext.data.Model',
fields : [{
name : "id",
type : "int"
}, {
name : "lastName",
type : "string"
}, {
name : "firstName",
type : "string"
}],
proxy: {
type:"rest",
url:'../borrower/getBorrowers',
reader: {
type: 'json'
}
}
})

//Store
Ext.define('SuperQualifier.store.Borrowers', {
extend : 'Ext.data.Store',
model : 'SuperQualifier.model.Borrower',
requires : ['SuperQualifier.model.Borrower'],
getGroupString : function(record) {
return record.get('lastName')[0];
},
sorters: 'lastName',
data : [
{
"class": "com.breakpoint.Borrower",
"id": 1,
"dateCreated": "2011-11-02T05:26:32Z",
"firstName": "Testfirst",
"lastName": "Testlast",
"lastUpdated": "2011-11-02T05:26:32Z",
"qualifiers": [ ]
}
]
});

//List
Ext.define('SuperQualifier.view.BorrowerList', {
extend : 'Ext.List',
xtype : 'borrowerlist',
config : {
store : 'Borrowers',
itemTpl : '<div class="contact"><strong>{firstName}</strong> {lastName}</div>',
grouped : true,
indexBar: true
}
});
Ext.setup({
onReady: function() {

Ext.create('SuperQualifier.view.BorrowerList', {
fullscreen : true,
store : Ext.create('SuperQualifier.store.Borrowers')
});

}
});

[stan229]

Could it be with how I'm instantiating the list?

code was slightly updated:

var currentUser;

Ext.define('SuperQualifier.controller.Main', {
extend : 'Ext.app.Controller',
views : ['Main', 'MainContainer'],
stores : ['Borrowers'],
refs : [{
ref : 'main',
selector : 'mainview',
autoCreate : true,
xtype : 'mainview'
}, {
ref : 'loginForm',
xtype : 'loginform',
selector : 'loginform'
}, {
ref : 'login',
selector : '#login'
}, {
ref : 'borrowerList',
xtype : 'borrowerlist',
selector : 'borrowerlist'
}, {
ref : 'mainContainer',
xtype : 'maincontainer',
selector : 'maincontainer'
}],
init : function() {
Ext.require('SuperQualifier.model.User')
Ext.require('SuperQualifier.model.Company')
this.getMainView().create();
this.control({
'#login' : {
tap : this.authenticateUser
}
})
},
authenticateUser : function() {
var loginForm = this.getLoginForm();
var that = this;
Ext.Ajax.request({
url : '../user/authenticate',
params : loginForm.getValues(),
success : function(response) {
console.log(response);
var User = Ext.ModelMgr.getModel('SuperQualifier.model.User')
User.load(response.responseText, {
success : function(userModel) {
console.log(userModel)
currentUser = userModel;
//Load borrowers store
that.getMain().setActiveItem(that.getMainContainer());
that.getBorrowersStore().load({
params : {
id : currentUser.get('id')
},
callback : function(callback) {
console.log(callback);
}
})
},
failure : function(error) {
console.log(error)
}
})
},
failure : function(response) {
console.log(response);
}
})
}
});


//Main Container
Ext.define('SuperQualifier.view.MainContainer', {
extend : 'Ext.Container',
requires : ['SuperQualifier.view.BorrowerList'],
xtype : 'maincontainer',
config : {
layout : 'card',
items : [{
layout : 'fit',
docked : 'left',
width : 300,
cls : 'borrowercontainer',
itemId : 'borrowercontainer',
items : [{
docked : 'top',
xtype : 'toolbar',
centered : true,
defaults : {
iconMask : true
},
items : [{
iconCls : 'settings'
}, {
xtype : 'spacer'
}, {
xtype : 'title',
title : 'Borrowers'
}, {
xtype : 'spacer'
}, {
iconCls : 'add'
}]

}, {
xtype : 'borrowerlist'
}]
}, {
html : 'hello world'
}]

}
});

[stan229]

Just an update, this goes away when I remove the grouped: true from the List config