Discussion :

[edblv]

Bonjour,
J'ai un formulaire (en ExtJs 4.1.1) qui comporte plusieurs combobox.
Ces combobox ont chacune un store qui récupère des données dans une base SQL Server (via un PHP).

Mon problème est le suivant :
A l'ouverture de mon formulaire, je dois affecter des valeurs par défaut à mes combobox, mais quand je le fais, les stores n'ont pas encore finis de se charger et là, c'est le drame !

Comment savoir que mes combobox sont toutes prêtes.

[sekaijin]

on n'affecte pas de valeur au combo mais au champ du formulaire.

lorsque les store sont près les combos se positionne sur la valeur du champ

il n'y a rien à faire.
A+JYT

[edblv]

Alors, j'ai finit par trouver comment faire, et je vais en faire profiter tout le monde, pour une fois que c'est moi...!

En fait, il faut bien attendre que le store soit totalement chargé, j'ai fait comme ça (dans 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
 
init: function() {
	this.control({
		//---- Sur l'after render du form
		'#ddiSaisie': {
			afterrender: this.chargeDDI
		}
	});
},
 
chargeDDI: function(oForm) {
	var me=this;
 
	...
 
	this.waitStores(oForm);
},
 
waitStores: function(oForm) {
	var me=this;
	var oEtatDmd=oForm.query("#idetatddi")[0];
	var oSaisiePar=oForm.query('#idutilsaisie')[0];
	var bAllReady=true;
 
	bAllReady=(oSaisiePar.getStore().getTotalCount()>0 && oEtatDmd.getStore().getTotalCount()>0);
 
	if (bAllReady) {
		//---- Si tous les stores sont prêts, on lance l'init
		Ext.Function.defer(me.initForm, 100, this, [oForm]);
	} else {
		//---- Sinon, on attend un peu et on recommence
		Ext.Function.defer(me.waitStores, 100, this, [oForm]);
	}
},
 
initForm: function(oForm) {
	var oEtatDmd=oForm.query("#idetatddi")[0];
	var oSaisiePar=oForm.query('#idutilsaisie')[0];
 
	oSaisiePar.setValue(parseInt(top.Contexte.IdUtilisateur,10));
	oEtatDmd.setValue('999');
}

[sekaijin]

je ne comprends pas bien j'ai moi aussi des combos et je n'ai rien ajouté pour que ça fonctionne. par exemple sur le tuto MVC j'ai ajouté un filtre sur les utilisateur qui utilise une liste chargée par un datastore

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
Ext.require(['Ext.ux.grid.FiltersFeature']);
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
 
    //le contrôleur user gêre les vues user.List qui affiche une grille de tous les users
    //et user.Edit qui affiche le détail d'un user
    views: [
        'user.List',
        'user.Edit',
        'user.ListDetail' //utilise un layout border pour afficher le user.Edit à la place d'une fenêtre
    ],
 
    // les données sont stokée dans Users
    // UsersName contien la liste de tous les noms des users
    // il sert à afficher le menu filtre sur la colonne user name.
    stores: ['Users','UsersNames'],
    models: ['User','UserName'],
 
    init: function() {
        //on défini les actions associés au événements.
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            },
            'userlist': {
                select: this.selectUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
...

la grid qui utilise la liste username

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
Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',
 
    //title : 'All Users',
    store: 'Users',
    features: [{
        ftype: 'filters',
        encode: false,
        local: true,
    }],
 
    //on défini dynamiquement les colonnes pour pouvoir 
    //créer un datastore UsersNames pour le filtre.
    initComponent: function() {
        usersNames = AM.store.UsersNames.create();
        this.columns = [{
            header: 'Name',  
            dataIndex: 'name',  
            filter: {
                type: 'list',
                store: usersNames
            },
            flex: 1
        },{
            header: 'Email', 
            dataIndex: 'email', 
            filterable: true, 
            flex: 2
        }];
        this.callParent(arguments);
    }
});

au même titre que dans un form le champs de type combo est associé à un store le filtre aussi. et il n'y a rien à faire pour que ça fonctionne.

dans l'exemple http://docs.sencha.com/extjs/4.2.1/e...#register-form tu vas trouver le combo "State"

Code :

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

1
2
3
4
5
6
7
8
9
10
11
            {
                xtype: 'combobox',
                fieldLabel: 'State',
                name: 'state',
                store: Ext.create('KitchenSink.store.States'),
                valueField: 'abbr',
                displayField: 'state',
                typeAhead: true,
                queryMode: 'local',
                emptyText: 'Select a state...'
            },

et il est simplement associé au store states. et il n'y a rien d'autre. ça fonctionne tout seul.

A+JYT

[edblv]

Le problème n'est pas d'alimenter la combo, ça c'est facile à faire !
Le problème, c'est qu'une fois la combobox alimentée, je dois lui affecter une sélection par défaut (dans mon cas, une gestion de demande d'intervention, la demande doit être à l'état 'Saisie' au moment de la création).

C'est pour ça que je dois absolument savoir quand la combo est alimentée pour pouvoir lui affecter une valeur par défaut.

[sekaijin]

encore une foi je ne comprends pas
on affecte une valeur au champ pas à la combo. la combo se mets seule sur la valeur du champ.

soit tu ouvre ton formulaire sur un enregistrement existant et tu fais

Code :

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

1
2
3
4
5
6
7
8
9
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
...
    editUser: function(grid, record) {
        var view = Ext.widget('useredit');
 
        view.down('form').loadRecord(record);
    }
});

et il n'y a rien à faire soit tu ouvre ton formulaire sur un nouvel enregsitrement et tu fais

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
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
...
    addUser: function(grid) {
        var view = Ext.widget('useredit');
        var User = Ext.ModelMgr.getModel('User');
 
        var record = Ext.create('User', {
            name: 'Ed Spencer',
            age : 25
        });
 
        view.down('form').loadRecord(record);
    }
});

tu as donc bien mis tes valeur par défaut et le combo se positionnera tout seul comme lorsque les donnée viennent du datastore.

si tu n'as pas utilisé l'association DataStore Form tu peux toujours lorsque tu à crée ton formulaire utiliser

Code :

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

1
2
var reccord = myForm.getRecord( ) ;
reccord.setMyField('aValue');

la encore tu change la valeur du champ mais tu ne touche pas à la combo qui seule se mets en phase avec les valeurs du champs.

A+JYT