Apertura generica form in Dialog- openFormDialog()

Apre una generica form in un Dialog, totalmente svincolata da una gwClass. E' utile in generale quando si vogliono creare velocemente form diverse da quelle generate in automatico a partire dalle gwClass. Alla velocità di codifica si contrappongono dei vincoli sulla struttura, composta da:

• parte centrale contenente la form con i vari widget incasellati dentro un dojo TableContainer. Il layout della form è vincolato, nel senso che i widget verranno incasellati in due colonne con a sinistra le label e a destra gli input
• toolbar in basso contenente i buttons

• dialogId String, optional. E' un identificativo che verrà assegnato al Dialog. Utile per farvi riferimento successivamente
• formManagerId String, optional. E' un identificativo che verrà assegnato al formManger interno al Dialog. Utile per farvi riferimento successivamente
• formManagerOptions String, optional, default null. Serie di proprietà che verranno mixate al formManger
• tableContainerId String, optional. E' un identificativo che verrà assegnato al tableContainer interno al Dialog, il quale incasella i widget in colonna, con a sinistra la label e a destra l'input. Utile per farvi riferimento successivamente
• formFields Object[], optional, default null. E' una lista di mappe contenenti la definizione dei widget della form. L'ordine è rilevante. Le definizioni sono mappe js nel formato sottostante.
  • declaredClass, String, required. E' il nome comprensivo di path del widget dojo che verrà instanziato in quella posizione
  • fieldId, String, optional. E' l'identificativo del widget utilizzabile per eventualemente interagire con esso in seguito
  • label, String, optional. E' la label che verrà visualizzata nella colonna di sinistra in corrispondenza dle widget
  • fieldOptions, Object, optional. E' una mappa di proprietà/function che verrà mixata nelle props del widget dojo all'atto della sua creazione. Può essere usato per aggiungere function o sovrascrivere quelle già esistenti.

{
	fieldId: 'fieldId1', //optional
	declaredClass: 'dijit/form/NumberTextBox', //required
	label: 'Field 1', //optional
	fieldOptions: {
		value: 100,
		name: 'field1Value',
		style: {color: 'red'},
		'class': 'gwMyClass',
		myCustomFunction: function(a, b, c){
		},
		functionThatOverridesOneAlreadyExistingInsideDojoWidget: function(a, b, c){
		}
	}
}

• buttons Object[], optional, default null. E' una lista di mappe contenenti la definizione dei botton che verranno creati nella bottom toolbar. L'ordine è rilevante.
  • label, String, optional. La label per il bottone. Si possono usare tutte le label predefinite come: saveLabel, createLabel, closeLabel, createAndCloseLabel, saveAndCloseLabel, applyLabel
  • iconClass, String, optional. Il nome della class css che contiene la regola per mostrare l'icona del button. Si possono usare tutte le label predefinite come: 'iconDone', 'iconApply', 'iconClose', 'iconCancel'
  • action, function, required. E' una function contenente il codice js che verrà eseguita al click sul button. Come primo argomento in ingresso viene passato 'dialog', su cui si può richiamare la function .hide()/.close()

{
	label: 'Do Action',
	iconClass: 'iconDone',
	action: function(dialog, event){
		//TODO
		dialog.close();
	}
}

Sono inoltre supportati tutti i parametri esposti dal generico Dialog(vedi Apertura Dialog Generico;)

Alcuni widget dojo, in fase di creazione, autonomamente rielaborano le proprietà passate in creazione, compresi gli stili. Quindi può essere necessario applicare eventuali customizzazioni, per esempio sovrascritture di stile/valori, solo in seguito all'apertura della form, quando tutti i widget sono già stati inizializzati. A questo scopo può essere utile adottare un fieldId univoco e successivamente utilizzare:

require(['dijit/registry'], function(registry){
	..
	var widget = registry.byId(fieldId);
	if(widget) widget.set('value', newValue);
});

Cambiare stili nodi dom interni dopo elaborazione iniziale widget

require(['dijit/registry', 'dojo/query', 'dojo/dom-style'], function(registry, query, domStyle){
	..
	var widget = registry.byId(fieldId);
	if(widget) domStyle.set(query('.dojoInnnerClass', widget.domNode)[0], 'color', 'red');
});

Esempio di utilizzo da dentro una gwClass di tipo 'Selezionati in Lista':

var title = 'Title'; //optional
var dialogId= 'dialogId'; //optional
var dimensions = {w: 400, h: 300}; //optional
var formManagerId = 'formManagerId'; //optional
var tableContainerId = 'tableContainerId'; //optional
var formManagerOptions = {}; //optional
var formFields = [
	{
		fieldId: 'fieldId1', //optional
		declaredClass: 'dijit/form/NumberTextBox', //required
		label: 'Field 1', //optional
		fieldOptions: {
			name: 'field1Value'
		}
	},
	{
		fieldId: 'rbField1', //optional
		declaredClass: 'dijit/form/RadioButton', //required
		label: 'RB 1', //optional
		groupLabel: 'RB Group',
		fieldOptions: {				
			name: 'rbName'
		}
	},
	{
		fieldId: 'rbField2', //optional
		declaredClass: 'dijit/form/RadioButton', //required
		label: 'RB 2', //optional
		fieldOptions: {
			checked: true,
			name: 'rbName'
		}
	}
];
var buttons = [
	{
		label: 'Do Action',
		iconClass: 'iconDone',
		action: function(dialog, event){
			//TODO
			dialog.hide();
		}
	},
	{
		label: closeLabel,
		iconClass: 'iconClose',
		action: function(dialog, event){
			dialog.hide();
		}
	}
];
var params = {
	title: title,
	dimensions: dimensions,
	dialogId: dialogId,
	formManagerId: formManagerId,
	formManagerOptions: formManagerOptions,
	tableContainerId: tableContainerId,
	formFields: formFields,
	buttons: buttons
}
var formDialog = openFormDialog(params);