Après le chargement du magasin, sélectionner et afficher la ligne correspondante dans la grille fonctionne dans Chrome, pas sous IE

Je suppose que je dois être en train de faire quelque chose de mal ici. J'ai un GridPanel qui reçoit les données à partir d'un Magasin. Le magasin dispose d'un écouteur sur le load événement, qui sélectionne la ligne 8 de la grille de sélection du modèle et tente de l'amener à se concentrer.

En Chrome (actuellement la version 33) cela fonctionne et l'enregistrement spécifié est visible.
Dans IE (version 11), cela ne fonctionne pas. Au moment de la alert('pause'); déclaration, la grille est visible avec la ligne spécifiée visible. Mais après avoir cliqué loin le message d'alerte, la grille semble être de faire quelque chose, provoquer, après qu'il n'en montrer que les premiers rangs.

Ext.onReady(function() {
    Ext.QuickTips.init();

    //create the data store
    var store = new Ext.data.JsonStore({
        autoDestroy: true,
        proxy: new Ext.data.HttpProxy({url: "/Home/PersonList", method: "POST"}),
        fields: ["First", "Last", "Company", "Email"],
        autoLoad: true,
        listeners: {
            load: function(s, r, o) {
                console.log('store loaded');
                grid.getSelectionModel().selectRow(8);
                grid.getView().focusRow(8);
                alert('pause');
            }
        }
    });

    //create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        id: 'grid',
        columns: [{header: 'Company', dataIndex: 'Company'},
            {header: 'First name', dataIndex: 'First'},
            {header: 'Last name', dataIndex: 'Last'},
            {header: 'Email',dataIndex: 'Email'}
        ],
        height: 150,
        listeners: {
            'render': function(component) {
                console.log('grid rendered');
            }
        }
    });

    //render the grid to the specified div in the page
    grid.render(document.body);
});

Vous ne pouvez pas exécuter ce code si vous n'avez pas de /Home/PersonList-url qui renvoie certains Json de données. Je ne sais pas si/comment je peux changer l'échantillon à un morceau complet de code (tout en ayant toujours le magasin de chargement automatique de données.

Avez-vous essayé sur une autre version de IE? Peut-être l'essayer par la commutation du mode de navigation dans les outils de développement?
Active Scripting activé?
Au travail, j'ai essayé mon code dans IE9 et Firefox, avec le même résultat. L'exemple de code que j'ai fourni ici, je l'ai seulement essayé avec IE11 et Chrome 33.
Cette question peut paraître stupide, mais avez-vous des outils de Développement activés sur IE? Sinon le console.log appels causer une erreur sur IE.
Oui, je ne les ont permis.

InformationsquelleAutor comecme | 2014-03-11

extjs extjs3

3

Le problème ici, c'est la nature asynchrone des opérations que vous effectuez. Il y a deux opérations qui se déroulent dans le même temps ici
- Magasin opération de chargement
- Grille rendu
Votre code tente de sélectionner la ligne 8 de la grille après le magasin de charge de l'événement. Mais il n'y a pas de garantie que le grille a été rendu avant que le magasin de l'opération de chargement ont fini depuis le magasin a la autoLoad de configuration de la valeur est définie sur true.
La raison ce code fonctionne sur Chrome et pas sur IE est parce que Chrome moteur JavaScript est 10 fois plus rapide que IE 9 (IE 10 et 11 moteurs sont aussi notoirement plus rapide que IE 9) de sorte que votre INTERFACE utilisateur est rendu avant votre opération de chargement est parachevé. Mais ce n'est qu'une question de chance d'avoir la séquence d'événements qui sont déclenchés dans le bon ordre, pour éviter ce problème vous devriez vérifier le courant de chargement magasin d'état après l'INTERFACE utilisateur a été rendu, et si c'est toujours le charger, vous devriez deffer l'opération de sélection jusqu'à ce que le magasin a été chargé, quelque chose comme:
```
//create the Grid
var grid = new Ext.grid.GridPanel({
    store: store,
    id: 'grid',
    columns: [{
        header: 'Company',
        dataIndex: 'Company'
    }, {
        header: 'First name',
        dataIndex: 'First'
    }, {
        header: 'Last name',
        dataIndex: 'Last'
    }, {
        header: 'Email',
        dataIndex: 'Email'
    }],
    height: 150,
    listeners: {
        'render': function(component) {
            //Get sure that the store is not loading and that it 
            //has at least a record on it
            if (grid.store.isLoading() || grid.store.getCount() == 0) {
                //If it is still pending attach a listener to load
                //event for a single time to handle the selection
                //after the store has been loaded
                grid.store.on('load', function() {
                    grid.getView().getSelectionModel().select(0);
                    grid.getView().focusRow(0);
                }, this, {
                    single: true
                });
            } else {
                grid.getView().getSelectionModel().select(0);
                grid.getView().focusRow(0);
            }

        }
    }
});
```
Vous pouvez voir une exemple de travail basé sur votre code ici. Espérons que cette aide.
- Dans ma situation, c'est la charge de l'événement dans lequel le code détermine l'enregistrement doit être sélectionné et concentré. J'ai besoin de l'chargé données afin de déterminer la bonne ligne. Par exemple, dans le violon, disons que nous avons besoin de sélectionner la ligne contenant Apple. Aussi, ne serait pas le vérifier getCount() == 0 dire que si le magasin déjà fini de se charger, mais ne contient rien, vous vous attachez une load gestionnaire qui ne sera jamais le feu?
- Oups... il semble que j'ai été en mesure de modifier votre violon. Ne savais pas que je pouvais le faire. Désolé... j'ai déjà la situation de travail où je veux sélectionner la ligne contenant "Pomme". Ne pouvez pas l'obtenir pour fonctionner avec ExtJS 3.4.0 Classique mais (peut-être un problème avec le violon lui-même).
- Pas de problème! J'ai été la mise en place du code avec une solution et a trouvé le violon changé 🙂 vous ne savez Pas si cela fonctionnera de la même manière sur 3.4 si, toutefois, le principal problème ici est lié à la synchronisation des évènements et de ne pas la plate-forme elle-même.
- Je suppose que mon code d'origine a été trop simplifié. Nous devons également être en mesure de sélectionner et choisir une ligne spécifique après un magasin de rechargement. J'ai créé un fork de la tripoter ici. Ici, j'ai essayé d'utiliser la vue du refresh de l'événement, mais l'ordre dans lequel les événements de feux semble éteint. L'actualisation dit que le magasin est déjà chargé, mais le magasin de chargement de l'événement se produit plus tard.
- Ici une version mise à jour de votre code, vous avez besoin pour gérer l'événement load de la boutique, pas l'événement d'actualisation de la grille, de cette façon, vous obtiendrez assurez-vous que le magasin a été chargé.
- Ext JS 3.4, la grille.getView retourne un Poste.de la grille.GridView, qui n'ont pas de getSelectionModel. La grille elle-même ne l'avoir si. Aussi, le magasin n'a pas le isLoading méthode. Le RowSelectionModel n'a pas le select méthode, mais elle n'a selectRow. Avec ces changements sur votre code, j'ai toujours mon problème d'origine dans IE11. Malheureusement, je suis incapable de créer un violon, parce que le sencha de violon se bloque si vous sélectionnez la version 3.4.1 et ajouter de la fantaisie de données (publié dans leur forum).
- Essayez celui-ci, j'ai essayé sur IE 11 et fonctionne très bien, même s'il n'a pas fait défiler tout le chemin vers le bas à la ligne, il est sélectionné comme prévu (pas sûr si le défilement question est juste une question de ExtJs 3.4). Espérons que celui-ci pourrait l'aider. Il utilise un jsonp de la source de données si vous rencontrez des problèmes sur le chargement des données est d'essayer de modifier les paramètres de sécurité internet explorer.
- Je ne pouvais pas le faire fonctionner sur IE9 ici à l'œuvre. Dans Chrome (33.0.1750.149 m), il fonctionne, mais dans FireFox 27.0.1) qu'il n'a pas de défilement de la ligne dans la vue. Si vous placez un alert immédiatement après l'appel de focusRow, vous voyez la ligne ciblée. Mais lorsque vous cliquez sur le message, la grille défile en haut de page. Alors maintenant, vous avez recréé mon problème d'origine. Mais comment pouvons-nous résoudre ce problème? J'ai trouvé que defering l'appel de 200 ms fonctionne, mais comment le solide est qui?
- Je pense que le problème avec IE 9 est lié à IE blocage jsonp les appels, en raison d'une croix domaine de contrôle de sécurité. Je vais essayer de vérifier les FF problème dès que j'ai un peu de temps libre.
InformationsquelleAutor overlordhammer

Vous devez vous connecter pour publier un commentaire.