Checkbox dynamique ou statique

Bonjour,
Je suis en train de faire un programme en ext JS 4.0, en mode MVC avec une interface de type CRUD.

Mon appli possède plusieurs onglets qui fonctionnent correctement, c'est cool !

Ext.grid.Panel + Ext.data.Store = Tout fonctionne en GET/PUT
Ext.form.Panel + Ext.data.Store = GET OK mais PUT impossible

L'objet de ce post concerne des checkbox... J'en viens au fait.
- Je connais le nombre de checkbox à afficher dans mon formulaire
- J'arrive à récupérer les données de test d'un fichier json
- Je ne sais pas si mon dataStore est chargé
- Et pour finir, les checkbox ne sont pas cochées en fonction des données de test provenant du fichier example json

Mon objectif c'est d'enregistrer en base Mysql l'état des checkbox bien sur...

En googlant, on trouve bcp de monde qui font créé des checkbox de manière dynamique, suis-je obligé de le faire puisque je connais le nombre de checkbox à afficher ? Surtout que les données retournées seront formatées suivant mes besoins.

Merci d'avance pour toute l'aide que vous pourrez m'apporter...
J'ai fait plusieurs tests, les lignes commentées sont mes essais infructueux du à mon manque de compréhension des formulaires Ext JS

VOici mon bout de code :

Le fichier action.json

Code:

1
2
3
4
5
6
7
8
{
    'success': true,
    'data': [
        {'dID': '1', 'aID': '1', 'action':'on', 'value':true},
        {'dID': '1', 'aID': '2', 'action':'off', 'value':true},
        {'dID': '1', 'aID': '3', 'action':'dimmer', 'value':false}
    ]
}

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
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
 
Ext.define('myapp.DeviceActionForm', {
    extend: 'Ext.form.Panel',
    alias: 'widget.deviceactionform',
    autoHeight: true,
    width   : 600,
    bodyPadding: 10,
    initComponent: function(){
        //console.log("DeviceMainForm::initComponent");
 
        Ext.apply(this, {
            //cls: 'feed-grid',
            store: Ext.create('Ext.data.Store', {
                model: 'Action',
                proxy: {
                    type: 'ajax',
                    url: 'data/action.json',
                    idProperty : 'aID',
                    autoload:true,
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                },
                listeners: {
                    //load: this.onLoad,
                    scope: this
                }
            }),
            items: [{
                xtype: 'fieldset',
                title: 'Select the special actions for this module',
                defaultType: 'checkbox', // each item will be a checkbox
                layout: 'anchor',
                items: [{
                    boxLabel: 'On',
                    name: 'on',
                    dataIndex: 'on',
                    action:'on'
                    //inputValue: 'on'
                }, {
                    boxLabel: 'Off',
                    name: 'off',
                    dataIndex: 'off',
                    action:'off'
                    //inputValue: 'off'
                }, {
                    //checked: true,
                    boxLabel: 'Dimmer',
                    name: 'dimmer',
                    action:'dimmer',
                    dataIndex: 'dimmer'
                    //inputValue: 'dimmer'
                }]
            }],
            buttons: [{
                text: 'Save',
                handler: function(){
 
                var form = this.up('form').getForm(), s = '';
                if(form.isValid()){
                        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                            form.getValues(true).replace(/&/g,', '));
                    }
                }
            },{
                text: 'Reset',
                handler: function(){
                    var form = this.up('form').getForm(), s = '';
                    form.reset();
                }
            }]
        });
        this.callParent(arguments);
    },
 
    /**
     * Listens for the store loading
     * @private
     */    
    onLoad: function() {
        //console.log("DeviceMainForm::onLoad");
        var store = this.store;
        var record = store.getAt(0);
        this.loadRecord(record);
    },
 
    /**
     * Instructs the grid to load a new feed
     * @param {String} url The url to load
     */
    loadDevice: function(dID){
        //console.log("DeviceMainForm::loadDevice -> " + dID);
        var store = this.store;
        store.load({
            params: {
                data: dID
            }            
        });
    }
});