Extjs的一个自定义组件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yangliu19920502/article/details/51788802

在使用以前的代码的时候发现最新的Extjs版本会出问题，然后自己重写了一下图片浏览的组件，这里我是直接继承 Ext.Component 的，之前的是继承 Ext.view.View (没仔细去查，估计是css的问题吧),如果自定义其他组件建议用 Ext.view.View 这个，因为他可以帮你做到 store 和 tpl 的实现。

Ext.define('Extend.image.ImageView', {
    extend: 'Ext.Component',

    alias: 'widget.imagelistview',

    cls: 'images_view',
    tpl: [
        '<tpl for=".">',
        '<div class="thumb-wrap">',
        '<div class="thumb"><img src="' + Resource.getImagePath() + '/admin/download.action?id={id}" title="{realName}"></div>',
        '<nobr><span class="x-editable">{realName}</span></nobr></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
    ],
    emptyText: 'No files available',
    itemSelector: 'div.thumb-wrap',
    multiSelect: false,
    overItemCls: 'x-item-over', //选中
    focusItemCls: 'x-view-item-focused', //鼠标移动
    itemSelectedCls: 'x-item-selected', //选中
    trackOver: true,

    afterRender: function () {
        this.callParent(arguments);
        this.setStore(this.store);
    },

    setStore: function (store) {
        var me = this;
        if (store == null) {
            this.getEl().dom.innerHTML = this.emptyText;
        } else {
            this.getEl().dom.innerHTML = '';
            store.addListener('load', function (tis, records, successful, operation, eOpts) {
                me.renderImages(records);
            });
        }
        this.store = store;
    },

    renderImages: function (records) {
        var data = [], me = this;
        for (var i in records) {
            data.push(records[i].getData());
        }
        var tpl = Ext.XTemplate(this.tpl, data),
            last;
        data.forEach(function (o, i) {
            if (i == 0) {
                last = tpl.overwrite(me.getEl().dom, o);
            } else {
                last = tpl.insertAfter(last, o);
            }
            last._data = o;
        });
        this.elEvent();
    },

    elEvent: function () {
        var elements = Ext.query(this.itemSelector),
            me = this;
        Ext.each(elements, function (item) {
            var ele = Ext.get(item);
            ele.on({
                scope: me,
                click: me.onItemClick
            });

            var img = ele.child('div.thumb img');
            img.on({
                mousemove: me.onItemMouseMove,
                mouseout: me.onItemMouseOut,
                scope: me
            });
        })
    },

    onItemMouseMove: function (e, t) {
        t = Ext.get(t);
        t.parent().parent().addCls(this.focusItemCls);
    },

    onItemMouseOut: function (e, t) {
        var elements = Ext.query(this.itemSelector);
        for (var i in elements) {
            var ele = Ext.get(elements[i]);
            ele.removeCls(this.focusItemCls);
        }
    },

    onItemClick: function (e) {
        var t = Ext.get(e.currentTarget);
        if (!this.multiSelect) {
            var elements = Ext.query(this.itemSelector);
            for (var i in elements) {
                var ele = Ext.get(elements[i]);
                ele.removeCls(this.overItemCls);
                ele.removeCls(this.itemSelectedCls);
            }
        }

        if (t.hasCls(this.itemSelectedCls)) {
            t.removeCls(this.overItemCls);
            t.removeCls(this.itemSelectedCls);
        } else {
            t.addCls(this.itemSelectedCls);
            t.addCls(this.overItemCls);
        }
    },

    refreshStore: function () {
        this.store.load();
    },

    getSelect: function () {
        var elements = Ext.query(this.itemSelector),
            data = [];
        for (var i = 0; i < elements.length; i++) {
            data.push(elements[i]._data);
        }
        return data;
    }
});