Hi,
Here is the tutorial:
1st: Create a sample project:
Go to your sdk folder:
$ sencha app create jarvus-tutorial ~/Sites/jarvus-tutorial
$ cd ~/Sites/jarvus-tutorial
2nd - Download jarvus files
$ cd ~/Download
$ git clone https://github.com/JarvusInnovations...ListPicker.git
$ cd Jarvus.field.ListPicker
3rd - Make changes
Create folder
$ mkidr ~/Sites/ jarvus-tutorial/app/view/jarvus
Copy jarvus files to your project.
$ cp -rf field picker ~/Sites/jarvus-tutorial/app/view/jarvus/
Modify namespace.
4th - Create model
Code:
Ext.define('jarvus-tutorial.model.Contact', { extend: 'Ext.data.Model', config: {
fields: ['id', 'name']
}
});
5th - Modify Main.js
Code:
Ext.define("jarvus-tutorial.view.Main", {
extend: 'Ext.Panel',
requires: [
'jarvus-tutorial.model.Contact',
'jarvus-tutorial.view.jarvus.field.ListPicker'
],
config: {
items: {
xtype: 'listpickerfield',
valueField: 'id',
displayField: 'name',
store: {
model:'jarvus-tutorial.model.Contact',
sorters: 'name',
grouper: {
groupFn: function(record) {
return record.get('name')[0];
}
},
data: [
{ id: '1', name: 'Tommy Maintz' },
{ id: '2', name: 'Rob Dougan' },
{ id: '3', name: 'Ed Spencer' },
{ id: '4', name: 'Jamie Avins' },
{ id: '5', name: 'Aaron Conran' },
{ id: '6', name: 'Dave Kaneda' },
{ id: '7', name: 'Jacky Nguyen' },
{ id: '8', name: 'Abraham Elias' },
{ id: '9', name: 'Jay Robinson'},
{ id: '10', name: 'Nigel White' },
{ id: '11', name: 'Don Griffin' },
{ id: '12', name: 'Nico Ferrero' },
{ id: '13', name: 'Jason Johnston'}
]
},
grouped: true
}
}
});
regards,