Insérer code Extjs dans une Div HTML

**eamon250d** · 01/05/2014, 19h43

Bonjour
J'ai une page html qui contient une div vide
J'ai une application Extjs qui fonctionne bien et durant l’affichage, mon application Extjs prend tout l'écran
Je cherche à insérer mon application Extjs dans la DIV HTML, en respectent les dimensions du DIV
Merci

**sekaijin** · 02/05/2014, 13h10

renderto

tous les composants ExtJS on une propriété de config renderto qui prends pour valeur un element html ou l'id d'un élément html

quant à la taille c'est à toi de le gérer. les composants ont des attributs with et height
la plus part des examples fournis pas sencha sont fait ainsi.

si ton application utilise un viewport tu peux le remplacer par un panel. un viewport occupe par defaut out l'espace
les deux étant des containers tu pourras garder le contenu à l'identique.

A+JYT

**eamon250d** · 20/05/2014, 21h46

J'ai télécharger cette example :
https://github.com/NewbridgeGreen/ex...nt-loader.html
Puis
Dans le fichier : component-loader.js
J'ai changé :
renderTo: document.body,
Par :
renderTo:'div1',

Dans le fichier : component-loader.html
J'ai inserer le code HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id='div1'  style="width:auto;  height: auto;        padding:5px;       background-color:limegreen;    color:green;border:3px  solid red;">
<p>Il faux inserer ici le code Extjs</p>
</div>

Donc je pourrai avoir code Extjs dans une DIV HTML

Dans mon application , c'est plus compliqué . Voici un extrait de mon code Viewport.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * The main application viewport, which displays the whole application
 * @extends Ext.Viewport
 */
Ext.define('CF.view.Viewport', {
    extend: 'Ext.Viewport',
    layout: 'fit',
 
    // La plupart des fichiers devraient être inclus soit ici (surtout les vues), soit dans controller/Map.js (models, stores, 
 
etc.)
    requires: [
        'Ext.layout.container.Border',
        'Ext.resizer.Splitter',
        'CF.view.Header',
        'CF.view.Map',
        'CF.view.Chart',
        'CF.view.Grid',
 
        'CF.view.ListeIndicateurs',
 
             'CF.view.FenetrePopup',
        'CF.view.Grid',
        'GeoExt.panel.Legend',
        'CF.controller.Menu',
        'CF.controller.SourcesInfosAction',
        'CF.controller.AnalyseAction'
    ],
........
........
........

Est ce que je dois changer tout les composants View ?

**eamon250d** · 21/05/2014, 19h15

Bonjour,

J'ai pris cet exemple :
http://www.objis.com/formationextjs/....Viewport.html

J'ai créé une DIV :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id='div1'  style="width:auto;  height: auto;        padding:5px;       background-color:limegreen;    color:green;border:3px solid red;">
     <p>Il faux inserer ici le code Extjs</p>
</div>

Je veux envoyer le contenu ExtJS vers cette DIV. Je remplace [codeinline]renderTo: Ext.getBody(),[codeinline] par renderTo:'div1',.

Résultat : ma DIV s'affiche en premier lieu puis le viewport s'affiche dans toute la page et dépasse la taille définie pour la DIV.

Est-ce qu'il y a moyen d'ajuster la taille du viewport pour l'afficher dans la DIV ?
Si je veux utiliser Panel ou lieu de ViewPort, c'est quoi la bonne syntaxe ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Ext.create('Ext.container.Viewport', {

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Ext.create('Ext.Ext.panel.Panel', {

Voici mon script complet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
 
    <!-- GC -->
 
<style type="text/css">
p {
    margin:5px;
}
.settings {
    background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
    background-image:url(../shared/icons/fam/folder_go.png);
}
.info {
    background-image:url(../shared/icons/fam/information.png);
}
</style>
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
<script type="text/javascript">
    Ext.require(['*']);
 
    Ext.onReady(function() {
 
        Ext.QuickTips.init();
 
        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
 
 
	 Ext.create('Ext.container.Viewport', {
	 //Ext.panel.Panel
    layout: 'border',
    //renderTo: Ext.getBody(),
	 renderTo:'div1',  
 
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        width: 150
        // could use a TreePanel or AccordionLayout for navigational items
    }, {
        region: 'south',
        title: 'South Panel',
        collapsible: true,
        html: 'Information goes here',
        split: true,
        height: 100,
        minHeight: 100
    }, {
        region: 'east',
        title: 'East Panel',
        collapsible: true,
        split: true,
        width: 150
    }, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: {
            title: 'Default Tab',
            html: 'The first tab\'s content. Others may be added dynamically'
        }
    }]
});
 
    });
    </script>
</head>
<body>
 
 
 
<div id='div1'  style="width:auto;  height: auto;        padding:5px;       background-color:limegreen;    color:green;border:3px solid red;">
<p>Il faux inserer ici le code Extjs</p>
</div>
 
 
 
    <!-- use class="x-hide-display" to prevent a brief flicker of the content -->
    <div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
    </div>
    <div id="center2" class="x-hide-display">
        <a id="hideit" href="#">Toggle the west region</a>
        <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
        <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
    </div>
    <div id="center1" class="x-hide-display">
        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
    </div>
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">
        <p>south - generally for informational stuff, also could be for status bar</p>
    </div>
</body>
</html>

Merci

**abraxis** · 22/05/2014, 15h22

La syntaxe pour le panel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
Ext.create('Ext.panel.Panel', {
    renderTo    : 'div1',
    width       : 300, //Largeur de la DIV
    height      : 300, //Hauteur de la DIV

**eamon250d** · 22/05/2014, 20h41

Quand on utilise Viewport , on n'a pas besoin de définir la largeur et la hauteur , même si on essaye d'appliquer les dimensions ,
ils ne seront pas pris en considération par le Viewport .
Pour intégrer le code Extjs , dans une DIV , il ne faux pas utiliser Viewport , par ce qu''il va prendre
toute l'écran au lieu de prendre la taille du DIV .
J''ai choisi 'Ext.panel.Panel' au lieu de 'Ext.Viewport' et on définit les dimensions du Panel manuellement .
On envoie par la suite le contenu vers la DIV : renderTo:'div1', au lieu de renderTo: Ext.getBody(),

Le problème qui se produit après cette manipulation :
le contenu de la page ne se redimensionne pas automatiquement si on change la taille du navigateur .
L''autre problème : width: '100%', marche bien, mais height: '100%' ne marche pas
J aimerai que le contenu Extjs prend tout l''espace que j'ai réservè pour mon DIV

Insérer code Extjs dans une Div HTML

Ext JS / Sencha

Discussions similaires

Partager

Partager