# j-ListForm

> j-ListForm: NUOVO: ritardi {Numero} inizio ritardo per la visualizzazione dei dettagli (default: 1000 ms); NUOVA: component.add() apre un modulo per creare record

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: it
Content-SHA256: eb938351a25978b8c51441194d3a64ca9556eff70225704ebff9bc4b4db223c0
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Configurazione__:

- `autofocus {String/Boolean}` si concentra sul primo elemento di input, `string` significa un selettore personalizzato (default: `false`)
- `empty {String}` testo di lista vuota (default: `---`)
- `default {Boolean}` esegue il metodo `DEFAULT()` per l'ambito di forma (default: `true`)
- Il controllo `required {Boolean}` sarà "necessario" (default: `false`)
- `enter {Boolean}` consente di utilizzare `enter` come sottoscrizione (default: `false`)
- `disabled {Boolean}` disabilita il controllo (default: `false`)
- `formclass {String}` una classe personalizzata per il contenitore
- `itemclass {String}` una classe personalizzata per il contenitore di oggetti
- `create {String}` un collegamento a una funzione `function(empty_object, callback(DEFAULT_ITEM_OBJECT), arr)` (`null` schede di valore creato)
- `submit {String}` un collegamento a una funzione `function(form_data, callback(NEW_DATA), arr, item_ref_in_items)` (aggiornamento dei schietti di valore `null`)
- `update {String}` un collegamento a una funzione `function(form_data, callback(NEW_DATA), arr, item_ref_in_items)` (aggiornamento dei schietti di valore `null`)
- `remove {String}` un collegamento a una funzione `function(remove_item, callback(really_remove?), arr)`
- `selector {String}` un selettore jQuery per il modello personalizzato (a parte del componente). `custom template` in [Dati vincolanti](https://wiki.totaljs.com/jcomponent/08-data-binding/)
- `footertop {Boolean}` sposta il piede sulla parte superiore del componente (default: `false`)
- `move {String}` un collegamento a una funzione `function(items)`
- `newbie {String}` un nome di proprietà per ogni nuovo oggetto (è sempre contenuto il valore di `true`)
- `plugin {String}` un nome plugin personalizzato all'interno del componente (default: `component.ID`)
- `invalidform {Boolean}` disabilita il componente `j-Validate` se il `j-ListForm` è in modalità di modifica (default: `false`)
- __NEW__: ritardi iniziali `delay {Number}` per la visualizzazione dei dettagli (default: `1000` ms)

Il componente deve avere definiti 3 modelli incollati in `<script type="text/html">`:

- `1` prima - con un modello Tangular per rendering degli articoli
- `2` secondo - una forma con i componenti (la forma sarà imballata in ambito isolato)
- `3` Footer - un footer con il pulsante per l'articolo `create`

__E’ bello sapere:__

Il componente osserva un evento di clic su tutti i pulsanti con l'attribuzione `name`:

- `name="submit"` esegue la presentazione/salva dei dati al modello
- `name="update"` esegue la presentazione/salva dei dati al modello
- `name="remove"` rimuove l'elemento corrente dal modello
- `name="cancel"` cancellato
- `name="create"` crea una forma vuota
- `form` contiene la classe `ui-listform-new` quando si crea un nuovo elemento

__Scrivi i pulsanti:__

- `name="remove"` rimuove l'articolo
- `name="up"` sposta l'oggetto verso l'alto
- `name="down"` sposta l'oggetto verso il basso

__Il metodo:__

- __NEW__: `component.add()` apre un modulo per creare record

Utilizzare con `<ui-component name="listform">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator La storia di Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

```html example.html
<style>
	.ui-listform-item { height: 26px; line-height: 26px; overflow: hidden; padding: 0 5px; }
	button { background-color: white; border-radius: 2px; border: 1px solid #E0E0E0; font-size: 12px; height: 28px; line-height: 27px; padding: 0 10px; }
	button i { margin-right: 5px; }
	button:disabled { color: gray; background-color: #F8F8F8; }
	.ui-dark button { background-color: #303030; border-color: #454545; }
	.ui-dark button:disabled { background-color: #252525; color: #404040; }
</style>

<div style="width:400px">

	<ui-component name="listform" path="users" config="autofocus:1">

		<!-- LIST RENDERING -->
		<script type="text/html">
			<div>
				<div class="pull-right">
					<button name="up"><i class="ti ti-arrow-up"></i></button>
					<button name="down"><i class="ti ti-arrow-down"></i></button>
					<button name="remove"><i class="ti ti-remove"></i></button>
				</div>
				{{ name }}
			</div>
		</script>

		<!-- FORM RENDERING -->
		<script type="text/html">
			<div class="padding">
				<ui-component name="input" path="?.name" config="required:1" default="''" class="m">Name</ui-component>
				<ui-component name="validate" path="?">
					<button name="submit"><i class="ti ti-save"></i>Save</button>
					<button name="remove">Remove</button>
					<button name="cancel">Cancel</button>
				</ui-component>
			</div>
		</script>

		<!-- FOOTER -->

		<script type="text/html">
			<div style="margin-top:10px"><button name="create"><i class="ti ti-plus-circle green"></i>Create new</button></div>
		</script>

	</ui-component>
	<hr />
	<ui-bind path="users" config="text:STRINGIFY(value)" style="font-family:monospace" class="block"></ui-bind>

</div>

<script>

	var users = [{ name: 'Total.js' }, { name: 'Flow' }, { name: 'jComponent' }];

</script>
```