/**
* @class Ext.List
* @extends Ext.DataView
* A mechanism for displaying data using a list layout template. List uses an {@link Ext.XTemplate}
* as its internal templating mechanism, and is bound to an {@link Ext.data.Store} so that as the data
* in the store changes the view is automatically updated to reflect the changes.
* The view also provides built-in behavior for many common events that can occur for its contained items
* including itemtap, containertap, etc. as well as a built-in selection model. In order to use these
* features, an {@link #itemSelector} config must be provided for the DataView to determine what nodes it
* will be working with.
*
* Useful Properties
*
* - {@link #itemTpl}
* - {@link #store}
* - {@link #grouped}
* - {@link #indexBar}
* - {@link #singleSelect}
* - {@link #multiSelect}
*
*
* Useful Methods
*
* - {@link #bindStore}
* - {@link #getRecord}
* - {@link #getRecords}
* - {@link #getSelectedRecords}
* - {@link #getSelectedNodes}
* - {@link #indexOf}
*
*
* Useful Events
*
* - {@link #itemtap}
* - {@link #itemdoubletap}
* - {@link #itemswipe}
* - {@link #selectionchange}
*
*
* Screenshot:
* 
*
* Example code:
*
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
var list = new Ext.List({
fullscreen: true,
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,
store: store
});
list.show();
* @constructor
* Create a new List
* @param {Object} config The config object
* @xtype list
*/
Ext.List = Ext.extend(Ext.DataView, {
componentCls: 'x-list',
/**
* @cfg {Boolean} pinHeaders
* Whether or not to pin headers on top of item groups while scrolling for an iPhone native list experience
* Defaults to true
*/
pinHeaders: (Ext.is.Android || Ext.is.Blackberry) ? false : true,
/**
* @cfg {Boolean/Object} indexBar
* True to render an alphabet IndexBar docked on the right.
* This can also be a config object that will be passed to {@link Ext.IndexBar}
* (defaults to false)
*/
indexBar: false,
/**
* @cfg {Boolean} grouped
* True to group the list items together (defaults to false). When using grouping, you must specify a method getGroupString
* on the store so that grouping can be maintained.
*
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
// Group by the last name
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Michael', lastName: 'Mullany'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
*/
grouped: false,
/**
* @cfg {Boolean} clearSelectionOnDeactivate
* True to clear any selections on the list when the list is deactivated (defaults to true).
*/
clearSelectionOnDeactivate: true,
renderTpl: [
''
],
groupTpl : [
'',
'',
'',
'
',
'{items}',
'
',
'
' + this.itemTpl + '
';
if (this.onItemDisclosure) {
this.tpl += '
';
}
this.tpl += '