Results 1 to 4 of 4

Thread: using a combobox to update grid data

  1. #1

    Default using a combobox to update grid data

    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

  2. #2
    Ext JS Premium Member griffiti93's Avatar
    Join Date
    Mar 2007
    Location
    Owasso, OK
    Posts
    130

    Default

    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 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.

  3. #3
    Sencha User bt_bruno's Avatar
    Join Date
    Mar 2008
    Location
    Redwood City, CA
    Posts
    153

    Default

    Just a hint: Take a look on AutoGrid UX. 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
    Code:
    new Ext.form.ComboBox({
       ...
       ,listeners:{
               select: function(combo, record, index)
               {
                     var table = record.get('table');
    
                     grid.getStore().reload({
                             params:{ 
                                    table: table
                                   ,meta: true //<--autoGrid stuff
                             }
                     });
               }
       }
    });

  4. #4

    Default Thanks bt_bruno

    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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •