Ext Js 4 : J'aimerais votre avis sur mon arborescence MVC et la structure du code

Bonjour,

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

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

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:

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:

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:

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:

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:

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:

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:

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:

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);
  }
});