Ext JS 4.2 Combobox avec Remote Store & Pagination Problème de Valeur par Défaut

Question

J'ai une combobox sur un formulaire que j'utilise pour ajouter et modifier l'un de mes modèles. La liste des valeurs à laquelle la combobox est liée pourrait potentiellement être très longue (des milliers d'enregistrements) donc j'ai besoin d'utiliser un magasin de données distant avec pagination pour éviter de charger toutes les valeurs à la fois. Dans le formulaire d'ajout, cela fonctionne très bien, mais lorsque j'essaie de modifier mon modèle en utilisant le formulaire, je ne parviens pas à définir de manière fiable la valeur de la combobox.

Lors du chargement de la combobox, le magasin charge les 50 premiers enregistrements. Le problème est que la fonction setValue de la combobox ne recherche que les valeurs chargées dans le magasin pour l'enregistrement avant de définir la valeur. Si l'enregistrement sélectionné ne se trouve pas dans les 50 premiers enregistrements du magasin, setValue ne le trouve pas et la valeur n'est pas définie.

J'ai créé un jsFiddle qui illustre le problème : http://jsfiddle.net/mgolus/Z3Jpy/

Le code est ci-dessous :

var testVendorId;
testVendorId = 30; // Fonctionne
//testVendorId = 60; // Ne fonctionne pas :-(

Ext.onReady(function() {
    var addUserForm = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    model: 'Test.model.CatalogItem',
    items: [
            {
                xtype: 'textfield',
                name: 'number',
                fieldLabel: 'Numéro'
            },
            {
                xtype: 'combobox',
                name: 'vendorId',
                fieldLabel: 'Fournisseur',
                forceSelection: true,
                store: {
                    model: 'Test.model.Vendor',
                    autoLoad: true,
                    pageSize: 50
                },
                displayField: 'name',
                valueField: 'id',
                pageSize: 50 // Je sais que cela doit être une valeur > 0 pour afficher le paginateur, je mets juste 50 pour la cohérence
            }
        ],
    });

    addUserForm.down('combobox').getStore().on('load', function() {
            var user = Ext.create('Test.model.CatalogItem', { id: 1, number: 'T001', vendorId: testVendorId });
            console.log(user);
            addUserForm.loadRecord(user);    
    });

});

Ext.define('Test.model.CatalogItem', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'number' },
        { name: 'vendorId' }
    ] 
});

Ext.define('Test.model.Vendor', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id' },
        { name: 'name' }
    ],
    proxy: {
        type: 'jsonp',
        url: 'http://pmvitals.com/vendors.aspx',
        reader: {
            root: 'data'
        }
    }
});

Lorsque l'id sélectionné (testVendorId défini en haut) est 30, la combobox se remplit avec la valeur par défaut. Si vous définissez l'id à plus de 50, la valeur ne sera pas remplie car elle n'existe pas dans la première page du magasin.

Toute aide est grandement appréciée!

Answer 1

J'ai rencontré un problème similaire. Pour le surmonter, j'ai créé une extension personnalisée de la combobox (que j'ai appelée RemoteComboBox). L'une de ses principales fonctionnalités est que si sa valeur est définie via un chargement de formulaire, ou même simplement avec setValue(), le comportement de chargement par défaut est de faire une demande distante pour la valeur réelle. Cela renvoie une seule valeur, donc la réponse est petite, et ensuite le comportement par défaut de la combobox reprend une fois que l'utilisateur recommence à interagir avec elle.

La différence avec ma solution et votre besoin est que vous aurez encore le problème de pagination. Même si votre valeur est initialement trouvée par la demande basée sur l'identifiant, vous aurez toujours le défi de localiser le même élément à travers plusieurs pages d'enregistrements.

Avez-vous vraiment besoin de la pagination, cependant? J'ai trouvé qu'il est souvent plus utile de simplement fournir des outils de recherche plus riches que de forcer l'utilisateur à parcourir plusieurs pages d'enregistrements.