The source code

    Imgorg.ImageThumbPanel = Ext.extend(Ext.Panel, {
        minWidth: 80,
        title: 'All Photos',

        initComponent: function() {
            this.tfId = 'tag-filter-'+Ext.id();

            var sliderValue = 0;
            var p = Ext.state.Manager.getProvider();
            if (p) {
                sliderValue = Ext.num(p.get('sliderValue'), 0);
            }

            Ext.apply(this,{
                layout:'fit',
                cls: 'images-view',
                items:Ext.apply({
                    xtype: 'img-dv',
                    itemId: 'imgorg-dv'
                },this.dvConfig||{}),
                bbar:['Tags:',{
                    xtype: 'img-tagmulticombo',
                    id: this.tfId,
                    listeners: {
                        select: function(combo, record, idx) {
                            var vals = combo.getValue();
                            this.tagFilter(vals);
                            return true;
                        },
                        clearall: function(combo) {
                            this.clearFilter();
                        },
                        scope: this
                    }
                },'->',{
                    xtype: 'slider',
                    itemId: 'size-slider',
                    width: 200,
                    style: 'margin-right:20px;',
                    value: sliderValue,
                    plugins: new Ext.ux.SliderTip({
                        getText: function(slider){
                            return String.format('{0}%', 100+slider.getValue()*3);
                        }
                    }),
                    listeners: {
                        change: this.onChange,
                        scope: this
                    }
                }]
            });
            Imgorg.ImageThumbPanel.superclass.initComponent.call(this);
            this.on('activate', this.onActivate, this);
        },

        afterRender: function() {
            Imgorg.ImageThumbPanel.superclass.afterRender.call(this);
            this.view = this.getComponent('imgorg-dv');
            (function() {
                this.dragZone = new ImageDragZone(this.view, {
                    containerScroll:true,
                    ddGroup: 'organizerDD'
                });
            }).defer(100, this);
        },

        onActivate: function() {
            this.reload();
            var p = Ext.state.Manager.getProvider();
            if (p) {
                sliderValue = Ext.num(p.get('sliderValue'), 0);
                var slider = this.getBottomToolbar().getComponent('size-slider');
                slider.setValue(sliderValue);
                this.onChange(slider);
            }
        },

        onChange: function(slider, e) {
            var p = Ext.state.Manager.getProvider();
            if (p) {
                p.set('sliderValue', slider.getValue());
            }
            Ext.util.CSS.updateRule('.images-view .thumb img','height',this.minWidth+slider.getValue()*3);
        },

        tagFilter: function(vals) {
            if (this.view.store.lastOptions.params) {
                var album = this.view.store.lastOptions.params.album;
            }

            this.view.store.load({
                params: {
                    tags: vals,
                    album: album
                }
            });
        },

        clearFilter: function() {
            var album = this.view.store.lastOptions.params.album;
            this.view.store.load({
                params: {
                    album: album
                }
            });
            Ext.getCmp(this.tfId).reset();
        },

        albumFilter: function(album) {
            this.getComponent('imgorg-dv').store.load({
                params: {
                    album: album.id
                }
            });
        },

        reload: function() {
            this.view.store.reload();
        }
    });
    Ext.reg('img-thumbpanel', Imgorg.ImageThumbPanel);

    ImageDragZone = function(view, config){
        this.view = view;
        ImageDragZone.superclass.constructor.call(this, view.getEl(), config);
    };
    Ext.extend(ImageDragZone, Ext.dd.DragZone, {
        // We don't want to register our image elements, so let's
        // override the default registry lookup to fetch the image
        // from the event instead
        getDragData : function(e){
            var target = e.getTarget('.thumb-wrap');
            if(target){
                var view = this.view;
                if(!view.isSelected(target)){
                    view.onClick(e);
                }
                var selNodes = view.getSelectedNodes();
                var dragData = {
                    nodes: selNodes
                };
                if(selNodes.length == 1){
                    dragData.ddel = target;
                    dragData.single = true;
                }else{
                    var div = document.createElement('div'); // create the multi element drag "ghost"
                    div.className = 'multi-proxy';
                    for(var i = 0, len = selNodes.length; i < len; i++){
                        div.appendChild(selNodes[i].firstChild.firstChild.cloneNode(true)); // image nodes only
                        if((i+1) % 3 == 0){
                            div.appendChild(document.createElement('br'));
                        }
                    }
                    var count = document.createElement('div'); // selected image count
                    count.innerHTML = i + ' images selected';
                    div.appendChild(count);

                    dragData.ddel = div;
                    dragData.multi = true;
                }
                return dragData;
            }
            return false;
        },

        // this method is called by the TreeDropZone after a node drop
        // to get the new tree node (there are also other way, but this is easiest)
        getTreeNode : function(){
            var treeNodes = [];
            var nodeData = this.view.getRecords(this.dragData.nodes);
            for(var i = 0, len = nodeData.length; i < len; i++){
                var data = nodeData[i].data;
                treeNodes.push(new Ext.tree.TreeNode({
                    text: data.name,
                    icon: '../view/'+data.url,
                    data: data,
                    leaf:true,
                    cls: 'image-node'
                }));
            }
            return treeNodes;
        },

        // the default action is to "highlight" after a bad drop
        // but since an image can't be highlighted, let's frame it
        afterRepair:function(){
            for(var i = 0, len = this.dragData.nodes.length; i < len; i++){
                Ext.fly(this.dragData.nodes[i]).frame('#8db2e3', 1);
            }
            this.dragging = false;
        },

        // override the default repairXY with one offset for the margins and padding
        getRepairXY : function(e){
            if(!this.dragData.multi){
                var xy = Ext.Element.fly(this.dragData.ddel).getXY();
                xy[0]+=3;xy[1]+=3;
                return xy;
            }
            return false;
        }
    });