[POO] script popup

**paul.Rostorp** · 20/01/2009, 20h30

Bonjour,
J'ai ci-dessous un script permettant d'ouvrir une fenêtre dans la page courante :

j'aimerais pouvoir ajouter une autre image qui ouvre une deuxième popup j'ai testé de récrire la même "phrase" mais seul la première des 2 images ouvre une popup.

voici le script:

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Hello World Window Example</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
 
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->
 
    <script type="text/javascript" src="../../ext-all.js"></script>
 
    <script language="javascript" src="hello.js"></script>
 
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
 
    <style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
    </style>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
 
<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="image" id="show-btn" "src="http://s255859051.onlinehome.fr/script-espace-membre%203/zone-membre/mangas-0022.gif" />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hellos.js</a> for the full source code.</p>
 
<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>
</div>
</body>
 
</html>

merci,

**Auteur** · 21/01/2009, 11h23

bonjour,

que contient hello.js ?

**paul.Rostorp** · 21/01/2009, 11h49

Je sais pas si ça peut aider mais voila "hello.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * <a href="mailto:licensing@extjs.com">licensing@extjs.com</a>
 * 
 * <a href="http://extjs.com/license" target="_blank">http://extjs.com/license</a>
 */
 
Ext.onReady(function(){
    var win;
    var button = Ext.get('show-btn');
 
    button.on('click', function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                el:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
 
                items: new Ext.TabPanel({
                    el: 'hello-tabs',
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),
 
                buttons: [{
                    text:'Submit',
                    disabled:true
                },{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});

merci,

**Auteur** · 21/01/2009, 22h36

visiblement ta pop-up est un div :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>

qui a pour id="hello-win". D'après ce que je vois dans le fichier JS que tu as posté

Code :

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

1
2
3
4
5
6
7
8
9
if(!win){
            win = new Ext.Window({
                el:'hello-win',
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,

ton objet Ext est lié à ce div. Donc, pour pourvoir ouvrir une nouvelle pop-up, il faut créer un nouvel objet Ext lié à un autre div (qui aura forcément un id différent de "hello-win").

Regarde la documentation des fichiers : ext-base.js et ext-all.js sur le site de celui qui a conçu cette bibliothèque.