当前位置：首页 > 软件开发 > Web开发 > JavaScript

Sencha Touch 2中如何在DataView中显示IndexBar

来源：岁月联盟编辑：exp 时间：2012-08-15

大家有没有注意到DataView中没有IndexBar这个组件的，但是list中确是有的。。。。。这个真的是非常的蛋疼，但是我们又惊奇的发现在list是继承自dataView的，因此，实际上我们是有办法将indexBar通过和list中一样的办法嵌套进dataView的。

首先我们来看一下效果：

通过indexBar字母的变换我们可以匹配不同的数据。

下面简单说下做法：

1.首先需要自定义一个indexBar

[javascript]
Ext.define('App.view.NewIndexBar', {
    extend: 'Ext.Component',
    alternateClassName: 'Ext.NewIndexBar',

    /**
     * @event index
     * Fires when an item in the index bar display has been tapped.
     * @param {Ext.dataview.IndexBar} this The IndexBar instance
     * @param {String} html The HTML inside the tapped node.
     * @param {Ext.dom.Element} target The node on the indexbar that has been tapped.
     */

    config: {
        baseCls: Ext.baseCSSPrefix + 'indexbar',

        /**
         * @cfg {String} direction
         * Layout direction, can be either 'vertical' or 'horizontal'
         * @accessor
         */
        direction: 'vertical',

        /**
         * @cfg {Array} letters
         * The letters to show on the index bar.
         * @accessor
         */
        letters: ['一', '二', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

        ui: 'alphabet',

        /**
         * @cfg {String} listPrefix
         * The prefix string to be appended at the beginning of the list.
         * E.g: useful to add a "#" prefix before numbers.
         * @accessor
         */
        listPrefix: null
    },

    // @private
    itemCls: Ext.baseCSSPrefix + '',

    updateDirection: function(newDirection, oldDirection) {
        alert("4");
        var baseCls = this.getBaseCls();

        this.element.replaceCls(baseCls + '-' + oldDirection, baseCls + '-' + newDirection);
    },

    getElementConfig: function() {
       alert("5");
        return {
            reference: 'wrapper',
            classList: ['x-centered', 'x-indexbar-wrapper'],
            children: [this.callParent()]
        };
    },

    updateLetters: function(letters) {
        alert("6");
        this.innerElement.setHtml('');

        if (letters) {
            var ln = letters.length,
                i;

            for (i = 0; i < ln; i++) {
                this.innerElement.createChild({
                    html: letters[i]
                });
            }
        }
    },

    updateListPrefix: function(listPrefix) {
        alert("7");
        if (listPrefix && listPrefix.length) {
            this.innerElement.createChild({
                html: listPrefix
            }, 0);
        }
    },

    // @private
    initialize: function() {
        this.callParent();

        this.innerElement.on({
            touchstart: this.onTouchStart,
            touchend: this.onTouchEnd,
            touchmove: this.onTouchMove,
            scope: this
        });
    },

    // @private
    onTouchStart: function(e, t) {
        alert("8");
        if(isExc)
        {
            e.stopPropagation();
            this.innerElement.addCls(this.getBaseCls() + '-pressed');//附加indexbar样式
            this.pageBox = this.innerElement.getPageBox();
            this.onTouchMove(e);
        }
    },

    // @private
    onTouchEnd: function(e) {
        alert("9");
        this.innerElement.removeCls(this.getBaseCls() + '-pressed');
        isExc=true;
    },

    // @private
    onTouchMove: function(e) {

        if(isExc)
        {
            var point = Ext.util.Point.fromEvent(e),
                target,
                pageBox = this.pageBox;

           /* console.log('point:'+point);
            console.log('target:'+target);
            console.log('pageBox:'+pageBox);*/

            if (!pageBox) {
                //console.log(pageBox);
                pageBox = this.pageBox = this.el.getPageBox();
            }

            if (this.getDirection() === 'vertical') {
                if (point.y > pageBox.bottom || point.y < pageBox.top) {
                    return;
                }
                target = Ext.Element.fromPoint(pageBox.left + (pageBox.width / 2), point.y);
                //console.log(target);
            }
            else {
                if (point.x > pageBox.right || point.x < pageBox.left) {
                    return;
                }
                target = Ext.Element.fromPoint(point.x, pageBox.top + (pageBox.height / 2));
            }

            if (target) {
                this.fireEvent('index',this, target.dom.innerHTML,target);
            }
        }
    },

    destroy: function() {
        alert("11");
        var me = this,
            elements = Array.prototype.slice.call(me.innerElement.dom.childNodes),
            ln = elements.length,
            i = 0;

        for (; i < ln; i++) {
            Ext.removeNode(elements[i]);
        }
        this.callParent();
    }

}, function() {
    //<deprecated product=touch since=2.0>

    /**
     * @member Ext.dataview.IndexBar
     * @method isHorizontal
     * Returns true when direction is horizontal.
     * @removed 2.0.0
     */
    Ext.deprecateMethod(this, 'isHorizontal', null, "Ext.dataview.NewIndexBar.isHorizontal() has been removed");

    /**
     * @member Ext.dataview.IndexBar
     * @method isVertical
     * Returns true when direction is vertical.
     * @removed 2.0.0
     */
    Ext.deprecateMethod(this, 'isVertical', null, "Ext.dataview.NewIndexBar.isVertical() has been removed");

    /**
     * @member Ext.dataview.IndexBar
     * @method refresh
     * Refreshes the view by reloading the data from the store and re-rendering the template.
     * @removed 2.0.0
     */
    Ext.deprecateMethod(this, 'refresh', null, "Ext.dataview.NewIndexBar.refresh() has been removed");

    /**
     * @Member Ext.dataview.IndexBar
     * @cfg {Boolean} alphabet
     * True to use the letters property to show a list of the alphabet.
     * @removed 2.0.0
     */
    Ext.deprecateProperty(this, 'alphabet', null, "Ext.dataview.NewIndexBar.alphabet has been removed");

    /**
     * @member Ext.dataview.IndexBar
     * @cfg {Boolean} itemSelector
     * A simple CSS selector for items.
     * @removed 2.0.0
     */
    Ext.deprecateProperty(this, 'itemSelector', null, "Ext.dataview.NewIndexBar.itemSelector has been removed");

    /**
     * @member Ext.dataview.IndexBar
     * @cfg {Boolean} store
     * The store to be used for displaying data on the index bar.
     * @removed 2.0.0
     */
    Ext.deprecateProperty(this, 'store', null, "Ext.dataview.NewIndexBar.store has been removed");

    //</deprecated>
});

2.嵌套的dataView
[javascript]
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();
    }
});