"Ext.onReady is not a function"

Version imprimable

Bonjour,

Après avoir suivi un tutoriel pour un plugin Symfony (je ne pense pas que ce soit lié à ce framework mais vraiment un problème JS), je me retrouve avec l'erreur suivante :

Citation:

Ext.onReady is not a function
[Break on this error] Ext.onReady(myApp.app.init, myApp.app);

code de mon template :

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
<script type="text/javascript">
Ext.namespace('myApp');
 
myApp.content = null;
 
myApp.app = function() {
  return {
    init : function() {
      var items = Ext.ComponentMgr.create(myApp.content);
      this.viewport = new Ext.Viewport( {
        layout : 'fit',
        border : false,
        items : items
      });
      // This command enable component to execute a function send by symfony
      // Use by error to invalidate component
      this.viewport.cascade(atolExt3WidgetPlugin.cascadeFunctionToCall);
    }
  }
}();
 
Ext.onReady(myApp.app.init, myApp.app);
 
</script>
 
<?php
 
$formPanel = new PluginExt3FormPanel('/', $form);
$formPanel->setAttribute('title', "Hello World !");
 
// It's really recommended to create a helper which write these lines, and adapt it to your application
$ret = '<script type="text/javascript">';
$ret .= 'myApp.content = '.$formPanel->__toString();
$ret .= '</script>';
 
echo $ret;
 
?>

Détails :
- le plugin utilise extJS 3.0 ;
- j'inclue comme librairie : ext-base.js ;
- lorsque j'inclue aussi ext-all.js, je me retrouve avec l'erreur suivante :

Citation:

types[config.xtype || defaultType] is not a constructor
[Break on this error] return config.render ? con...config.xtype || defaultType](config); ext-all-debug.js (ligne 13521)

ligne incriminée :

Code:

1
2
3
4
5
6
7
8
9
10
11
        /**
         * Creates a new Component from the specified config object using the
         * config object's {@link Ext.component#xtype xtype} to determine the class to instantiate.
         * @param {Object} config A configuration object for the Component you wish to create.
         * @param {Constructor} defaultType The constructor to provide the default Component type if
         * the config object does not contain a <tt>xtype</tt>. (Optional if the config contains a <tt>xtype</tt>).
         * @return {Ext.Component} The newly instantiated Component.
         */
        create : function(config, defaultType){
            return config.render ? config : new types[config.xtype || defaultType](config);
        },

Merci de toute aide !! Pour le moment, Google n'a pas été mon ami ...

19/10/2010, 12h02
goldledoigt
En général quand ta console te dit Ext.onReady est undefined c'est que ExtJS est mal inclus. Tu dois inclure ext-base-debug.js ainsi que ext-all-debug.js pour que le tout fonctionne (en mode debug en plus).

Concernant les xtype...

Code:

types[config.xtype || defaultType] is not a constructor

Ca indique que ExtJS cherche à render (afficher) un component qu'il ne connait pas. Tous les components ExtJS ont un XTYPE (chaine de caractères) qui evite de déclarer le component explicitement.

Exemple, ceci :
Code:

1 2 3 4 var mygrid = new Ext.grid.GriPanel({...}); var panel = new Ext.Panel({ items:mygrid });
équivaut à cela :
Code:

1 2 3 var panel = new Ext.Panel({ items:{xtype:"grid"} });
19/10/2010, 12h25
bilbonec

Ok pour le fait qu'il faille inclure les deux librairies (base et all) puisqu'il semble que ça résolve le premier problème.

Cependant, je comprends ce que tu expliques ensuite pour l'écriture concise de extJS mais je ne vois pas comment le prendre en compte. Sous-entends-tu qu'il faille que je rende mon :

Code:

Ext.onReady(myApp.app.init, myApp.app);

en mode verbeux comme dans ton premier exemple ?
19/10/2010, 12h57
goldledoigt
Tu essayes de créer un component :

Code:

var items = Ext.ComponentMgr.create(myApp.content);

à partir de ceci:
Code:

1 2 $formPanel = new PluginExt3FormPanel('/', $form); $ret .= 'myApp.content = '.$formPanel->__toString();
En regardant le code que tu donnes je me dis que dans myApp.content tu récupères la config d'un component dont ExtJS ne sait que faire. Est-il possible que tu ais oublié d'inclure le JavaScript nécessaire à la création de ton objet PluginExt3FormPanel ?

Si tu fais un console.log(myApp.content); avant de le donner à Ext.ComponentMgr, ca donne quoi ?
19/10/2010, 14h20
bilbonec

Citation:

Est-il possible que tu ais oublié d'inclure le JavaScript nécessaire à la création de ton objet PluginExt3FormPanel ?

Possible ... mais je dois avouer que ne connaissant rien à JS/extJS, j'ai du mal à savoir.

Sinon, lorsque j'insère cette instruction juste avant le :

Code:

var items = Ext.ComponentMgr.create(myApp.content);

cela me donne le contenu suivant :

http://img85.imageshack.us/img85/6792/bugextjs.jpg

Arf, en essayant d'inclure différents JS, il se révèle qu'effectivement c'était un problème de JS nécessaires à mon plugin ...

Pour info :
Code:

1 2 3 4 5 javascripts: - ../atolExt3WidgetPlugin/js/ext-base-debug.js - ../atolExt3WidgetPlugin/js/ext-all-debug.js - ../atolExt3WidgetPlugin/js/plug.js - ../atolExt3WidgetPlugin/js/submitbutton.js
Merci de ta bonne idée :)

19/10/2010, 14h31
goldledoigt

Comme tu peux le voir dans les "items" et dans les "buttons" tu as des déclarations d'xtype.
Ici tu trouveras la liste des xtype supportés par défaut dans ExtJS.
Je voudrais pas dire de bêtises mais je ne crois pas que "submitbutton" soit un xtype de base dans ExtJS. C'est donc surement un component custom qu'il va falloir inclure dans ta page, tout comme ext-base.js et ext-all.js.
19/10/2010, 16h05
bilbonec

N'est-ce-pas ce que je fais avec l'include de :

Code:

- ../atolExt3WidgetPlugin/js/submitbutton.js

?
19/10/2010, 18h09
goldledoigt

Si si, c'est tout à fait ca ... nos réponses se sont juste court-circuitées :)
20/10/2010, 09h42
bilbonec

Ok, merci du coup de main en tout cas.

Je risque de passer ici régulièrement, faut que je réussisse à me mettre à JS en un mois 8O
(soit extJS, soit jQuery)
20/10/2010, 11h38
goldledoigt

Si t'as pas de grosses parties graphiques à construire, JQuery comme Ext Core se valent. Dans le cas contraire ExtJS rules the world ;)
20/10/2010, 12h18
bilbonec

Vu mes connaissances sur le sujet, ce choix ne m'appartiendra pas ! ;)

Un collègue ayant fait un précédent projet en extJS qui a plu à la boîte, j'essaye de composer avec en me disant qu'il y a des chances qu'on démarre dessus.