View Full Version : Data binding problem using Ajaxproxy as data store

19 Oct 2011, 8:58 PM
Hi All,

I'm new to Sencha Touch. I'm trying to develop an application using Sencha Touch 1.x. Also I'm following MVC architecture. Initially I have used 'localstorage' as data store which was working fine. After that we changed the data store to Ajaxproxy. In this case, request is going and also we were getting the response from server side. The problem is with binding the data to the store object. Please go through the code given below and let me know.

Ext.regModel('ContactsModel', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'phone', type: 'string' },
{ name: 'email', type: 'string' }
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'name', message: 'Please enter name.' },
{ type: 'presence', field: 'phone', message: 'Please enter phone.' },
{ type: 'format', field: 'phone', matcher: /^(\+\d)*\s*(\(\d{3}\)\s*)*\d{3}(-{0,1}|\s{0,1})\d{2}(-{0,1}|\s{0,1})\d{2}$/, message: 'Please enter valid phone.' },
{ type: 'format', field: 'email', matcher: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/, message: 'Please enter valid email.' }

Ext.regStore('ContactsStore', {
model: 'ContactsModel',
proxy: {
type: 'ajax',
url: 'getcontacts.php',
reader: {
type : 'json',
root : 'contact',
totalCount : 'totalcnt'
autoLoad: true

ContactsApp.stores.contactsStore = Ext.StoreMgr.get('ContactsStore');

ContactsApp.views.ContactsListView = Ext.extend(Ext.Panel, {

contactsStore: Ext.emptyFn,
contactsList: Ext.emptyFn,

layout: 'fit',

initComponent: function () {

this.newButton = new Ext.Button({
text: 'Add Contact',
ui: 'action',
handler: this.onNewContact,
scope: this

this.topToolbar = new Ext.Toolbar({
title: 'Phone Book',
items: [
{ xtype: 'spacer' },

this.dockedItems = [this.topToolbar];

this.contactsList = new Ext.List({
store: this.contactsStore,
grouped: true,
emptyText: '<div style="margin:5px;">No contacts cached.</div>',
onItemDisclosure: true,
itemTpl: '<div class="list-item-title">{name}</div>' +
'<div class="list-item-narrative">{phone} {email}</div>'


this.contactsList.on('disclose', function (record, index, evt) {
this.onEditContact(record, index);
}, this),

this.items = [this.contactsList];


onNewContact: function () {
controller: ContactsApp.controllers.contactsController,
action: 'newcontact'

onEditContact: function (record, index) {
controller: ContactsApp.controllers.contactsController,
action: 'editcontact',
contact: record

refreshList: function () {

Also while running the application I'm getting the following error:
Uncaught TypeError: Cannot call method 'toLowerCase' of undefined

Thanks is advance...

23 Oct 2011, 9:13 PM
This issue was sorted out. Problem is related to the including order of models, controller, stores & views in html file...