Inventis

Verloop van de week

Deze week ging mijn aandacht uit naar de bezienswaardighedenmodule en het tagspaneel in de modules. Al snel werd echter duidelijk dat de bezienswaardigheden beter geïntegreerd zouden zijn in de citytripmodule, waarna ik de nodige aanpassingen deed aan deze module om dit mogelijk te maken. Ook heb ik besloten om ineens ook maar een GMapField toe te voegen aangezien het om locaties gaat, en we google maps in de toekomst als extra misschien kunnen invoegen in de Frontend.

Toen ik eenmaal begonnen was met het tagspaneel, stuitte ik al snel op een tweede probleem: hoe kunnen we tags aan een artikel koppelen dat nog niet bestaat? (aangezien het tagspaneel effectief een apart paneel is). Daarom heb ik besloten om dit op dezelfde manier aan te pakken als in de artikelmodule is gebeurd:  om een nieuw artikel te maken, moet je de knop nieuw naar een bepaald niveau in de boomstructuur slepen. Vervolgens roept ExtJS via AJAX de WebadminController op waarna deze in de database een record met als naam “nieuw artikel” maakt. Hierna moet de gebruiker dit item bewerken om de gegevens aan te passen.

Dit waren echter niet het enige problemen: om de een of andere reden werkte het Tabpanel van ExtJS 2.x ook niet verbazingwekkend goed als je panels verwijdert en hierna weer terug toevoegt. De workaround die ik uiteindelijk heb toegepast hield in dat we een panel niet achteraan toevoegen, maar op een bepaalde index in de tablijst. Hierdoor hoeven we de panels niet allemaal te verwijderen en toe te voegen.

Opbouw van ExtJS-componenten

Deze week wilde ik ook eens in het kort bespreken hoe ik het ontwikkelen van componenten in ExtJS aanpak.
Het aanmaken van Componenten:
In ExtJS wordt bij het aanmaken van objecten altijd een config meegegeven in de vorm van een JSON-object. Nu zou je een object op de volgende manier kunnen aanmaken:

Ext.ns(‘Voorbeeld’);
Voorbeeld.mainContainer= new Ext.Panel({
				 id: 'testPaneel'
				,layout: 'border'
                                                         ,title:  'TestPaneel'
				,border: false
				,html:’<h1>test</h1>’
                                                         ,listeners:{
                                                             click: {
                                                                 fn: function(e){
                                                                       alert('test');
                                                               }//end function
                                                          }//end click
                                                       }//end listeners
			});//end new Panel

Ik denk dat het vrij duidelijk is dat bij verder uitgewerkte componenten of wanneer er meerdere componenten in 1 javascriptfile staan het al snel moeilijk leesbaar wordt.

Daarom gebruik ik liever de volgende manier:

Ext.ns('Voorbeeld');
var extender=
    {
         initComponent: function(){

            Voorbeeld.testPanel.superclass.initComponent.apply(this, arguments);

            this.initConfig();
            this.initEventHandlers();
        }//end initComponent
        ,initConfig: function(){
            var config =
            {
                 id:     'testPaneel'
                ,layout: 'border'
                ,title:  'TestPaneel'
                ,border:  false
                ,html:   '<h1>test</h1>'
            };//end config
            Ext.apply(this, Ext.apply(this.initialConfig, config));
        }//end initConfig
        ,initEventHandlers: function(){
            this.on('click', this.clickMe, this);
        }//end initEventHandlers
        ,clickMe: function(){
            alert('test');
        }//end clickMe
    };//end extender

Voorbeeld.testPanel = Ext.extend(Ext.Panel, extender);

Het lijkt op het eerste zicht meer code en dat is het ook, maar het is ook heel wat overzichtelijker en deze aanpak biedt nog ruimte op uit te breiden met functies en de code nog steeds leesbaar te houden. Ook is het mogelijk om deze nieuwe klasse een “override”-config mee te geven.

Voor meer informatie verwijs ik graag door naar de API-docs van ExtJS en deze tutorials

Coming up

Deze week heeft Gert zich bezig gehouden met het slicen van World Explorer. Dit is op het moment van schrijven juist klaar, zodat ik volgende week de Front-End kan uitwerken. Ik verwacht dat hier nog heel wat problemen uit gaan komen, vooral wat de widgetstructuur betreft. Daarom ben ik blij dat er hier zeker 4 weken voor voorzien zijn in de planning. Laten we hopen dat het niet nodig is.