Discussion :

[bilbonec]

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 :

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

code de mon template :

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
<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 :

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 :

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

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 ...

[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 :

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

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 :

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

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

équivaut à cela :

Code :

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

1
2
3
var panel = new Ext.Panel({
    items:{xtype:"grid"}
});

[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 :

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

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

en mode verbeux comme dans ton premier exemple ?

[goldledoigt]

Tu essayes de créer un component :

Code :

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

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

à partir de ceci:

Code :

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

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 ?

[bilbonec]

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 :

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

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

cela me donne le contenu suivant :

[bilbonec]

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 :

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

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

[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.

[bilbonec]

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

Code :

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

    - ../atolExt3WidgetPlugin/js/submitbutton.js

?

[goldledoigt]

Si si, c'est tout à fait ca ... nos réponses se sont juste court-circuitées

[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
(soit extJS, soit jQuery)

[goldledoigt]

Si t'as pas de grosses parties graphiques à construire, JQuery comme Ext Core se valent. Dans le cas contraire ExtJS rules the world

[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.