Sencha Touch 2中如何在DataView中显示IndexBar
大家有没有注意到DataView中没有IndexBar这个组件的，但是list中确是有的。。。。。这个真的是非常的蛋疼，但是我们又惊奇的发现在list是继承自dataView的，因此，实际上我们是有办法将indexBar通过和list中一样的办法嵌套进dataView的。
首先我们来看一下效果：
通过indexBar字母的变换我们可以匹配不同的数据。
下面简单说下做法：
1.首先需要自定义一个indexBar
Ext.define('App.view.Homepage', { extend: 'Ext.dataview.DataView', xtype: 'homepage', requires: [ 'Ext.TitleBar', 'App.view.NewIndexBar', 'Ext.dataview.IndexBar' ], config: { baseCls: 'categories-list', itemTpl: [ '<div class="image" style="background-image:url(http://resources.shopstyle.com/static/mobile/image2-iPad/{urlId}.png)"></div>', '<div class="name">{label}</div>' ].join(''),scrollable: true, store:'Categories', NewIndexBar:true }, updateInline: function(newInline) { alert("saddsdsa"); this.callParent(arguments); if (newInline) { this.setOnItemDisclosure(false); this.setNewIndexBar(false); this.setGrouped(false); } }, applyNewIndexBar: function(NewIndexBar) { return Ext.factory(NewIndexBar, App.view.NewIndexBar, this.getNewIndexBar()); }, updateNewIndexBar: function(NewIndexBar) { alert("2") if (NewIndexBar && this.getScrollable()) { this.indexBarElement = this.getScrollableBehavior().getScrollView().getElement().appendChild(NewIndexBar.renderElement); NewIndexBar.on({ index: 'onIndex', scope: this }); this.element.addCls(this.getBaseCls() + '-indexed'); } }, onIndex: function(NewIndexBar, index) { Ext.getStore('Categories').clearFilter(); var me = this, key = index.toLowerCase(), store = me.getStore(), //store=Ext.getStore('Categories'), //groups = store.getGroups(), //ln = groups.length, scrollable = me.getScrollable(), scroller, group, i, closest, id, item; eval("var re = /^" + index + ".*/"); Ext.getStore('Categories').filter("label",re); isExc=false; }, destroy: function() { Ext.destroy(this.getNewIndexBar(), this.indexBarElement, this.header); this.callParent(); }});