X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/image-organizer/imgorg/ImageThumbPanel.js?ds=sidebyside diff --git a/examples/image-organizer/imgorg/ImageThumbPanel.js b/examples/image-organizer/imgorg/ImageThumbPanel.js deleted file mode 100644 index 85130b80..00000000 --- a/examples/image-organizer/imgorg/ImageThumbPanel.js +++ /dev/null @@ -1,209 +0,0 @@ -/*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC - * licensing@extjs.com - * http://www.extjs.com/license - */ -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; - } -}); \ No newline at end of file