Un IndexBar es un componente para listar datos (principalmente el alfabeto) que puede ser usado para navegar rápidamente a través de una lista de datos (ver Ext.List).Cuando el usuario toca un item en el Ext.IndexBar,será disparado el evento index. Ejemplo de uso
<pre name="code" class="javascript">
//Modelo y store
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'},
{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'}
]
});
//la lista con el indexBar en true
var list = new Ext.List({
tpl: '{firstName} {lastName}',
itemSelector: 'div.contact',
singleSelect: true,
grouped : true,
indexBar : true,
store: store,
floating : true,
width : 350,
height : 370,
centered : true,
modal : true,
hideOnMaskTap: false
});
list.show();
</pre>
Adicionalmente se puede inicializar el Ext.IndexBar manualmente usando una configuración similar al siguiente ejemplo
<pre name="code" class="javascript">
var indexBar = new Ext.dataview.IndexBar({
dock : 'right',
overlay : true,
alphabet: true
});
</pre>
Opciones de configuración
• letters : Array
Un arreglo con las letras a mostrar en el index bar. Por defecto es el alfabeto ingles, A-Z.
• listPrefix : String
El prefijo que se agrega al inicio de la lista. Es útil agrega un "#" antes de cada numero.
Eventos
• index : ( Ext.data.Model record, HTMLElement target, Number index )
Se dispara cuando un item en el IndexBar ha sido tocado (presionado).La funcion controladora del evento sera ejecutada pasandole los siguientes argumentos.
• record : Ext.data.Model
El record tocado en el indexbar
• target : HTMLElement
El nodo HTML en el IndexBar que ha sido tocado
• index : Number
El indice sobre el indexBar correspondiente al record presionado
12
Ene 12
Twittear
Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor
Danos tus comentarios