ExtJS Hack: Dynamic ComboBox & Remote On-Demand Loading With Local Filtering ExtJS Hack: dinámica y ComboBox remoto on-demand con la carga local de filtrado
In ExtJS you can create ComboBox which loads data from the server. En ExtJS puede crear ComboBox que las cargas de datos del servidor. You can also code so that new data is loaded from the server in response to an event like changing selection of another ComboBox. También puede código a fin de que nuevos datos se cargan desde el servidor en respuesta a un evento como cambiar la selección de otro ComboBox. However it also means that the filtering is done remotely which is slow. Sin embargo también significa que el filtrado se realiza a distancia que es lento.
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 filtrado automático es un excelente capacidad cuando el ComboBox temas son filtrados automáticamente para mostrar sólo los valores que coincide con el texto que has escrito hasta ahora. It can also auto-fill the rest for you. También puede auto-llenar el resto para usted. This powerful capability comes at a price for remote mode. Esta poderosa capacidad tiene un precio de modo a distancia. Every time the data is filtered by sending a query to the server which can be slower than local query. Cada vez que los datos son filtrados por enviar una consulta al servidor que puede ser más lenta que la consulta local.
In many use cases the full data is already on the client side, fetched during the initial loading of the ComboBox. En muchos casos el uso de todos los datos ya está en el lado del cliente, descargue durante la carga inicial de la ComboBox. Subsequent filtering can be easily done on the client side. Tras la filtración puede ser fácilmente realizada en el lado del cliente. Let’s see how we can solve it. Vamos a ver cómo podemos solucionarlo.
Update: I have also filed a Actualización: También he presentado una defect defecto in ExtJS forum to hopefully incorporate the functionality in the core with suggested solutions. ExtJS en el foro de esperar a incorporar la funcionalidad en el núcleo con propuestas de solución. The defect details has been provided at the end of this post. El defecto detalles se ha proporcionado al final de este post.
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. El enfoque intuitivo a este problema es cargar el ComboBox en un manejador de evento después de la baseParams de la tienda con los parámetros adecuados. This works in remote mode but not in local mode. Esto funciona en modo remoto, pero no en modo local. Now you want to set the ComboBox to local mode because you want to implement local filtering, right? Ahora que va a establecer el ComboBox a modo local debido a que desea aplicar el filtrado local, ¿verdad?
The solution is far from obvious. La solución está lejos de ser evidente. 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 modo local ComboBox borra los filtros de la tienda que a su vez sustituye a los datos de la tienda con las almacenadas, y, obviamente, rancia, instantánea. To solve this you must call combo.store.updateSnapshot() after the combo.store.load() call. Para resolver este debe llamar combo.store.updateSnapshot () a partir de la combo.store.load ().
Now where can you get this function? Ahora donde se puede obtener esta función? Oh yes… Oh sí…
Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data; } Ext.data.Store.prototype.updateSnapshot = function () (this.data = this.snapshot;) 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. La demanda por carga se logra mantener los datos en modo local y luego cargando la tienda una vez (usar un booleano, para comprobar) en beforequery manejador de evento. You have to use updateSnapshot() function after the load as explained above. Usted tiene que usar updateSnapshot () después de la carga, tal y como se ha explicado anteriormente.
Use cases Casos de uso
Let’s first look at the use cases which I am sure many will agree with. Vamos a mirar primero a los casos de uso que, estoy seguro de que muchos estarán de acuerdo.1. I want to load a ComboBox on demand. Quiero cargar un ComboBox a la demanda. I have very large number of columns in a grid, each of which has a ComboBox to help selecting a value. Tengo gran número de columnas en una rejilla, cada una de las cuales tiene un ComboBox para ayudar a seleccionar un valor. I don’t want to load all the data upfront as that slows down the initial loading. No quiero cargar todos los datos iniciales como que se ralentiza la carga inicial. So I want to load the data when the ComBox drop-down is clicked. Así que desea cargar los datos cuando la ComBox desplegable se hace clic. I can easily do that in remote mode but the downside is that the filtering functionality asks the server for filtering. Me puede hacer fácilmente que en modo remoto, pero el inconveniente es que la funcionalidad de filtrado solicita al servidor de filtrado. The data I fetched is fixed and it is already on the client, so there is no justification for bothering the server. Los datos que descargue es fijo y ya está en el cliente, por lo que no hay justificación para el servidor molestando.
2. An alternative scenario is when you have a dynamically loaded ComBox. Un escenario alternativo es cuando usted tiene una carga dinámica ComBox. You would still like to do local filtering, when the data has been fully loaded, for better performance. Usted todavía desea hacer el filtrado local, cuando los datos han sido completamente cargada, para un mejor rendimiento. This might be the one you can better associate with. Esto podría ser el que se puede asociar con una mejor.
Defect Defecto
My solution was to keep the ComboBox in local mode but load the store on first access. Mi solución era mantener el ComboBox en modo local, pero la carga de la tienda en primer acceso. This works perfectly in remote mode for the dynamically loading case. Esto funciona perfectamente en modo a distancia para el caso de carga dinámica. However it doesn’t work when the mode is local. Sin embargo, no funciona cuando el modo es local. In local mode the doQuery() calls clearFilter() which replaces the new data in the store with old stale snapshot data. En el modo local doQuery () llama clearFilter () que sustituye a los nuevos datos en la tienda con la vieja rancia instantánea de datos.What is needed is to replace the snapshot data in this case with the current data in the store after a successful reload. Lo que se necesita es reemplazar la instantánea de datos en este caso con los datos actuales en la tienda después de una recarga exitosa.
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. El verdadero defecto es que en este caso clearFilter () no debe sustituir a la tienda con la vieja instantánea cuando el centro ha sido renovado por una llamada a la carga.
Solution Solución
My solution was to create a method for this in ComboBox: Mi solución fue crear un método para ello en ComboBox:
Code: Código:Ext.data.Store.prototype.updateSnapshot = function() { this.snapshot = this.data }Ext.data.Store.prototype.updateSnapshot = function () (this.data = this.snapshot)And then call this method after loading the ComboBox. Y luego llamar a este método después de cargar el ComboBox.
The solution works but I am not fully happy as it isn’t elegant. La solución funciona pero no estoy plenamente satisfecho, ya que no es elegante. Looking forward to hear a better idea in solving this problem. El mirar adelante para oír una mejor idea en la solución de este problema.
Additional Thoughts Pensamientos adicionales
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. Creo que debe haber un camino para clearFilter () para reconocer los nuevos datos cuando se haya cargado versus datos filtrados cuando se haya cargado para los datos antiguos. Both cases uses load(). En ambos casos se utiliza la carga ().
The solution could be a new configuration parameter to load() which clearFilter() looks for and processes, if available. La solución podría ser un nuevo parámetro de configuración para cargar () que clearFilter () busca y procesos, si está disponible.
Filed under Filed under Ajax , Browser Navegador , Headline News Headline News , How To Cómo , Javascript , Programming Programación , Tech Note Nota técnica , Web , Web 2.0 Web 2,0 | |
| |
RSS 2.0 RSS 2,0 | |
Trackback this Article | este artículo |
Email this Article Enviar artículo
You may also like to read También puede leer |




October 25th, 2007 at 10:56 am 25 de octubre de 2007, a las 10:56 am
Hello,when I call Ext.data.Store.prototype.updateSnapshot after loading the ComboBox ,the hack had solve. Hola, cuando hago un llamamiento Ext.data.Store.prototype.updateSnapshot después de cargar el ComboBox, el hack ha resolver.
But I click the comboBoxA again, the comboBoxB not list the data for ever. Sin embargo, hago clic en el comboBoxA una vez más, la lista no comboBoxB los datos para siempre.
How u solve this problem? U ¿Cómo resolver este problema?
March 7th, 2008 at 3:36 pm 7 de marzo de 2008 a 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. Me gustaría ver una fuente completo de cómo se están realizando esto, por desgracia, sólo un fragmento para mí no es suficiente para ponerte en marcha. A complete sample would definitely help here. Una completa muestra sin lugar a dudas ayuda aquí.