1. #1
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    248
    Vote Rating
    24
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default Jarvus.field.ListPicker

    Jarvus.field.ListPicker


    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
    Attached Images
    Last edited by themightychris; 30 Apr 2012 at 8:27 AM. Reason: added screenshot
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Vote Rating
    10
    pepperseb is on a distinguished road

      0  

    Default


    Any screenshots?

    Thanks for sharing your work.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    248
    Vote Rating
    24
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    I just attached a screenshot to the top post
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    egatjens is on a distinguished road

      0  

    Default


    Great component, thank you...

  5. #5
    Touch Premium Member
    Join Date
    Dec 2010
    Location
    Jakarta, Indonesia
    Posts
    49
    Vote Rating
    0
    trinitrotoluen is on a distinguished road

      0  

    Default


    Quote Originally Posted by themightychris View Post
    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

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    3
    Vote Rating
    0
    egatjens is on a distinguished road

      0  

    Default


    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,

  7. #7
    Touch Premium Member
    Join Date
    Dec 2010
    Location
    Jakarta, Indonesia
    Posts
    49
    Vote Rating
    0
    trinitrotoluen is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    248
    Vote Rating
    24
    themightychris will become famous soon enough themightychris will become famous soon enough

      0  

    Default


    I forgot to mention that it takes the same options as selectfield, thanks for putting the example together egatjens!
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  9. #9
    Sencha User
    Join Date
    Dec 2010
    Posts
    34
    Vote Rating
    0
    lincon6 is an unknown quantity at this point

      0  

    Default can the picker be destroyed after hidding?

    can the picker be destroyed after hidding?


    I inspect the dom. The picker is still there as a actionsheet does.
    Can the picker be destroyed?

    Thanks.

  10. #10
    Sencha User
    Join Date
    Apr 2012
    Posts
    1
    Vote Rating
    0
    qdentity is on a distinguished road

      0  

    Default


    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!