Ceci est un exemple simple pour vous montrer comment créer une fenêtre dans ExtJs4.
La fenêtre d'affichage se rend à le corps du document, et automatiquement les tailles à la taille de la fenêtre du navigateur et gère redimensionnement de la fenêtre. Il peut y avoir qu'une seule fenêtre d'affichage créé dans une page.
La fenêtre d'affichage ne fournit pas de défilement, de sorte Panneaux enfants au sein de la fenêtre d'affichage doit fournir pour faire défiler si nécessaire en utilisant la configuration AutoScroll.
Contrairement à la pièce du panneau de Ext JS, Viewport n'a pas une option Tbar. Donc, vous ne pouvez pas joindre un composant barre d'outils dans la fenêtre. La meilleure solution consiste à convertir la région au nord de votre application à une barre d'outils.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <title> ExtJS4 Viewport Exemple </ title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ script> <script> Ext la demande. ({name: 'Vue Port », le lancement: function () {Ext.create (' Ext.container.Viewport ', {mise en page:« frontière », les articles: [{région:« Nord », la frontière: false, hauteur: 24, Tbar: [{text: 'Nouveau', menu: [{text: 'Ajouter un nouveau X', handler: function () {/ / ajout d'un gestionnaire à "Ajouter X New" Ext.Msg.alert élément de menu («Alerte», «Ajouter un nouveau point X! ');}}, {text:' Ajouter un nouvel Y '}]}, {text:" Actualiser "}, {text:' Outils '},' -> ', {text: 'Options', iconCls: «options_icon", menu: [{text: "User Info"}, {text: 'Paramètres'}, {text: 'Theme Switch'}]}, {text: 'Aide' }, '-', {text: "Déconnexion"}]}, {région: «l'Occident», / / pliable: true, split: true, le titre: «Navigation», largeur: 150 / / pourrait utiliser un TreePanel ou AccordionLayout des articles de navigation}, {région: «sud», hauteur: 26, / * bbar: [Bar / / Bas {xtype: «bouton», texte: 'Bouton 1'}] * / dockedItems: [{xtype: «la barre d'outils », quai:« Attention Show & Clear ', handler: function () {var sb = Ext.getCmp bas ", les articles: [{xtype le:« bouton », le texte» («base-barre d'état»); sb.setStatus ({text: "Oops!", iconCls: 'x-état-erreur », clair: true / / auto-clair après un intervalle de jeu});}}, {xtype:« bouton », texte:« Montrer Occupé » , gestionnaire: function () {var sb = Ext.getCmp («de base-barre d'état»); / / Définit la barre d'état pour montrer que quelque chose est le traitement: sb.showBusy ();}}, {xtype: «bouton», texte: «le statut Clear ', handler: function () {var sb = Ext.getCmp (« de base-barre d'état »); / / une fois terminé sb.clearStatus ();}},' - ',' Texte brut ']} ]}, {région: «Est», titre: "Panneau de l'Est», pliable: la région 150}, {:: true, split: true, width 'centre', xtype: «tabpanel ', / / lui-même TabPanel n'a pas de titre ActiveTab: 0, / / Première onglet actif par défaut AutoScroll: true, les éléments: {. titre: "Tab par défaut ', html:« Le premier onglet de l \' autres contenus peuvent être ajoutés de façon dynamique "}}]});}} ); </ script> </ head> <body> </ body> </ html> 
