Accéder aux données d'un data.Store

Version imprimable

Bonjour

Je débute dans l'utilisation de ExtJS 4.

Je voudrais remplir un champ TextField avec les données d'un data Store.

Voici le code javascript

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
 
var userStore;
var test;
 
Ext.require('Ext.data.Store');
 
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});
 
Ext.onReady(function() { 
    Ext.QuickTips.init();
 
userStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        fields: ['id','name'],
        proxy: {
            type: 'ajax',
            url: 'users.json',
            reader: {
                type: 'json',
                root: 'users',
                successProperty: 'success'
            }
        }
    });
 
test = Ext.create('Ext.form.field.TextArea',{
   renderTo: Ext.getDom('test'),
   name: 'objet_detail_contact',
   id: 'objet_detail_contact',
   autoScroll: 'auto',
   width: 400,
   height: 100,
   anchor: '100%',
   readOnly: true,
   value: userStore.getAt(0).get('name')
});
 
});

Le fichier user.json

Code:

1
2
3
4
5
6
7
{
    success: true,
    users: [
        {id: 1, name: 'Ed'},
        {id: 2, name: 'Tommy'}
    ]
}

J'ai le message suivant : userStore.getAt(0) is undefined
En regardant la documentation la méthode getAt existe pour l'objet Ext.data.Store.

Je ne vois pas mon erreur.

Merci d'avance.

03/05/2012, 21h06
sekaijin

sauf que lorsque ton champs est créé le datastore n'est probablement pas prêt.

tu crée ton champs vide.
il faut utiliser l'événement "load" qui est lancé lorsque les données sont disponibles

tu crée ensuite ton datastore avec un listener sur cet événement
dans le listener tu remplit ton champ

A+JYT

Je comprends mieux le problème.

Il faut que je fasse comme ca plutot :

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
 
var userStore;
var test;
 
Ext.require('Ext.data.Store');
 
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});
 
Ext.onReady(function() { 
    Ext.QuickTips.init();
 
userStore = Ext.create('Ext.data.Store', {
        autoLoad: true,
        fields: ['id','name'],
        proxy: {
            type: 'ajax',
            url: 'users.json',
            reader: {
                type: 'json',
                root: 'users',
                successProperty: 'success'
            }
        },
        listeners: {
            load: { fn: function(){ //Chargement du textarea } }
        }
    });

06/05/2012, 17h39
sekaijin

oui c'est ça
A+JYT

J'ai réussi par contre je voudrais passer au niveau du dessus en utilisant alimentant les données du DataStore avec un base de données et utiliser le filtre du dataStore.

J'ai donc utilisé le code suivant.

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
 
var BaseReclamation;
var test;
var tmp;
 
Ext.require('Ext.data.Store');
Ext.define('Reclamation', {
    extend: 'Ext.data.Model',
    fields: [  
        {name: 'CONTINUE_ID', type: 'int'},
        {name: 'TYPE', type:'string'}
 
    ]
});
 
Ext.onReady(function() { 
    Ext.QuickTips.init();
// création du textArea
text = Ext.create('Ext.form.field.TextArea',{
   renderTo: Ext.getDom('test'),
   name: 'objet_detail_contact',
   id: 'objet_detail_contact',
   autoScroll: 'auto',
   width: 400,
   height: 100,
   anchor: '100%',
   readOnly: true
});
//Création du dataStore
BaseReclamation = Ext.create('Ext.data.Store',{
    model: Reclamation,
    pageSize:10,
    proxy: {
        type: 'ajax',
        url: 'http://128.128.76.2/dev/qualite/qualite/ameliorationjson.php',
        reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success'
        }
    },
    listeners: {
        load: {fn: function(){
                text.setValue(BaseReclamation.getAt(0).get('CONTINUE_ID'));
        }}
    }
});
// Application d'un filtre et chargement
BaseReclamation.filter('ID',document.getElementById("reclam_id").value)
BaseReclamation.load();
});

J'obtiens le message suivant BaseReclamation.getAt(0) is undefined.
Je ne comprends normalement en utilisant la fonction load. Le listerner sur load doit bien se vendre déclencher.