View Full Version : using a combobox to update grid data

5 May 2009, 9:15 PM
I want the user to be able to pick a table (data: all the tables in the database) and the grid will asynchronously update with the associating table's data. It's an attempt for a Content Management System. I can't figure out how to tie it all together. It's going to be using a mysql database to grab the table names to fill the combobox. The column layout will dependent on which table the user selects...so it will have to be dynamic.

Thanks in advance, Jeremy

5 May 2009, 9:48 PM
You want to display a combobox where the user can choose a database table. From there, you want to display records. Is that correct?

If so, then the grid displayed (including data reader and column model) will be different based on the selected table. Therefore, you are not looking at a simple reload() or the likes. You will want to swap out the grids on the fly.

Of course for performance, you will want to avoid rendering the grids over and over. My suggestion would be to setup an Ext.Panel with an Ext.layout.CardLayout (http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.CardLayout) layout manager. Then add child panels equal to the number of tables in the combobox. You can initialize all the grids minus data.

When the user selects an option from the combobox, you can display the appropriate panel and load the remote data.

6 May 2009, 3:10 AM
Just a hint: Take a look on AutoGrid UX (http://extjs.com/forum/showthread.php?t=10951&highlight=autogrid). It renders the columns of the grid dynamically. As you change de option on the combo, you make an Ajax request and reload grid columns definition and grid data.

About tieing the parts:
1 - listen to combo select event
2 - in the listener you pick the option selected and reload grid

Something like

new Ext.form.ComboBox({
select: function(combo, record, index)
var table = record.get('table');

table: table
,meta: true //<--autoGrid stuff

6 May 2009, 5:42 AM
That's exactly what I was looking for and fits exactly into what I was doing. I didn't know you could pass in variables to the reload event. Very cool. I will check into the autogrid stuff. Perfect and thanks again!