1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    17
    Vote Rating
    0
    nikki_mcmahon is on a distinguished road

      0  

    Default remove a tabpanel icon in the dd proxy

    remove a tabpanel icon in the dd proxy


    hi there,

    i am currently implementing some drag drop behaviour on a tabpanel... so, each of the tab's is draggable.
    my problem is that the proxy renders the tab with the icon sitting dirrectly under the text of the tab.

    does anyone know how i can access that specific element within the proxy object and make changes to it?
    basically, i'd like to either remove the icon or move the text up a little.

    thanks a mil',
    nikki

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,942
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    See some code please?

  3. #3
    Ext User
    Join Date
    Oct 2007
    Posts
    17
    Vote Rating
    0
    nikki_mcmahon is on a distinguished road

      0  

    Default


    hi there,

    ok, here's the code... the drag and drop stuff is some code done by thommy and is the place where assumably i'll need to make changes. i have been trying to do some stuff in the dragsource's beforeDragEnter event, like hiding the proxy with proxy.hide(), but it hasn't worked... i've also tried quite a few of the other methods available for both the dragsource proxy and the proxy's ghost, but to no avail.

    Code:
    Ext.ux.DDTabPanel = Ext.extend(Ext.TabPanel, {
    	/**
    	 * @method initEvents
    	 *
    	 *   Overwritten: declare the tabpanel as a drop target
    	 */
    	initEvents: function(){
    		Ext.ux.DDTabPanel.superclass.initEvents.call(this);
    		this.dd = new Ext.ux.DDTabPanel.DropTarget(this, {
    			ddGroup: 'dd-tabpanel-group'
    		});
    	},
    	
    	/**
    	 * @method initTab
    	 * 	Overwritten: init the drag source after (!) rendering the tab
    	 *
    	 * @param {Object} tab
    	 * @param {Object} index
    	 */
    	initTab: function(tab, index){
    		Ext.ux.DDTabPanel.superclass.initTab.call(this, tab, index);
    		tab.position = (index + 1) * 2; // 2, 4, 6, 8, ... (2n)
    		tab.on('render', function(tab){
    			var id = this.id + '__' + tab.id;
    			tab.ds = new Ext.dd.DragSource(id, {
    				ddGroup: 'dd-tabpanel-group',
    				dropEl: tab,
    				dropElHeader: Ext.get(id, true)
    			});
    			
    			tab.ds.beforeDragEnter = function(target, event, id){
    				target.tabpanel.activate(this.dropEl);
    			};
    			
    			tab.ds.onBeforeDrag = function(target, event, id){
    				this.pData = this.getProxy();
    			};
    		}, this);
    		// force rendering of the tab
    		tab.show();
    	}
    });
    
    /**
     * @class Ext.ux.DDTabPanel.DropTarget
     *
     * 	Implements the drop behavior of the tabpanel
     *
     * @param {Object} tabpanel
     * @param {Object} cfg
     */
    Ext.ux.DDTabPanel.DropTarget = function(tabpanel, config){
    	this.tabpanel = tabpanel;
    	// target is the header area of the given tabpanel
    	var target = Ext.select('div.x-tab-panel-header', false, 'div##panel').elements[0];
    	Ext.ux.DDTabPanel.DropTarget.superclass.constructor.call(this, target, config);
    };
    
    Ext.extend(Ext.ux.DDTabPanel.DropTarget, Ext.dd.DropTarget, {
    	notifyOver: function(dd, e, data){
    		if (this.tabpanel.items.length < 2) {
    			return 'x-dd-drop-nodrop';
    		}
    		return 'x-dd-drop-ok';
    	},
    	
    	notifyDrop: function(dd, e, data){
    	
    		var tabPanelOffset = this.tabpanel.el.dom.offsetLeft;
    		var tabs = this.tabpanel.items;
    		
    		// at this point the items in 'tabs' are sorted by their positions
    		var eventPosX = e.getXY()[0];
    		var last = tabs.length;
    		var newPos = last;
    		dd.dropEl.position = last * 2 + 1; // default: 'behind the rest'
    		
    		for (var i = 0; i < last; i++) {
    			var tab = tabs.itemAt(i);
    			// Is this tab target of the drop operation?
    			var dom = tab.ds.dropElHeader.dom;
    			var tabLeft = tabPanelOffset + dom.offsetLeft;
    			var tabRight = tabLeft + dom.clientWidth;
    			var tabMiddle = tabLeft + dom.clientWidth / 2;
    			
    			if (eventPosX <= tabRight) {
    				dd.dropEl.position = eventPosX > tabMiddle ? tab.position + 1 : tab.position - 1;
    				newPos = eventPosX > tabMiddle ? i + 1 : i;
    				break;
    			}
    		}
    		
    		dd.proxy.hide();
    		
    		dd.el.dom.parentNode.insertBefore(dd.el.dom, dd.el.dom.parentNode.childNodes[newPos]);
    		
    		// sort tabs by their actual position 
    		tabs.sort('ASC', function(a, b){
    			return a.position - b.position;
    		})
    		// adjust tab position values
    		tabs.each(function(tab, index){
    			tab.position = (index + 1) * 2;
    		});
    	}
    });
    
    Ext.onReady(function(){
    	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    	<cfoutput>Ext.BLANK_IMAGE_URL = '#application.urlroot#/javascript/ext/docs/resources/s.gif';</cfoutput>
    	
    	   var viewport = new Ext.Viewport({
    			layout:'border',
    			items:[
    				new Ext.BoxComponent({ // raw
    					region:'north',
    					el: 'north',
    					height:35
    				}),{
    					region:'west',
    					id:'west-panel',
    					title:'Navigation Menu',
    					split:true,
    					width: 250,
    					minSize: 175,
    					maxSize: 400,
    					collapsible: true,
    					margins:'0 0 0 5',
    					contentEl:'west',
    					autoScroll: true
    				},
    
    				Ext.centerTabs = new Ext.ux.DDTabPanel({
    					region:'center',
    					id:'relayTabPanel',
    					deferredRender:false,
    					activeTab:0,
    					enableTabScroll:true,
    					autoScroll:false,
    					items:[{
    						contentEl:'tabArea',
    						title: 'Home',
    						id: 'homeTab',
    						iconCls: 'homeIcon',
    						closable:false,
    						containerScroll:false,
    						html: '<iframe name="homeIframe" id="homeIframe" width="100%" height="100%" frameborder="0" src="#application.urlroot#/UI/EXTUI/iframeURL.cfm?loadURL=#application.urlroot#/homepage/homepage.cfm"></iframe>'
    					}]
    				})
    			 ]
    		});
    		var index = 0;
    		Ext.addTab = function(href,tabTitle,iconClass){
    				index++;
    				var tabID = 'thetab'+index;
    				var iframesrc = ' src="'+href+'"';
    	
    				if (typeof(tabTitle) == "undefined") {
    					var tabTitle = "New Tab" + index;
    				}
    				if (typeof(iconClass) == "undefined") {
    					var iconClass = "defaultIcon";
    				}
    
    				var iframecall = '<iframe name="'+tabID+'" id="'+tabID+'" width="100%" height="100%" frameborder="0"'+iframesrc+'></iframe>';
    
    				Ext.centerTabs.add({
    					title: tabTitle,
    					id: tabID+"_"+index,
    					border: false,
    					iconCls: iconClass,
    					containerScroll:false,
    					autoScroll:false,
    					html: iframecall,
    					closable:true
    				}).show();
    				return tabID;
    		}
    	
    });
    thanks a mil',
    nikki

Thread Participants: 1