www.gusucode.com > 一个基于extjs的强大聊天插件源码程序 > 一个基于extjs的强大聊天插件/extjame/ext-jame/js/ext2/examples/organizer/organizer.js
/* * Ext JS Library 2.0.2 * Copyright(c) 2006-2008, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); // Album toolbar var newIndex = 3; var tb = new Ext.Toolbar({ items:[{ text: 'New Album', iconCls: 'album-btn', handler: function(){ var node = root.appendChild(new Ext.tree.TreeNode({ text:'Album ' + (++newIndex), cls:'album-node', allowDrag:false })); tree.getSelectionModel().select(node); setTimeout(function(){ ge.editNode = node; ge.startEdit(node.ui.textNode); }, 10); } }] }); // set up the Album tree var tree = new Ext.tree.TreePanel({ // tree animate:true, enableDD:true, containerScroll: true, ddGroup: 'organizerDD', rootVisible:false, // layout region:'west', width:200, split:true, // panel title:'My Albums', autoScroll:true, tbar: tb, margins: '5 0 5 5' }); var root = new Ext.tree.TreeNode({ text: 'Albums', allowDrag:false, allowDrop:false }); tree.setRootNode(root); root.appendChild( new Ext.tree.TreeNode({text:'Album 1', cls:'album-node', allowDrag:false}), new Ext.tree.TreeNode({text:'Album 2', cls:'album-node', allowDrag:false}), new Ext.tree.TreeNode({text:'Album 3', cls:'album-node', allowDrag:false}) ); // add an inline editor for the nodes var ge = new Ext.tree.TreeEditor(tree, { allowBlank:false, blankText:'A name is required', selectOnFocus:true }); // Set up images view var view = new Ext.DataView({ itemSelector: 'div.thumb-wrap', style:'overflow:auto', multiSelect: true, plugins: new Ext.DataView.DragSelector({dragSafe:true}), store: new Ext.data.JsonStore({ url: '../view/get-images.php', autoLoad: true, root: 'images', id:'name', fields:[ 'name', 'url', {name: 'shortName', mapping: 'name', convert: shortName} ] }), tpl: new Ext.XTemplate( '<tpl for=".">', '<div class="thumb-wrap" id="{name}">', '<div class="thumb"><img src="../view/{url}" class="thumb-img"></div>', '<span>{shortName}</span></div>', '</tpl>' ) }); var images = new Ext.Panel({ id:'images', title:'My Images', region:'center', margins: '5 5 5 0', layout:'fit', items: view }); var layout = new Ext.Panel({ layout: 'border', width:650, height:400, items: [tree, images] }); layout.render('layout'); var dragZone = new ImageDragZone(view, {containerScroll:true, ddGroup: 'organizerDD'}); }); /** * Create a DragZone instance for our JsonView */ 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.firstChild.firstChild; // the img element 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)); if((i+1) % 3 == 0){ div.appendChild(document.createElement('br')); } } 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; } }); // Utility functions function shortName(name){ if(name.length > 15){ return name.substr(0, 12) + '...'; } return name; };