Au lieu d'appeler la fonction par click, le faire au chargement de la page

Version imprimable

20/02/2010, 19h08
Alexandrebox

Au lieu d'appeler la fonction par click, le faire au chargement de la page

Bonjour mes amis(es),

J'ai trouvé un code exceptionnel sur un site anglais.
Voici ce que le code fait :
Clicquez ici pour voir la démo SVP
Comme vous avez pu le voir, C'est génial. Mais, la fenêtre s'affiche uniquement que quand on clique sur le bouton. Moi j'aimerais qu'elle s'affiche au chargement de la page. Qui peut m'aider SVP?

D'avance je vous remercie infiniment.
21/02/2010, 00h01
Bovino

Ben... il suffit de lancer la fonction sur le load de window (voire le domready) plutôt que sur le click du bouton :?
Maintenant, quant à savoir comment le faire avec extjs, ça doit bien être expliqué quelque part dans la doc.

ça a l'air facile comme ça mais je suis novice et ne comprends pas grand chose. Un premier petit coup de pouce m'aidera. Voici le script de la page qui appelle :

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Window Layouts 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="../state/save-state.php"></script>
    <script language="javascript" src="../state/get-state.php"></script>
    <script language="javascript" src="../state/SessionProvider.js"></script>
    <script language="javascript" src="layout.js"></script>
 
    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
 
    <style type="text/css">
        .x-panel-body p {
            margin: 10px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<!-- EXAMPLES -->
<h1>Windows with Layouts</h1>
<p>This example shows how Ext containers can be nested in windows to create advanced layouts.</p>
<input type="button" id="show-btn" value="Show Window"/><br/><br/>
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
</body>
</html>

Et voici la page des fonctions :

Code:

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
Ext.onReady(function(){
 
    Ext.state.Manager.setProvider(
            new Ext.state.SessionProvider({state: Ext.appState}));
 
    var button = Ext.get('show-btn');
 
    button.on('click', function(){
 
        // tabs for the center
        var tabs = new Ext.TabPanel({
            region: 'center',
            margins:'3 3 3 0', 
            activeTab: 0,
            defaults:{autoScroll:true},
 
            items:[{
                title: 'Le titre information',
                html: Ext.example.bogusMarkup
            },
 
			]
        });
 
        // Panel for the west
        var nav = new Ext.Panel({
            title: 'Navigation',
            region: 'west',
            split: true,
            width: 200,
            collapsible: true,
            margins:'3 0 3 3',
            cmargins:'3 3 3 3'
        });
 
        var win = new Ext.Window({
            title: 'Layout Window',
            closable:true,
            width:600,
            height:350,
            //border:false,
            plain:true,
            layout: 'border',
 
            items: [nav, tabs]
        });
 
        win.show(this);
    });
});

D'avance je vous remercie beaucoup

J'ai finalement trouvé.
Il faut enlever l'élément button dans le fichier .js
Cependant il me reste autre chose. Le content est initialisé avec un texte.
Ce que j'aimerais faire, c'est d'avoir mes menus à gauche et le contenu du menu à droite. Est-ce que c'est ce fichier qu'il faut modifier? quelqu'un sait comment faire ?

Code:

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
/*!
 * Ext JS Library 3.1.1
 * Copyright(c) 2006-2010 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
 
Ext.example = function(){
    var msgCt;
 
    function createBox(t, s){
        return ['<div class="msg">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        msg : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(1).ghost("t", {remove:true});
        },
 
        init : function(){
            /*
            var t = Ext.get('exttheme');
            if(!t){ // run locally?
                return;
            }
            var theme = Cookies.get('exttheme') || 'aero';
            if(theme){
                t.dom.value = theme;
                Ext.getBody().addClass('x-'+theme);
            }
            t.on('change', function(){
                Cookies.set('exttheme', t.getValue());
                setTimeout(function(){
                    window.location.reload();
                }, 250);
            });*/
 
            var lb = Ext.get('lib-bar');
            if(lb){
                lb.show();
            }
        }
    };
}();
 
Ext.example.shortBogusMarkup = '<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.';
Ext.example.bogusMarkup = '<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.<br/><br/>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.</p>';
 
Ext.onReady(Ext.example.init, Ext.example);
 
 
// old school cookie functions
var Cookies = {};
Cookies.set = function(name, value){
     var argv = arguments;
     var argc = arguments.length;
     var expires = (argc > 2) ? argv[2] : null;
     var path = (argc > 3) ? argv[3] : '/';
     var domain = (argc > 4) ? argv[4] : null;
     var secure = (argc > 5) ? argv[5] : false;
     document.cookie = name + "=" + escape (value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
};
 
Cookies.get = function(name){
	var arg = name + "=";
	var alen = arg.length;
	var clen = document.cookie.length;
	var i = 0;
	var j = 0;
	while(i < clen){
		j = i + alen;
		if (document.cookie.substring(i, j) == arg)
			return Cookies.getCookieVal(j);
		i = document.cookie.indexOf(" ", i) + 1;
		if(i == 0)
			break;
	}
	return null;
};
 
Cookies.clear = function(name) {
  if(Cookies.get(name)){
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
};
 
Cookies.getCookieVal = function(offset){
   var endstr = document.cookie.indexOf(";", offset);
   if(endstr == -1){
       endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
};

D'avance je vous remercie beaucoup

26/02/2010, 17h31
tomcruz

Qu'entends tu par avoir les menus à gauche ? Tu parles de quelque chose comme dans cet exemple ?
(attention je ne sais pas si ce composant marche avec ext 3)

En gros si tu veux les menus à gauche tu dois utiliser autre chose qu'un TabPanel, je ne suis pas sur que ça existe dans les composants de base (encore une fois je peux me tromper, peut être qu'il yen a un en ext3)
27/02/2010, 10h18
Alexandrebox

Merci pour ta réponse. C'est exactement ce que je cherche à faire. Tu peux m'aider STP ? pour cet exemple

Citation:

Tab Panel rendered into an existing div

J'ai juste une liste de menu : menu1, menu2, menu3, ... menu11 avec leur contenu à droite.
D'avance te remercie beaucoup pour ton aide
01/03/2010, 14h27
tomcruz

Tu dois t'inspirer du code de tabpanel1 tel qu'il est défini dans le fichier des exemples, et aussi récupérer les sources du composant en lui même (téléchargables depuis le site du composant). Si tu copies l'exemple tel quel il me semble que le composant va se rendre dans un div nommé tabs.

Après le composant en lui même fonctionne comme un TabPanel classique au niveau des items. N'hésite pas à regarder la doc extjs tabpanel pour voir quoi mettre dans les items