ExtJS Hack: Dynamic ComboBox & Remote On-Demand Loading With Local Filtering ExtJS Hack: ComboBox dynamique et à distance à la demande locale de chargement avec filtrage
In ExtJS you can create ComboBox which loads data from the server. En ExtJS vous pouvez créer ComboBox qui données sur les charges du serveur. You can also code so that new data is loaded from the server in response to an event like changing selection of another ComboBox. Vous pouvez également code de manière à ce que de nouvelles données sont chargées depuis le serveur en réponse à un événement peu comme changer de sélection d'un autre ComboBox. However it also means that the filtering is done remotely which is slow. Mais cela signifie aussi que le filtrage se fait à distance qui est lent.
In ExtJS ComboBox automatic filtering is a nifty capability where the ComboBox items are automatically filtered to show only the values which matches the text you typed so far. En ExtJS ComboBox de filtrage automatique est un chouette où la capacité ComboBox articles sont automatiquement filtrées pour n'afficher que les valeurs qui correspond au texte que vous avez tapé à ce jour. It can also auto-fill the rest for you. Il peut aussi remplir automatiquement le reste pour vous. This powerful capability comes at a price for remote mode. Cette puissante capacité vient à un prix de mode à distance. Every time the data is filtered by sending a query to the server which can be slower than local query. Chaque fois que les données sont filtrées par l'envoi d'une requête au serveur qui peut être plus lente que les requêtes locale.
In many use cases the full data is already on the client side, fetched during the initial loading of the ComboBox. Dans de nombreux cas, l'utilisation de données complet est déjà sur le client, récupérés au cours de la charge initiale de la ComboBox. Subsequent filtering can be easily done on the client side. Après filtrage peut être facilement fait du côté client. Let’s see how we can solve it. Voyons comment nous pouvons résoudre.
Update: I have also filed a Mise à jour: J'ai également déposé un defect défaut in ExtJS forum to hopefully incorporate the functionality in the core with suggested solutions. ExtJS forum dans l'espoir intégrer la fonctionnalité dans le noyau avec des propositions de solution. The defect details has been provided at the end of this post. Le défaut d'informations ont été fournies à la fin de ce poste.
The intuitive approach to this problem is to load the ComboBox on an event handler after setting the baseParams of the store with appropriate parameters. L'approche intuitive à ce problème consiste à charger le ComboBox sur un gestionnaire d'événements après la mise en baseParams du magasin avec des paramètres appropriés. This works in remote mode but not in local mode. Cela fonctionne en mode à distance, mais pas en mode local. Now you want to set the ComboBox to local mode because you want to implement local filtering, right? Maintenant, vous voulez mettre à la ComboBox mode local parce que vous voulez mettre en œuvre locale de filtrage, non?
The solution is far from obvious. La solution est loin d'être évidente. In local mode ComboBox clears the filters of the store which in turn replaces the data in the store with the stored, and obviously stale, snapshot. En mode local ComboBox autorise les filtres du magasin qui, à son tour, remplace les données dans l'entrepôt avec l'stockés, et bien évidemment vicié, instantané. To solve this you must call combo.store.updateSnapshot() after the combo.store.load() call. Pour résoudre cela, vous devez appeler combo.store.updateSnapshot () après la combo.store.load ().
Now where can you get this function? Où pouvez-vous obtenir cette fonction? Oh yes… Oh oui…
Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data; } Ext.data.Store.prototype.updateSnapshot = function () (this.snapshot = this.data;) The on demand loading is accomplished by keeping the data in local mode and then loading the store once (use a boolean to check) on beforequery event handler. Le chargement sur la demande se fait par la conservation des données en mode local et ensuite le magasin de chargement une fois (utiliser une valeur booléenne pour vérifier) sur beforequery gestionnaire d'événements. You have to use updateSnapshot() function after the load as explained above. Vous devez utiliser updateSnapshot () après la charge, comme expliqué ci-dessus.
Use cases Cas d'utilisation
Let’s first look at the use cases which I am sure many will agree with. D'abord regarder les cas d'utilisation dont je suis certain que bon nombre seront d'accord avec.1. I want to load a ComboBox on demand. Je tiens à charge un ComboBox sur demande. I have very large number of columns in a grid, each of which has a ComboBox to help selecting a value. J'ai très grand nombre de colonnes dans une grille, dont chacune a une ComboBox aider à sélectionner une valeur. I don’t want to load all the data upfront as that slows down the initial loading. Je ne veux pas charger toutes les données d'avance que cela ralentit le chargement initial. So I want to load the data when the ComBox drop-down is clicked. Je veux donc charger les données lorsque la Combox déroulante est cliqué. I can easily do that in remote mode but the downside is that the filtering functionality asks the server for filtering. Je peux facilement le faire à distance en mode, mais l'inconvénient est que la fonctionnalité de filtrage demande au serveur de filtrage. The data I fetched is fixed and it is already on the client, so there is no justification for bothering the server. Les données, j'ai récupéré est fixe et il est déjà sur le client, il n'ya donc pas de justification pour la peine le serveur.
2. An alternative scenario is when you have a dynamically loaded ComBox. Un autre scénario, c'est quand vous avez une Combox chargée dynamiquement. You would still like to do local filtering, when the data has been fully loaded, for better performance. Vous souhaitez tout de même à faire de filtrage local, lorsque les données ont été pleinement chargé, pour une meilleure performance. This might be the one you can better associate with. Cela pourrait être l'un vous permet de mieux associer.
Defect Défaut
My solution was to keep the ComboBox in local mode but load the store on first access. Ma solution a été de tenir le ComboBox en mode local, mais charge le magasin en première visite. This works perfectly in remote mode for the dynamically loading case. Cela fonctionne parfaitement en mode à distance pour les cas de charge dynamique. However it doesn’t work when the mode is local. Toutefois, il ne fonctionne pas lorsque le mode local. In local mode the doQuery() calls clearFilter() which replaces the new data in the store with old stale snapshot data. En mode local l'doQuery () clearFilter () qui remplace les nouvelles données dans l'entrepôt avec de vieux instantané des données obsolètes.What is needed is to replace the snapshot data in this case with the current data in the store after a successful reload. Ce qu'il faut, c'est de remplacer l'instantané des données dans ce cas avec les données actuelles dans le magasin après un succès recharger.
The real defect is that in this case clearFilter() shouldn’t replace the store with old snapshot when the store has been refreshed by a call to load. Le véritable défaut est que, dans ce cas clearFilter () ne doit pas remplacer le magasin avec de vieux instantané lorsque le magasin a été rafraîchi par un appel à charge.
Solution Solution
My solution was to create a method for this in ComboBox: Ma solution était de créer une méthode pour ce ComboBox dans:
Code:Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data }Ext.data.Store.prototype.updateSnapshot = function () (this.snapshot = this.data)And then call this method after loading the ComboBox. Et puis appeler cette méthode après le chargement de la ComboBox.
The solution works but I am not fully happy as it isn’t elegant. La solution fonctionne mais je ne suis pas pleinement satisfait, car il n'est pas élégant. Looking forward to hear a better idea in solving this problem. Attendant avec intérêt d'entendre une meilleure idée pour résoudre ce problème.
Additional Thoughts Réflexions supplémentaires
I think there should be a way for clearFilter() to recognize when new data has been loaded versus when filtered data has been loaded for the old data. Je pense qu'il devrait être un moyen pour clearFilter () pour reconnaître lorsque de nouvelles données a été chargé par filtré lorsque les données ont été chargées pour les anciennes données. Both cases uses load(). Les deux cas les utilisations de charge ().
The solution could be a new configuration parameter to load() which clearFilter() looks for and processes, if available. La solution pourrait être un nouveau paramètre de configuration à charger (), qui clearFilter () recherche des processus et, le cas échéant.
Filed under Classé sous Ajax , Browser Navigateur , Headline News Headline News , How To Comment , Javascript , Programming Programmation , Tech Note Note technique , Web , Web 2.0 2,0 Web | |
| |
RSS 2.0 RSS 2,0 | |
Trackback this Article | cet article |
Email this Article Envoyer cet article
You may also like to read Vous mai également à lire |





October 25th, 2007 at 10:56 am 25 octobre 2007 à 10:56 am
Hello,when I call Ext.data.Store.prototype.updateSnapshot after loading the ComboBox ,the hack had solve. Bonjour, lorsque je demande Ext.data.Store.prototype.updateSnapshot après le chargement de la ComboBox, le hack a résoudre.
But I click the comboBoxA again, the comboBoxB not list the data for ever. Mais je clique sur le comboBoxA encore, la liste comboBoxB pas les données pour toujours.
How u solve this problem? Et Comment résoudre ce problème?
March 7th, 2008 at 3:36 pm 7 mars 2008 à 3:36 pm
I would like to see a full source of how you are accomplishing this, unfortunately just the one snippet for me is not enough to get going. Je voudrais voir une source complet de la façon dont vous êtes l'accomplissement de cela, malheureusement, un seul extrait pour moi, n'est pas suffisante pour démarrer. A complete sample would definitely help here. Un échantillon complet seraient sans aucun doute utiles ici.