JavaScript
Run Code
Open in Fiddle
Ext.application({ name: 'Fiddle', launch: function() { var store = Ext.create('Ext.data.Store', { autoLoad: true, autoSync: false, storeId: 'mystore', proxy: { type: 'memory' }, sorters: { property: 'Number' }, grouper: { groupFn: function(record) { try { if (record.get('IsEmergency')) { return 'InEmergency'; } return record.get('firstName')[0]; } catch (exception) { return ''; } }, sorterFn: function(item1, item2) { var me = this, transform = me._transform, root = me._root, value1, value2, property = 'IsEmergency'; if (root !== null) { item1 = item1[root]; item2 = item2[root]; } value1 = item1[property]; value2 = item2[property]; if (!value1 && !value2) { property = 'firstName'; value1 = item1[property]; value2 = item2[property]; if (value1 && value2) { if (transform) { value1 = transform(value1); value2 = transform(value2); } return value1 < value2 ? 1 : (value1 > value2 ? -1 : 0); } } if (transform) { value1 = transform(value1); value2 = transform(value2); } return value1 > value2 ? 1 : (value1 < value2 ? -1 : 0); } }, data: [{ firstName: 'Tommy', IsEmergency: true }, { firstName: 'Rob', IsEmergency: true }, { firstName: 'Ed', IsEmergency: false }, { firstName: 'Jamie', IsEmergency: false }, { firstName: 'Aaron', IsEmergency: false }, { firstName: 'Dave', IsEmergency: true }, { firstName: 'Jacky', IsEmergency: false }, { firstName: 'Abraham', IsEmergency: false }, { firstName: 'Jay', IsEmergency: false }, { firstName: 'Nigel', IsEmergency: false }, { firstName: 'Don', IsEmergency: false }, { firstName: 'Nico', IsEmergency: true }, { firstName: 'Jason', IsEmergency: false }] }); var list = Ext.create('Ext.dataview.List', { fullscreen: true, deselectOnContainerClick: false, store: store, grouped: true, onItemDisclosure: false, scrollToTopOnRefresh: false, itemTpl: '{firstName}', plugins: [ { xclass: 'Ext.plugin.PullRefresh', } ], }); Ext.defer(function() { store.add({ firstName: 'Bobby', IsEmergency: false }); store.removeAt(1); }, 1500); } });