J.J. "DjeeDjee" van de Merwe blogt… » Blog Archive » Drag and drop met panels in Extjs

Drag and drop met panels in Extjs

23 September 2010 Geen reakties

De documentatie over drag and drop in Extjs vond ik, na een aantal dagen mij intensief met het onderwerp bezig te hebben gehouden, op z'n zachtst gezegd nogal mager. Op internet kom je meestal dezelfde voorbeelden keer op keer weer tegen en veel daarvan behandelen grids en trees (bomen). Ik ga het hebben over panels, dus geen grids en trees, maar panels.

Wat is de bedoeling met dit artikel

Ik wil graag van de hoed en de rand weten hoe dingen werken en hou het dan ook graag eenvoudig. Extjs heeft haar drag en drop (DND) ondergebracht in ongeveer 11 klassen (!). Deze hebben betrekking op het eenvoudig DND te kunnen doen met 1 object of hebben betrekking op het DND met meerdere objecten. Wij gaan enkelvoudig slepen, maar gebruiken de klassen voor het meervoudig slepen. Jesus Garcia heeft een heel mooi plaatje gemaakt, wat goed laat zien hoe de klassen zijn opgebouwd.

Zoals je ziet zijn de bovenste klassen voor "single" (enkelvoudig) slepen en de onderste 2 bubbels voor meervoudig slepen. Nu moet je beseffen dat veel van deze klassen weer extended klassen zijn van hun voorganger. Ik verwijs graag naar het prima artikel van Jesus Garcia (ook auteur van Extjs in Action, Manning publications). Ik ga het hier niet allemaal nog een keer uitleggen, wel laat ik zien wat ik heb gedaan met panels. Daarvoor kun je hier klikken voor de demo (opent in nieuw venster).

Demo

De demo heeft geen diepere functie, maar het laat wel mooi zien dat het allemaal niet zo moeilijk is.

Zoals je ziet staan er allemaal bekende gezichten op het scherm (ontworpen voor 22" beeldschermen). Deze zijn allen sleepbaar (drag) en plaatsbaar (drop). Je kunt ze in de box linksboven droppen, je kunt ze ook verwisselen van plaats. In het drop venster linksboven, zie je het resultaat van je verrichtingen.

Zones

Ik heb een aantal dingen die ik in andere documentatie heb gevonden niet gebruikt (zoals ddGroup). Ook heb ik de standaard "draggable" config optie op de panels uitgezet. Extjs verzorgt op basis van de config parameters een aantal dingen automatisch. Dat is ook een krachtig iets, maar hier zeker niet. Extjs kent namelijk ook een zogenaamde drag en drop voor Panels (ook weer via subklasses, waarvan enkele zelfs ongedocumenteerd). Essentieel voor DND met Extjs zijn de drag-zones en de drop-zones. Via deze zones communiceer je de regels voor het kunnen draggen en het mogen droppen. Ik heb 2 zones gedefinieerd, maar elke panel heeft in principe een "dragzone" en een "dropzone" (deze worden als 2 functies bij de render van de panels gedefinieerd).

De dropbox linksboven heeft alleen een "dropzone". De demo heeft tenslotte nog een button om de box leeg te maken.

Events

Ik kan slechts 1 ding zeggen wat nooit meer vergeten mag worden. HOU GRIP op je events. Elke event wordt door een Ext.util.Observer gemonitord en uitgevoerd. De volgorde heb je niet altijd onder controle. Zorg er daarom voor dat je niet ongelimiteerd events afvuurt (trigger), waarbij de situatie kan ontstaan dat de uitvoering ongecontroleerd plaats vind, met ongewenste gevolgen.

Een ander belangrijk punt is, dat je er altijd van uit moet gaan dat jij de enige bent die weet wat elke methode of functie nodig heeft aan parameters. Ga hier zorgvuldig mee om. Ga niet graaien met firebug in de DOM om via trial en error de "juiste" waarden in je functies te krijgen. Als je een klasse (class) niet begrijpt, zorg dan eerst dat je hier documentatie over vind, zodat de context duidelijk wordt (niet dat ik nu alziend ben m.b.t. DND).

Extjs zelf

Extjs biedt veel mogelijkheden om events en listeners in te zetten. Maar pas hiervoor op! Want, alle listeners die worden toegevoegd in je eigen code werken als een override op de bestaande listeners (met gelijke naam), die in de broncode van Extjs al vaak de meest nuttige dingen uitvoeren. Als advies kan ik slechts geven, neem eens een kijkje (liefst wat langer en eigenlijk altijd bij de hand, als je ontwikkelt) in het bestand "ext-all-debug.js". Let op, niks aanpassen hier, want dat heeft geen enkele zin en leidt slechts tot een hoop narigheid.

onInvalidDrop : function(target, e, id){
    this.beforeInvalidDrop(target, e, id);
    if(this.cachedTarget){
        if(this.cachedTarget.isNotifyTarget){
            this.cachedTarget.notifyOut(this, e, this.dragData);
        }
        this.cacheTarget = null;
    }
    this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
  
    if(this.afterInvalidDrop){
        
        this.afterInvalidDrop(e, id);
    }
},
  
  
afterRepair : function(){
    if(Ext.enableFx){
        this.el.highlight(this.hlColor || "c3daf9");
    }
    this.dragging = false;
},
  
  
beforeInvalidDrop : function(target, e, id){
    return true;
},

Hierboven staat een klein stukje uit de klasse beschrijving van: Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy...

Zoals je ziet is dit een extensie op Ext.dd.DragSource, maar wat vooral belangrijk is, dat de events zo mooi zichtbaar worden. Hier zie je "onInvalidDrop" en "afterRepair". Wanneer jij nu deze events gaat gebruiken, d.w.z. herschrijven, dan wordt de code van hierboven overruled middels een override. Dus als je plaatje aan je muiscursor blijft kleven, dan weet je nu waarom.

onBeforeDrag : function(data, e){
       return true;
   },
  
   
   onStartDrag : Ext.emptyFn,
  
   
   startDrag : function(x, y){
       this.proxy.reset();
       this.dragging = true;
       this.proxy.update("");
       this.onInitDrag(x, y);
       this.proxy.show();
   },

Nu heeft Extjs ook een aantal Ext.emptyFn events in haar code ondergebracht. Deze doen dus niks. Probeer te kijken of je misschien hier wat mee kunt, zonder een puinhoop van je toepassing te maken middels het overrulen van bestaande nuttige code. Je kunt natuurlijk ook zelf events schrijven bij je klasse en een eventmanager gebruiken. We doen het in dit artikel zonder. Schrijf eigen code nooit bij een event die veel en vaak wordt uitgevoerd, indien dit niet noodzakelijk is.

In de Extjs documentatie staat keurig beschreven hoe vaak een event wordt afgevuurd.

Verander een variabele niet onnodig tig keer in een event welke bij elke muisbeweging wordt afgevuurd (denk dan aan het gebruiken van de "before" of "after" events).

Verklaring van de source

Het panel met filmsterren wordt geladen middels een array store. Dit kan dus ook wat anders zijn (bijvoorbeeld een JSON). Je kunt ook gewoon de panels met het handje fixed tikken. De panels zijn opgebouwd in de "center" region van een "border layout" en hebben zelf een "table" layout (geen discussie of dit beter met een data view, tree of grid gedaan had kunnen worden a.u.b.). In de source staat ccenter als variabele, ipv center. Dit lijkt vreemd en ongewenst, maar het woord "center" wordt in Microsoft Internet Explorer als een property gezien en zorgt er voor dat de toepassing niet goed wordt geladen in de browser!

ccenter = Ext.getCmp('center');
  
ccenter.add ({
    title           : 'Status and Drop Box',
    id              : 'drop-panel',
    iconCls         : 'help',
    cls             : 'drop-zone',
    colspan         : 2,
    rowspan         : 2,
    width           : 410,
    height          : 410,
    bbar            : {
        height      : 40,
        items       : [{
            id      : 'btnClear',
            width   :  100,
            text    : 'Clear',
            handler : function () {
                Ext.getCmp('drop-panel').update('')
                return
            }
        }]
    },
    autoScroll: true,
    listeners: {
        render: initDropZone
    }
});

Hierboven staat de definitie van de dropbox (linksboven). Je ziet hier een id: 'drop-panel' en een klasse (cls): 'drop-zone'. Onthoud goed dat je een klasse en een id niet klakkeloos door elkaar moet gebruiken. Een id (css id dus) is een unieke identificatie van een DOM element. Elke unieke id mag slechts 1x voorkomen in een web pagina. Een klasse (class) kan meerdere keren voorkomen en identificeert een groep van DOM elementen met gelijke bepaalde kenmerken. Een element kan ook gelijktijdig meerdere klassen hebben. In Extjs kun je ook een cls config zo opgeven "cls : 'klasse1 klasse2 klasse3'.

De listener van dit panel verdient bijzondere aandacht, want hierin vind je de listener voor de render van het paneel. Daar wordt namelijk de initDropZone uitgevoerd. Dit moet altijd nadat een panel is gerendered. Eenvoudig weg, omdat er voordien nog geen panel is.

store.each( function ( record ) {
    ccenter.add ( {
        title       : record.data.name,
        id          : record.data.id,
        html        : '<img src="moviestars/'+record.data.id+'.jpg" height="175" width="175" />',
        iconCls     : getSexe ( record.data.sexe ),
        cls         : 'drag-zone drop-zone',
        listeners   : {
            render: function ( e) {
                initDragZone( e );
                initDropZone( e )
            }
        }
    })
});

Hierboven zie je hoe de store (data) records worden doorlopen en de panels worden aangelegd met de filmsterren. Let ook hier op, want in de listener worden 2 methodes aangeroepen (initDragZone en initDropZone). De klasse (cls) is een dubbel klasse "drag-zone" en "drop-zone". Deze panels hebben namelijk een dubbelfunctie (draggen en droppen)

function initDragZone (v) {
    v.dragZone = new Ext.dd.DragZone(v.el.dom, {
        getDragData : function(e) {
            sourceEl = e.getTarget('.drag-zone');
            if(sourceEl) {
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                d.panel = v;               // we save the panel for later use
                return {
                    sourceEl: sourceEl,
                    repairXY: Ext.fly(sourceEl).getXY(),
                    ddel : d
                }
            }
        },
  
        onStartDrag : function (e) {
            this.dragger = Ext.getCmp(this.id).title;
            Ext.getCmp('drop-panel').update ( updateStatus ( this.id, '', 'dragged' ) );
        },
  
        onDrag: function(e) {
            // !Important: manually fix the default position of Ext-generated proxy element
            // Uncomment these line to see the Ext issue
            var proxy = Ext.DomQuery.select('*', this.getDragEl());
            proxy[2].style.position = ''
        },
  
        afterInvalidDrop : function () {
            Ext.getCmp('drop-panel').update ( updateStatus ( this.id, '', 'home' ) );
            this.dragger = '';
        },
        getRepairXY: function() {
            return this.dragData.repairXY;
        },
        onEndDrag : function ( e ) {
            if (this.dragger !== '') {
        // you can use this listener, for it is an emptyFN.
        }
        }
    })
}

Deze functie verzorgt de werking van de drag zones (dus de slepers, vergelijk het met vliegtuigen, bagage en luchthavens.

Deze functie is een verzameling van listeners, die het drag proces begeleiden:

getDragData, wordt aangeroepen om de informatie te verzamelen van het element wat wordt gesleept. Let op, Extjs sleept niet het echte element, maar een zogenaamde ghost, een kopie van het origineel, of iets wat middels een Ext.StatusProxy is meegegeven. Eerlijkheid gebiedt mij te zeggen dat ik daar nog niet veel wijzer van ben geworden, want mijn proxies gaven constant problemen (method CloneNode not found). Onze proxy laat het paneel zien met een ikoontje of je mag droppen of niet. De infornatie hiervoor ligt opgesloten in het "ddel" deel van de return bij getDragData (dit is dus de bagage). Interessant is nog dat ik d.panel heb opgenomen, want dan weet ik dat ik het gehele panel altijd beschikbaar heb voor later gebruik. Je mag zelf extra informatie opnemen.

onStartDrag is ook een lege listener die wordt aangesproken bij het starten van de sleep. Hier wordt een bericht gestuurd naar het drop-panel (linksboven), wat er wordt gesleept.

onDrag, wordt bij elke muisbeweging afgevuurd. Dit is wat ik hiervoor heb bedoeld, om een statement wat je eenmaal voor aanvang kan doen, dus niet in deze listener moet worden gestopt. De code die in deze listener staat is niet van mij zelf, maar als deze wordt weggelaten dan wordt de proxy niet geschoond, oftewel de sleep "ghost" wordt niet ge-reset.

afterInvalidDrop, wordt aangesproken als er wordt gedropped, maar de waar kan niet worden afgeleverd (het vliegtuig mag of kan niet landen).

getRepairXY, levert de waardes terug, om naar het origineel terug te animeren.

onEndDrag, spreekt bijna voor zichzelf. Je mag hier nog iets toevoegen om de drag af te sluiten. Mijn voorbeeld is leeg. Belangrijke tip blijft echter, laat geen lege listeners achter in je code.

function initDropZone ( g ) {
  
    g.dropZone = new Ext.dd.DropZone(g.el.dom, {
  
        getTargetFromEvent: function(e) {
            return e.getTarget('.drop-zone')
        },
        onNodeOver : function(target, dd, e, data) {
            if (target.id != dd.id) {
                dd.el.addClass('drop-zone');
                return Ext.dd.DropZone.prototype.dropAllowed
            } else {
                dd.el.removeClass('drop-zone');
                return Ext.dd.DropZone.prototype.dropNotAllowed
            }
        },
        onNodeDrop : function(target, dd, e, data) {
            // this is here, for sometimes the user is too fast
            // you can not drop on yourself
            if (target.id == dd.id) {
                dd.el.removeClass('drop-zone');
                return Ext.dd.DropZone.prototype.dropNotAllowed
            }
  
            thishtml = Ext.getCmp('drop-panel').body.dom.innerHTML;
            // host is "target"
            // guest is data.ddel.panel.title
            if (target.id == 'drop-panel') {
                Ext.getCmp('drop-panel').update ( updateStatus ( data.ddel.panel.id, '', 'dropped' ) );
                this.dragger = '';
            } else {
                Ext.getCmp('drop-panel').update ( updateStatus ( data.ddel.panel.id, target.id, 'exchanged' ) );
                this.dragger = '';
  
                // finally exchange the actors which have visited eachother
                host  = Ext.get(target.id);
                hostxy = host.getXY();
                guest = Ext.get(data.ddel.panel.id);
                guestxy = guest.getXY();
                guest.moveTo( hostxy[0], hostxy[1]);
                host.moveTo ( guestxy[0], guestxy[1]);
            }
            // data.ddel.panel.removeClass('drag-zone'); <- is not removed, for we can drag as much as we like
            return (true)
        }
  
    })
}

De dropzone is de luchthaven en de code heeft de funktie van verkeerstoren.

getTargetFromEvent, vertelt of er al boven een landingsbaan wordt gevlogen. Deze is herkenbaar aan de klasse (cls) "drop-zone" (e.getTarget('drop-zone')).

onNodeOver, wordt getriggered wanneer het "vliegtuig" over de landingsbaan "vliegt". Dit wordt dus constant afgevuurd bij elke muisbeweging. Het "if" statement zorgt er voor dat er niet kan worden gedropped als er over "jezelf" wordt gevlogen (removeClass) en voegt in andere gevallen de klasse 'drop-zone' toe. De Ext.dd.Dropzone.prototype.dropAllowed en dropNotAllowed zorgen voor de juiste ikoontjes op de proxy (vliegtuig alias ghost element).

onNodeDrop, is waar het allemaal om draait. Nogmaals wordt er gekeken of er niet op jezelf wordt gedropped. De praktijk heeft mij geleerd dat deze event soms te snel was en dat er toch op zichzelf kon worden gedropped. Vervolgens wordt er wat informatie naar de linkerboven box verstuurd en speciale aandacht voor het verwisselen van de akteurs.

// finally exchange the actors which have visited eachother
host  = Ext.get(target.id);
hostxy = host.getXY();
guest = Ext.get(data.ddel.panel.id);
guestxy = guest.getXY();
guest.moveTo( hostxy[0], hostxy[1]);
host.moveTo ( guestxy[0], guestxy[1]);

Fysiek wordt er in de DOM niks verwisseld. Dus geen panels weggegooid en nieuwe er tussen gefrommeld. Het enige wat er gebeurd, is dat de posities worden verwisseld. Dit zorgt er voor dat het optisch zeer snel gebeurd en dat de gebruiker er niks van merkt (behalve de gezichten die worden verwisseld). Misschien doe ik het wat omslachtig met host, hostxy en guest, guestxy, maar ik ben van mening dat ik het over een tijdje ook nog moet bebrijpen. Dus mijn lange ervaring zegt, liever een juist statement teveel dan een moeilijke structuur teveel.

Tenslotte

function updateStatus ( host, guest, action ) {
  
    thishtml = Ext.getCmp('drop-panel').body.dom.innerHTML;
    if (host != '') {
        actor1 = Ext.getCmp(host).title
        icoontje   = '<img src="moviestars/'+host+'.jpg" height="24" width="24" />';
    } else {
        return thishtml
    }
    if (guest != '') {
        icoontje2   = '<img src="moviestars/'+guest+'.jpg" height="24" width="24" />';
        actor2 = Ext.getCmp(guest).title
    }
  
    return (action == 'dragged') ? '<p>'+icoontje+'&nbsp;'+actor1+' is dragged around</p>'+thishtml  :
    (action == 'dropped')  ? '<p>'+icoontje+'&nbsp;'+actor1+' has been dropped</p>'+thishtml   :
    (action == 'stopped')  ? '<p>'+icoontje+'&nbsp;'+actor1+' stopped dragging</p>'+thishtml :
    (action == 'exchanged') ? '<p>'+icoontje+'&nbsp;'+actor1+' exchanged places with '+icoontje2+'&nbsp;'+actor2 + '</p>'+thishtml :
    (action == 'home')     ? '<p>'+icoontje+'&nbsp;'+actor1+' is back home again</p>'+thishtml :
    '<p>? something unexpected: '+action+'</p>'+thishtml;
}

Hoewel het niets met DND te maken heeft, nog even hoe de messages in de box worden gemaakt. Een routine voor alle berichten.

Tips

Het kost veel moeite om alle documentatie door te lezen. Extjs heeft goede documentatie, maar niet altijd voldoende. Er zijn een aantal goede boeken, maar niet veel en altijd in het Engels. Verder zie ik nog te vaak dat de voorbeelden die worden gegeven, betrekking hebben op versie 2 van Extjs en ook vaak veel te moeilijk zijn.

Als het het framework niet goed kent, ga het bestuderen, voordat je verzuipt in zaken die bij voorbaat al moeizaam gaan.
Leer Javascript en begrijp de DOM. Niet van alleen van internet, maar vanuit een goed boek. Investeer een paar Euro's en eis er wat voor terug. Kijk ook eens bij Jesus Garcia's website. Hij doet veel moeite om mensen te helpen met deze materie.
Wees consistent in de naamgeving van je variabelen, methodes en events. CamelCase (GroteLettersDieKleineLettersAfwisselen) is erg mooi, maar ook erg foutgevoelig. Je mag best altijd kleine letters gebruiken (je kan echter niet ExtJS aanpassen, dus een beetje lijden blijft). En gebruik duidelijke namen. Niet zoiets als: ident32_212342, maar gewoon heldere namen die het gebruik duidelijk maken "hostxy", "icoontje". Bij twijfel geen woorden gebruiken die in conflict kunnen zijn met de Javascript syntax ( "complete", "override", "$ditisphp".
Gebruik firebug als ontwikkelhulp (hoewel ook Google Chrome een fantastische ontwikkelaars tool heeft) en laat het niet jou de baas zijn. Als je DOM elementen gebruikt, weet dan ook waarom. Niet dat je later javascript bugs hebt in jouw programma's, die door DOM-blunders zijn ontstaan. En test je programma ook in een andere browser dan Firefox. De DOM van Google Chrome is niet op alle punten compatible met Firefox, helemaal niet te spreken over Microsoft Internet Explorer. Dus blijf zo dicht mogelijk bij de Javascript "standards".
Gebruik zo min mogelijk trial en error code in je produktie programma's. Hou je code zo schoon mogelijk. Maak prototypes (de demo is ook als dusdanig bedoeld) en gebruik voorbeelden die aanspreken. Als je uren bezig bent, spreekt "selma_hayek" nog altijd meer tot de verbeelding als "aa3-52gbalfa-iets". Maak je protos zorgvuldig (met plaatjes als plaatjes nodig zijn). Kost wat meer tijd, maar verkoopt veel beter.
Vraag hulp van anderen, maar laat anderen het niet voor jou doen (lees mijn artikel over web hufters op deze blog). Zorg dat je altijd baas blijft over de materie. Levert vanzelf bevredigende resultaten, mits je niet opgeeft.

Vraagteken

Nou wil ik graag nog wat hulp van de lezers. Er zit een bug in deze demo. Waar precies weet ik niet, maar het is zo dat ik een enkele keer heb geconstateerd dat de native browser drag van een afbeelding in Firefox, de baas was over de drag van de Javascript. De keren dat dit gebeurde was telkens met een niet gemaximaliseerd browser scherm.

Tenslotte zou ik het leuk vinden als er wat reacties komen, hoe deze DND te optimaliseren, of te vereenvoudigen. We hebben in mijn voorbeeld 2 drop gebieden gezien ( dropbox en filmsterren) en 1 drag gebied. Het is mij nog steeds niet helemaal duidelijk hoe het werkt met de ddGroup (vooral als een element naar meer kwaliteiten van zones moet kunnen worden gesleept.