Clear Up
SharpKit Reference

IndexBar Class

Namespace: Ext.dataview

Base Types

System.Object

Constructors

Properties

Name Description
alternateClassName IndexBar is a component used to display a list of data (primarily an alphabet) which can then be used to quickly navigate through a list (see {@link Ext.List}) of data. When a user taps on an item in the {@link Ext.IndexBar}, it will fire the {@link #index} event. * # Example: * Here is an example of the usage in a {@link Ext.List}: * @example phone portrait preview 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: 'Jacky', lastName: 'Nguyen'}, {firstName: 'Abraham', lastName: 'Elias'}, {firstName: 'Jay', lastName: 'Robinson'}, {firstName: 'Nigel', lastName: 'White'}, {firstName: 'Don', lastName: 'Griffin'}, {firstName: 'Nico', lastName: 'Ferrero'}, {firstName: 'Nicolas', lastName: 'Belmonte'}, {firstName: 'Jason', lastName: 'Johnston'} ] }); * var list = new Ext.List({ fullscreen: true, itemTpl: '
{firstName} {lastName}
', * grouped : true, indexBar : true, store: store, hideOnMaskTap: false }); * Alternatively you can initate the {@link Ext.IndexBar} component manually in a custom component by using something similar to the following example: * var indexBar = new Ext.dataview.IndexBar({ dock: 'right', overlay: true, alphabet: true }); *
extend IndexBar is a component used to display a list of data (primarily an alphabet) which can then be used to quickly navigate through a list (see {@link Ext.List}) of data. When a user taps on an item in the {@link Ext.IndexBar}, it will fire the {@link #index} event. * # Example: * Here is an example of the usage in a {@link Ext.List}: * @example phone portrait preview 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: 'Jacky', lastName: 'Nguyen'}, {firstName: 'Abraham', lastName: 'Elias'}, {firstName: 'Jay', lastName: 'Robinson'}, {firstName: 'Nigel', lastName: 'White'}, {firstName: 'Don', lastName: 'Griffin'}, {firstName: 'Nico', lastName: 'Ferrero'}, {firstName: 'Nicolas', lastName: 'Belmonte'}, {firstName: 'Jason', lastName: 'Johnston'} ] }); * var list = new Ext.List({ fullscreen: true, itemTpl: '
{firstName} {lastName}
', * grouped : true, indexBar : true, store: store, hideOnMaskTap: false }); * Alternatively you can initate the {@link Ext.IndexBar} component manually in a custom component by using something similar to the following example: * var indexBar = new Ext.dataview.IndexBar({ dock: 'right', overlay: true, alphabet: true }); *
© Copyright 2005-2011 SharpKit. All rights reserved.