Part 2 – DockedItems e Items

May 18, 2011 by Andrea Cammarata • Sencha Touch • 7 Comments

Bene, ora che abbiamo capito come definire i componenti “Docked”, vi propongo alcuni esempi che dovrete tenere sempre a mente quando realizzerete le vostre applicazioni Sencha Touch. Questi esempi infatti, vi consentiranno di comprendere come viene ripartito lo spazio disponibile sullo schermo del vostro mobile device, nel caso in cui venissero definiti più di un DockedItem sia sullo stesso margine, che su margini differenti. Alcuni esempi potranno sembrarvi scontati e banali, ma è fondamentale che comprendiate come vengono posizionati i DockedItems in modo tale da impostare il layout delle vostre applicazioni nel modo migliore possibile tra i tanti messi a disposizione dal framework. Ma come al solito, basta perdersi in chiacchiere e diamo subito un’occhiata al primo esempio della serie.

Definizione di 3 pannelli ancorati sul margine superiore

Ext.setup({
    onReady: function() {

        var panel = new Ext.Panel({
            fullscreen: true,
			dockedItems: [{
				dock: 'top',
				html: 'Panel 1',
				height: 30,
				style: 'background-color: #7d8cff'
			},{
				dock: 'top',
				html: 'Panel 2',
				height: 30,
				style: 'background-color: #f6685e'
			},{
				dock: 'top',
				html: 'Panel 3',
				height: 30,
				style: 'background-color: #b5ffbf'
			}]
        });

    }
});

Diamo un’occhiata allo screenshot che segue per avere un’idea del risultato ottenuto.

In questo esempio noterete che i tre pannelli ancorati sullo stesso margine superiore, vengono ovviamente creati con lo stesso ordine con il quale sono stati definiti, occupando la medesima dimensione. Cosa c’è di strano vi starete chiedendo! Per ora nulla, ma continuate a dare un’occhiata agli esempi che seguono per capire il perchè di questo banale esempio. Prendiamo ora lo stesso esempio appena proposto e modifichiamo solamente il valore “height” di tutti i pannelli definiti da valore numerico fisso ad un valore percentuale pari a “30%” ed osserviamo il risultato.

Anche in questo caso l’esempio potrebbe sembrare scontato, ma questo è utile a farvi capire che il valore percentuale specificato è calcolato sempre sulla dimensione totale dello schermo e non sullo spazio disponibile lasciato vuoto dai precedenti DockedItems definiti.. Ripeto, può sembrare banale, ma siccome mi è stata fatta più volte questa domanda, è meglio metterlo in chiaro.
Bene, ora diamo invece un’occhiata all’ultimo esempio che vi aiuterà a capire come verranno disposti i vari DockedItems, nel caso in cui questi vadano ad essere agganciati a margini perpendicolari tra loro.

Definizione di 2 pannelli ancorati su margini perpendicolari tra loro

Ext.setup({
    onReady: function() {

        var panel = new Ext.Panel({
			fullscreen: true,
			dockedItems: [{
                dock: 'top',
                height: 60,
                style: 'background-color: #7d8cff'
            },{
                dock: 'left',
                width: 60,
                style: 'background-color: #f6685e'
            }]
        });

    }
});

Osserviamo a questo punto da vicino il risultato ottenuto.

Come avrete sicuramente notato in questo esempio, il pannello ancorato sul bordo superiore della videata, va ad occupare tutto lo spazio disponibile in larghezza, mentre quello ancorato sul bordo sinistro va ad occupare lo spazio rimanente lasciato libero dal precedente pannello. Si può a questo punto facilmente intuire che, nel caso di DockedItems posizionati su margini perpendicolari tra loro, lo spazio disponibile verrà ripartito secondo l’ordine di priorità con i quali questi sono stati definiti.. Molto bene! Ora che questi semplici concetti di base sui DockedItems sono stati chiariti, direi che possiamo passare a qualcosa di più interessante e senz’altro utile. Sicuramente vi sarete fatti la domanda (o ve la farete in futuro) di come sia possibile poter aggiungere e/o rimuovere DockedItems dinamicamente durante l’esecuzione della vostra applicazione, magari cliccando su un semplice pulsante della vostra interfaccia. Ho suscitato la vostra curiosità non è vero . Beh mi sambra logico, quindi seguitemi nella prossima lezione per capire come poter iniziare a dare un po di vita alle vostre applicazioni Sencha Touch conferendogli un tocco di dinamicità in più.