Discussion :

[Abdes1367]

Bonjour,

J'ai repris une application web MVC sur github qui affiche une grid avec des users et permet les opérations CRUD classiques avec une base de données Mysql.
J'ai voulu l'adapter a mon cas, où j'ai plusieurs "objets" (clients, sites, services, users, ...). J'ai créé des sous répertoires dans les répertoires principaux, à savoir "model", "controler", "view" et "store". J'ai modifié bien entendu les noms d'objets.
Lorsque je teste l'appli d'origine elle marche très bien.
Lorsque je teste la mienne, l'écran reste vide au lancement. En principe c'est le tableau (grid) des clients qui doit s'afficher. Aucune erreur dans la console. J'ai utilisé Firebug pour tracker d'éventuelles erreurs mais rien, c'est le vide total !
J'utilise extjs depuis peu. Ce que j'aimerais savoir c'est une démarche à suivre, et les premiers éléments à vérifier quand on est dans ce cas.

Merci d'avance.

[NoSmoking]

Bonjour,
comment veux tu que l'on t'aide juste au jugé?

Le code, voire une page en ligne (c'est mieux on a le contexte), ne serait pas du luxe pour que l'on puisse regarder de près le résultat.

J'ai repris une application web MVC sur github qui affiche une grid

cela peut aider également de savoir de connaitre l'origine.

[sekaijin]

plutôt que de copier un example sur le net

je conseille de faire le Pas à Pas du tuto MVC

à lire dans la doc de sencha
la partie sur les commandes de senchaCmd qui permet d'ajouter un MVC à une application.

A+JYT

[Abdes1367]

@ NoSmoking : Tu as raison. En fait je voulais juste une piste, mais en effet sans au moins un début de code, c'est difficile. Donc voici le code.
@Sekaijin : j'avais déjà fait pas à pas le tuto MVC qui a bien marché. J'ai ensuite repris l'appli dont je parlais et qui a aussi bien marché. J'ai alors voulu commencé à traiter mon projet et c'est la que les problèmes commencent

Dans ce qui suit je vous donne le code:

Le modèle :

Code :

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

1
2
3
4
5
Ext.define('AppGestionClients.model.gestionadmin.Client', {
    extend: 'Ext.data.Model',
    idProperty: 'idClient',
    fields: [{name: 'idClient',   type: 'int'},'nom', 'adresse', 'commune', 'codep', 'pays', 'tel', 'email']
});

Le store :

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('AppGestionClients.store.gestionadmin.Clients', {
    extend: 'Ext.data.Store',
    model: 'AppGestionClients.model.gestionadmin.Client',
    autoLoad: true,
    pageSize: 10, // nombre de lignes par page
    proxy: {
        type: 'ajax',
        api: {
            read: 'data/lireClient.php',
            update: 'data/majClient.php',
            create: 'data/creerClient.php',
            destroy: 'data/supprimerClient.php'
        },
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            root: 'data',
            encode: true
        }
    }
});

Le controller:

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
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
Ext.define('AppGestionClients.controller.gestionadmin.Client', {
    extend: 'Ext.app.Controller',
    stores: ['gestionadmin.Client'],
    views: [
        'gestionadmin.ListeClients',
        'gestionadmin.EditerClient',
        'gestionadmin.CreerClient'
    ],
 
    init: function() {
 
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
            'listeClients': {
                itemdblclick: this.editClient,
                selectionchange: this.selectClient,
            },
 
            'listeClients button[action=ajouterClient]': {
                click: this.newClient
            },
 
            'listeClients button[action=supprimerClient]': {
                click: this.deleteClientClick
            },
 
            'editerClient button[action=save]': {
                click: this.updateClient
            },
            'creerClient button[action=save]': {
                click: this.createClient
            },
        });
    },
 
    //onPanelRendered: function() {
    //    console.log('The panel was rendered');
    //},
 
    selectClient: function(selModel, selections) {
        console.log('select'); 
        var delBut = Ext.ComponentQuery.query('#suppressionClient')[0];
        delBut.setDisabled(false);
        //list['toolbar'].('#deleteUsuario').setDisabled(selections.length === 0);
        //console.log(grid.down('#delete'));
    },
 
    editClient: function(grid, record) {
        //console.log('Double clicked on ' + record.get('name'));
        var view = Ext.widget('editerClient');
        view.loadRecord(record);
        view.show();
        //console.log(view.loadRecord(record).getFields( ));
 
    },
 
    newClient: function(button) {
        console.log('Create');
        var view = Ext.widget('creerClient');
        view.down('form');
    },
 
    updateClient: function(button) {
        console.log('clicked the Save button');
            var pan=button.up('panel'),
            //var win    = pan.down('window'),
            form   = win.down('pan'),
            record = form.getRecord(),
            values = form.getValues();
            var viewEF = form.getForm();
        if (viewEF.isValid()) {
            //console.log(values);
            record.set(values);
            win.close();
            this.getUserStore().sync(); 
        }
    },
 
    createClient: function(button) {
        console.log('clicked the Save button Create');
            var win    = button.up('window'),
            form   = win.down('form'),
            record = form.getRecord(),
            values = form.getValues();
 
        //record.set(values);
        console.log(values);
        this.getUserStore().add(values);
        win.close();
 
        this.getUserStore().sync();
    },
 
    deleteClientClick: function(selModel, selections) {
       // console.log('clicked Delete');
        var viewList = Ext.ComponentQuery.query('#userID')[0];
       // console.log(viewList.getSelectionModel().getSelection()[0]);
        var selection=viewList.getSelectionModel().getSelection()[0];
        if(selection)
        {
            this.getUserStore().remove(selection);
            this.getUserStore().sync();
        }  
    }               
});

Le fichier app.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
Ext.Loader.setConfig({ enabled: true });
Ext.application({
    name: 'AppGestionClients',
 
    controllers: [
        'gestionadmin.Client'
    ],
 
    appFolder: 'app',
 
    launch: function() {
 
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    width: 600,
                    height: 600,
                    xtype: 'listeClients'
                }
            ]
        });
    }
});