La classe Ext.fdl.Document est responsable de la représentation d'un document. Elle doit recevoir en paramètre de configuration un objet Fdl.Document pour fonctionner. Elle hérite de la classe Ext.Panel, il est donc possible de l'utiliser de façon similaire et de lui appliquer les mêmes configurations.
Exemple : affichage simple d'une représentation de document.
var document = context.getDocument({ id: id }); var documentPanel = new Ext.fdl.Document({ document: d, height: 400, width: 400 }); documentPanel.render(Ext.get('document-div'));
Les interfaces de documents peuvent recevoir une fiche de style CSS servant à harmoniser les anciennes apparences avec les nouveaux composants ExtJS. Pour réaliser cela, il faut ajouter dans le répertoire du style freedom utilisé un fichier EXT-ADAPTER.css. Il sera pris en compte lors de l'invocation des interfaces de document au travers des composants 3.0. Le theme DEFAULT contient par défaut une telle fiche de style (si vous utilisez ce thème, les documents apparaissent dont automatiquement harmonisés). Il est recommandé de s'en inspirer pour en produire d'autres au besoin.
La classe Ext.fdl.DocumentMultiView permet d'obtenir des représentations de document sous la forme d'onglets.
Activer les onglets ne modifie ni ne recharge leur contenu ; ainsi, si l'utilisateur commence à éditer un document en assignant des valeurs à certains champs, puis qu'il active l'onglet collection, puis qu'il active l'onglet Information, sa saisie en cours sera inchangée.
La classe Ext.fdl.MultiDocumentPanel permet d'afficher plusieurs documents sous forme d'onglets. Les documents sont contenus sous la forme de Ext.fdl.Document par défaut, ou de Ext.fdl.DocumentMultiView dans le cas des collections. Chaque onglet peut être fermé. Lorsque la dimension des onglets de documents dépasse la taille disponible, des flèches déroulantes s'affichent à gauche et à droite.