Jarvus.field.ListPicker

[themightychris]

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

https://github.com/JarvusInnovations...eld.ListPicker

[pepperseb]

Any screenshots?

Thanks for sharing your work.

[themightychris]

I just attached a screenshot to the top post

[trinitrotoluen]

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

[egatjens]

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

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: [
        '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,

[trinitrotoluen]

thx, I'm using this component on my app and work great
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.

thx

[themightychris]

I forgot to mention that it takes the same options as selectfield, thanks for putting the example together egatjens!

[egatjens]

Great component, thank you...