Discussion :

[sibador]

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 :

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

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

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.

[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

[sibador]

Je comprends mieux le problème.

Il faut que je fasse comme ca plutot :

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

[sekaijin]

oui c'est ça
A+JYT

[sibador]

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 :

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
 
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.