PDA

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



pm.sreejith
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.

Model
----------
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.' }
]
});


Store
------------
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');


View
-------
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.newButton
]
});

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];

ContactsApp.views.ContactsListView.superclass.initComponent.call(this);
},

onNewContact: function () {
Ext.dispatch({
controller: ContactsApp.controllers.contactsController,
action: 'newcontact'
});
},

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

refreshList: function () {
this.contactsList.refresh();
}
});

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


Thanks is advance...

pm.sreejith
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...