Code:
// models/contact.js
app.models.Contact = new Ext.regModel('Contact', {
fields: [
{ name: 'id', type: 'int' },
{ name: 'first_name', type: 'string' },
{ name: 'last_name', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'phone', type: 'string' }
],
validations: [
{ type: 'presence', field: 'first_name', message: 'none' },
{ type: 'presence', field: 'last_name', message: 'none' },
{ type: 'email', field: 'email', message: 'Please enter a valid e-mail address.' },
{ type: 'phone', field: 'phone', message: 'Please enter a valid phone number.'}
],
proxy: {
type: 'ajax',
url: 'contacts.xml',
reader: {
type: 'xml',
record: 'contact'
},
writer: {
type: 'xml',
record: 'contact'
}
}
});
Ext.regStore('contacts', {
autoLoad: true,
model: 'Contact',
sorters: ['last_name'],
sortOnLoad: true,
getGroupString : function(record) {
return (record.get('last_name') || '#')[0].toUpperCase();
},
});
// in views/contacts/list.js
app.views.ContactsList = Ext.extend(Ext.Panel, {
title: 'Contacts',
layout: 'fit',
store: 'contacts',
initComponent: function () {
this.list = new Ext.List({
xtype: 'list',
id: 'contactslist',
grouped: true,
indexBar: true,
store: this.store,
itemTpl: '{first_name} <strong>{last_name}</strong>'
});
this.items = [this.list];
app.views.ContactsList.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('contacts/list', app.views.ContactsList);
// in controller:
var contact = Ext.ModelMgr.create(this.form.getValues(), 'Contact');
var store = Ext.getStore('contacts');
store.add(contact);
store.sync(); // Duplicate appears in views list once .sync() asynchronously completes.