Bonjour,

Je développe des applications Intranet, j'ai découvert les magnifiques écrans Ex tJs et je me suis dit pourquoi pas moi

Le patron MVC étant recommandé avec ce framework, j'aimerais votre avis sur ce petit bout d'application basé sur cette méthode.

J'aimerais savoir si l'agencement et l'imbrication des différents composants vous semble juste, pas fait en dépit du bon sens
Y a-t-il plusieurs manières de faire du MVC avec Ext Js ?
Si oui, y a-t-il une technique plus standardisé qu'une autre ?

L'application ("Appli") se décompose en 9 fichiers, elle affiche un viewport avec un panel incluant un formulaire et une grille. (Aucune donnée pour l'instant).

L'arborescence :

application

=> controller
=>=> Panel.js
=>=> Formulaire.js
=>=> Tableau.js

=> model

=> store

=> view
=>=> Viewport.js
=>=> Panel.js
=>=> Formulaire.js
=>=> Panel.js

=> data
=> ext-4
=> appli.js
=> index.html

index.html :
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
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
 
        <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
        <script type="text/javascript" src="ext-4/ext-all-dev.js"></script>
        <script type="text/javascript" src="appli.js"></script>
        <script type="text/javascript">
		Ext.Loader.setConfig({enabled:true});
        </script>
    </head>
    <body> </body>
</html>
appli.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
 
Ext.application({
    name: 'Appli',
    appFolder: 'application',
    enableQuickTips:true,
    controllers: [
	'Panel'
    ],
    autoCreateViewport: true
});
LES CONTROLEURS :

Panel.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
 
Ext.define('Appli.controller.Panel',{
   extend: 'Ext.app.Controller',
       views: [
	      'Panel',
	      'Formulaire',
	      'Tableau'
       ],
       refs: [
	       { 
                   ref: 'Panel',
                   selector: 'viewport panel'
	       }
       ]
});
Formulaire.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
Ext.define('Appli.controller.Formulaire',{
	extend: 'Ext.app.Controller',
	views: [
		'Formulaire'
	],
	refs: [
                     {
                          ref: 'Formulaire',
                          selector: 'panel formulaire'
                     }
	]
});
Tableau.js :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
 
Ext.define('Appli.controller.Tableau',{
	extend: 'Ext.app.Controller',
	views: [
		'Tableau'
	],
	refs: [
                     {
                          ref: 'Tableau',
                          selector: 'panel tableau'
                     }
	]
});
LES VUES :

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
 
Ext.define('Appli.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'fit',
 
    initComponent: function() {
        var me = this;
        Ext.apply(me,{
 
            items: [
	           {
		    xtype: 'panel'
	           }
	   ]
 
        });
 
        me.callParent(arguments);
    },
});
Panel.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
 
Ext.define('Appli.view.Panel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.panel',
    title: 'Panel principal',
    layout: 'column',
 
    initComponent: function() {
        var me = this;
        Ext.apply(me,{
 
        items: [
                   {
                     xtype: 'formulaire'
                   },
                   {
                     xtype: 'tableau'
                   }
        ]
 
});
 
        me.callParent(arguments);
    }
});
Formulaire.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
46
47
48
49
50
51
52
53
54
55
56
 
Ext.define('Appli.view.Formulaire',{
	extend: 'Ext.form.Panel',
	alias: 'widget.formulaire',
	  height: 296,
	  width: 474,
	  bodyPadding: 10,
	  margin: 10,
	  draggable: false,
	  title: 'Identite',
	  url: 'save-form.php',
 
	  initComponent: function() {
	  var me = this;
 
                   Ext.applyIf(me, {
                      items: [
                                 {
                                    xtype: 'datefield',
                                    fieldLabel: 'Nom',
                                    name: 'nom',
                                    msgTarget: 'under',
                                    invalidText: '"{0}" Mauvais. "{1}" Bon.'
                                 }
                       ],
                       buttons: [
                                      {
                                         text: 'Annuler',
                                         handler: function() {
                                         this.up('form').getForm().reset();
                                      }
                        },
                        {
                           text: 'Valider',
                           formBind: true,
                           disabled: true,
                           handler: function() {
                              var form = this.up('form').getForm();
                              if (form.isValid()) {
                                  form.submit({
                                     success: function(form, action) {
                                         Ext.Msg.alert('Success', action.result.msg);
                                     },
                                     failure: function(form, action) {
                                        Ext.Msg.alert('Failed', action.result.msg);
                                     }
                                  });
                               }
                           }
                       }
                     ]
                  });
 
		me.callParent(arguments);
	}
});
Tableau.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
 
Ext.define('Appli.view.Tableau', {
  extend: 'Ext.grid.Panel',
  alias: 'widget.tableau',
  autoScroll: true,
  title: 'Tableau',
  width: 600,
 
  initComponent: function() {
    var me = this;
 
    Ext.applyIf(me, {
      columns: [
        {
          xtype: 'gridcolumn',
          dataIndex: 'string',
          text: 'String'
        },
        {
          xtype: 'numbercolumn',
          dataIndex: 'number',
          text: 'Number'
        },
        {
          xtype: 'datecolumn',
          dataIndex: 'date',
          text: 'Date'
        },
        {
          xtype: 'booleancolumn',
          dataIndex: 'bool',
          text: 'Boolean'
        }
      ],
      viewConfig: {
 
     }
    });
 
      me.callParent(arguments);
  }
});