View Full Version : Jarvus.field.ListPicker

29 Apr 2012, 4:58 PM
I needed something like the selectfield but that could accomodate a huge number of values, I refactored the official DatePicker classes so that I could build on top of their functionality. This field will show a fullscreen sheet when touched containing an Ext.List with grouping and indexbar enabled. It should be easy at this point to add find-as-you-type filtering and I may do it in a future update.

Here is the code in case it would be helpful to anyone, I'd also be curious to hear someone from Sencha's take on how I gutted DatePicker and if they'd consider splitting them in future releases so the pseudofield->sheet model can be easily built-on by developers


29 Apr 2012, 11:30 PM
Any screenshots?

Thanks for sharing your work.

30 Apr 2012, 8:28 AM
I just attached a screenshot to the top post

24 May 2012, 2:07 PM
Great component, thank you...

27 May 2012, 9:13 AM
I just attached a screenshot to the top post

Some tutorial how to use this component would be nice if you don't mind :)
Thx, good component

27 May 2012, 10:04 AM

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/Jarvus.field.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

Ext.define('jarvus-tutorial.model.Contact', { extend: 'Ext.data.Model', config: {
fields: ['id', 'name']

5th - Modify Main.js

Ext.define("jarvus-tutorial.view.Main", {
extend: 'Ext.Panel',

requires: [

config: {
items: {
xtype: 'listpickerfield',
valueField: 'id',
displayField: 'name',

store: {

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



30 May 2012, 4:57 PM
thx, I'm using this component on my app and work great ~o)
I have idea to add search box on top of the list so we can do searching also, but I'm still working on it not finished yet.


4 Aug 2012, 5:54 PM
I forgot to mention that it takes the same options as selectfield, thanks for putting the example together egatjens!

7 Aug 2012, 6:45 PM
I inspect the dom. The picker is still there as a actionsheet does.
Can the picker be destroyed?


24 Sep 2012, 5:14 AM
Thanks, great extension!

However, in Sencha Touch 2.1.0-b3 the list does not show up, when one clicks a select field (listpickerfield). Only the 'clear' and 'cancel' buttons are shown. In Sencha Touch 2.0.1 everything works fine.

Who is able to help with this? Thanks in advance!

9 Oct 2012, 6:05 PM
I'll be porting the app I built it for to 2.1 once it hits general release, so I'll come back here and update this thread when that happens. Thanks for the heads up :D

12 Mar 2013, 8:45 AM
any updates on this one? It would be a really useful component, but it isn't working on Touch 2.1.

Also, having these feature would be cool too:

Show as a modal panel instead of sheet (useful with tablets)
Ability to keep the view open and "submit" with a button instead of submit it on list selection

13 Sep 2013, 7:35 AM
Great component! Any News? I'm searching a list picker to use in sencha 2.2.1.
Other alternative?

15 Sep 2013, 7:11 PM
Thanks a lot, great component :)

1 Jul 2014, 5:17 AM
Ditto. This looks like a great component. It doesn't look like it's been updated for awhile though. Does anyone know of a good alternative, preferably with a search bar?