Results 1 to 4 of 4

Thread: WindowGroup onContainerDrop is executed for each window under top window

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default WindowGroup onContainerDrop is executed for each window under top window

    How can i make the onContainerDrop been executed only for the top window in windowGroup ?
    i used sencha Web Desktop example, windows are managed in a WindowGroup.
    each window contain a DataView, node Drag & Drop are made from Dataview to an other.
    When i drag an element in a window to an other, and if there is an other window behind the target window, the onContainerDrop event is executed as many there is window behind. First time for the top window and then for the window behind.
    When DD from dataview node to an other dataview node the onNodeDrop event is called normaly on time.
    Each window have is own id.

    the DD.DropZone manager

    Code:
    
    ImageDropZone = function(view, config){    
        this.view = view;
        ImageDropZone.superclass.constructor.call(this, view.getEl(), config);
    };
    
    
    Ext.extend(ImageDropZone, Ext.dd.DropZone, {
            getTargetFromEvent: function(e) {
                var target = null;
                target  = e.getTarget('.icon-wrap');
                if (undefined == target || null == target)
                {
                    //target = e.getTarget('li.x-tree-node');
                    target = e.getTarget('x-tree-node-el');
                    
                }
                return target;
            },
    
    
            onContainerDrop:function ( source, e, data ){
                this.onNodeDrop(e.target, source, e, data);
                
            },
     ..........
    ...........

    the window create process

    Code:
    MyDesktop.DynamicShareBoxModule = Ext.extend(Ext.app.Module, {
        
        sbToolbar:null,
        sbStore :null,
        sbView :  null,
        id:Ext.Box.ID.Panel.shareBoxesModulesId,
        winId : null,
        shareboxes : [] ,
        dataView : undefined,
                
        init : function(config){
            this.launcher = {
                id: Ext.Box.ID.Panel.shareBoxesMenuId,
                text: Ext.Box.ID.Panel.shareBoxesMenuText,
                iconCls: 'shareboxes-icon',
                handler: function() {return false;},
                menu:this.initMenu(config),
                shareboxObj:{},
                scope: this            
                };
        },
        initMenu : function(shareboxResources){
            var menu = new Ext.menu.Menu();
            for(var i = 0, len = shareboxResources.length; i < len; i++){
                var m = shareboxResources[i];
                var menuitem =  new Ext.menu.Item ({text: m.name, iconCls:'bogus',handler : this.createWindow, scope: this, windowId: m.id, shareboxObj: m });
                menu.addMenuItem ( menuitem );
            }
            return menu;
        },
        
        initModule : function(win){
                this.shareboxes.push(win);
        },
        
        setViewTemplate : function(item){
                if (item.name =='icon')
                {     this.app.desktop.getWindow(item.winId).items.items[0].tpl=Ext.Box.Globals.ShareBoxes.shareboxiconTemplate;
                    this.app.desktop.getWindow(item.winId).items.items[0].refresh();
                    this.app.desktop.getWindow(item.winId).items.items[0].store.sort('name','ASC');}
            else
                {     this.app.desktop.getWindow(item.winId).items.items[0].tpl=Ext.Box.Globals.ShareBoxes.shareboxstandardTemplate;
                    this.app.desktop.getWindow(item.winId).items.items[0].store.sort('name','ASC');
                    this.app.desktop.getWindow(item.winId).items.items[0].refresh();}
        
        },
        
        getToolbar: function(src){ 
            return new Ext.Toolbar ({
                  //height: 25,               
                  items:[
                      {winId:src.windowId,cls:'x-btn-icon', name:'icon',iconCls:'connect',handler: this.setViewTemplate,scope:this,tooltip:{title:'Icon view', text:'see your files as icons'}},
                      '-',
                      {winId:src.windowId,cls:'x-btn-icon',name:'detail',iconCls:'user-add',handler: this.setViewTemplate,scope:this,tooltip:{title:'Detail view', text:'see your files with extra info'}}
                      ]    
              });
          }
          ,
          
        getStore: function(p){
                   return new Ext.data.JsonStore({ 
                    //storeId: 'shareBoxStore',
                    root: 'sharebox',
                    idProperty: 'id',
                    proxy : new Ext.data.ScriptTagProxy({
                        url : Ext.Box.Globals.getOnlineShareboxResourceURL(p)                    
                    }),
                    autoLoad: false,
                    //fields:Ext.Box.Globals.JsonReaders.filetreeJsonFields,
                    fields:Ext.Box.Globals.JsonReaders.shareboxResourceJsonFields,
                    sortInfo: {
                        field: 'name',
                        direction: 'ASC'
                    }
                });
        },
        
        getView : function(config){
                return new Ext.DataView({
                                //id:Ext.Box.Globals.ShareBoxes.dataViewId,
                                id:Ext.Box.Globals.ShareBoxes.dataViewPrefix+config.windowId,
                                objtype:Ext.Box.Globals.DDobjType.shareBoxDataview, 
                                cls:'imagessharebox',
                                layout:'fit',
                                html:'<div class="imagessharebox">',
                                itemSelector: config.shareboxObj.viewtype == Ext.Box.Globals.ShareBoxViews.icon ? 'div.icon-wrap' : 'div.thumb-wrap',
                                style:'overflow:auto',
                                multiSelect: true,
                                plugins: new Ext.DataView.DragSelector({dragSafe:true}),
                                store: config.store,
                                tpl: config.shareboxObj.viewtype == Ext.Box.Globals.ShareBoxViews.icon ? Ext.Box.Globals.ShareBoxes.shareboxiconTemplate : Ext.Box.Globals.ShareBoxes.shareboxstandardTemplate,
                                prepareData: function(data){
                                        var path, ext, type;
                                        var color = 'blue';
                                        data.imgfoldericon = 'images/desktop/resources/folders/blue-default-closed-64.gif';
                                        data.imgfileicon = 'images/desktop/resources/files/blue-default-64.gif';
                                        return data;
                                    }                            
                });
        },
            
        createWindow : function(src){
            var desktop = this.app.getDesktop();
            var win = desktop.getWindow(src.windowId);
            if(!win){
            
                    // type of view
                    if (src.shareboxObj.viewtype != Ext.Box.Globals.ShareBoxViews.icon && src.shareboxObj.viewtype != Ext.Box.Globals.ShareBoxViews.detail) {
                        throw 'Invalid view in Sharebox constructor: ' + this.shareboxObj.viewtype;
                    }                       
    
    
                    var sbStore = this.getStore(src.windowId);
                    var sbToolbar = this.getToolbar(src); 
                    src.store = sbStore;
                    var nview = this.getView(src);   
                    sbStore.load();
    
    
                    /*config ={id:src.windowId,rootLocationId:src.windowId };
                     this.dataView = this.createView(config);
                    Ext.Box.ActionMgr.selectLocation(Box.Util.Element.encodeId(src.windowId), Box.Util.Element.encodeId(src.windowId));
                    */
                    
                win = desktop.createWindow({
                    id: src.windowId,
                    winId:src.windowId,
                    title:src.text,
                    width:640,
                    height:480,    
                    tbar:sbToolbar,
                    layout:'fit',
                    iconCls: 'shareboxes-icon',
                    shim:false,
                    animCollapse:false,
                    constrainHeader:true,    
                    items: [nview]
                });
                
                //src.store.load();
                this.initModule(win);
    
    
                var dragZone = new ImageDragZone(nview, {containerScroll:true,
                ddGroup: 'organizerDD'});
                
                var dropZone = new ImageDropZone(nview, {containerScroll:true,
                ddGroup: 'organizerDD'});
    
            }
            win.show();
        }
    });

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Vote Rating
    1272
      0  

    Default

    You would have to stopEvent() on the event object.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default

    I'm aggee with you, i suppress the e.stopEvent() in the example below but i have already tried with no success. The onContainerDrop is called more than one time.


    Code:
    onContainerDrop:function ( source, e, data ){
                e.stopEvent();
                this.onNodeDrop(e.target, source, e, data);
    },
    .....
    I tried

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Help
    Question : How to prevent event onContainerDrop propagation in a windowgroup ?

    I tried
    Code:
    onContainerDrop:function ( source, e, data ){
                e.stopEvent();
                e.stopPropagation();
                e.preventDefault();
                e.cancelBubble = true;
                this.onNodeDrop(e.target, source, e, data);
            },
    but stil have no effect.
    there is many onContainerDrop Event in the queue as there is window hide behind the top window when dropping.
    Why stopEvent(); does not do his job ?
    Seem that onContainerDrop Events put in the queue cannot be stopped with stopEvent.
    is there is way to prevent it ?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •