PDA

View Full Version : Jarvus.field.ListPicker



themightychris
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

https://github.com/JarvusInnovations/Jarvus.field.ListPicker

pepperseb
29 Apr 2012, 11:30 PM
Any screenshots?

Thanks for sharing your work.

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

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

trinitrotoluen
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

egatjens
27 May 2012, 10:04 AM
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/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: [
'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
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.

thx

themightychris
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!

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

Thanks.

qdentity
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!

themightychris
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

Tegola
12 Mar 2013, 8:45 AM
Hello,
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)
Search!
Ability to keep the view open and "submit" with a button instead of submit it on list selection
Bye

dusoft
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?

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

ravenwing
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?