Ext.plugin.RememberSelection by Bunchofstring – Version 1.0 Beta

Categories

Now your app can remember what a user selected and avoid the need to reselect the same list item every time. Multiple selections are also supported.

Show more

Products:

  • Sencha Touch 2.0

Browsers:

  • iOS (mobile)
  • Android (mobile)
  • Safari (desktop)
  • Chrome (desktop)

Screenshots

  • How it works...

    1. Initial load with default selection 2. User selects a list item 3. After refresh, the selection is restored //Fingerprint image by Wilfredor (CC-BY-SA-3.0) via Wikimedia Commons

    Show more

Readme

This extension saves and restores list selections using a localStorage proxy. When a user selects a list item like a country, language, etc. your app will remember the choice and restore their selections the next time this list is shown. Any handlers fire as though the user actually reselected each item.

View Example on Sencha Try

Requirements: 1. List must be bound to a store 2. The bound store must use a LocalStorage proxy 3. The store's model must include a "selected" field. I.e. {name:'selected',type:'boolean',defaultValue:false},

Related Notes: 1. Generally, avoid interfaces where users must select from a list of more than 7 items 2. The list must be painted before any developer-defined selection handlers will be triggered

Example: ' Ext.define('Country',{ extend:'Ext.data.Model', config:{ fields:[ {name:'name',type:'string'}, {name:'selected',type:'boolean',defaultValue:false} ], identifier:{ type:'uuid' }, proxy:{ id:'Country', type:'localstorage' } }, }); Ext.create('Ext.data.Store',{ model:'Country', storeId:'Country', proxy:{ id:'Country', type:'localstorage' }, autoLoad:{ callback:function(records){ if(Ext.isEmpty(records)){ this.setData([ {name:'United States'}, {name:'Canada'}, {name:'Mexico'} ]); } } }, autoSync:true }); Ext.Viewport.add({ xtype:'list', scrollable:true, itemTpl:'{name}', store:'Country', plugins:[ { xclass: 'Ext.plugin.RememberSelection', getDefaultSelectionRecords:function(list){ var store = list.getStore(); return [store.findRecord('name','United States')]; } } ] }); '

Version History

License

Other extensions by Bunchofstring

  • Screenshot

    Ext.plugin.DropdownMenu

    Adding a dropdown menu to your app is a snap! Designed for flexibility so you can make it look and behave how you want.

Other extensions in components

  • Screenshot

    SlideNavigation2

    A navigational component that utilizes a list which is hidden when not in use. Inspired by Facebook's sliding menu system.

  • Screenshot

    Datetimepicker

    Component to select datetime value.

  • Screenshot

    Pinch Zoom Image

    Able to use a pinch-zoom and touch panning a image in the sencha touch 2.

  • Screenshot

    Ext.ux.grid.FilterBar

    Plugin that enable filters on the grid headers

  • Screenshot

    Animated CSS3 button menu

    This component gives you an alternate way to build a cool menu in you Sencha Touch app. The menu is rendered and animated in path menu like style with CSS3 transition animations.

Reviews

Be the first to leave a review.