Ext JS 4: Dynamic Grid Example

In this example, you define your own grid columns by adding them one-by-one. When you’re done, you populate your custom grid with your own data. After the grid’s populated, you can sort and filter the data. If you need to make any changes to any of the data, double-click a record and an editor will slide out with a form built from your custom-defined grid columns and your record’s data filled in. If you’d rather not edit existing data, you can select some records, delete them, and add them from scratch.

Note: At this time, everything is treated as a plain text string.

This dynamic grid example makes use of several Ext JS 4 components, including: Viewport, Grid & Filters, Data Store, Form, MessageBox, Window, Spotlight

Open in New Window | View Source

In this example, you define your own grid columns by adding them one-by-one. When you’re done, you populate your custom grid with your own data. After the grid’s populated, you...

14 Responses to Ext JS 4: Dynamic Grid Example

  1. Sheetal 2011/12/16 at 03:46 #

    Amazing example!!
     
    Thanks a lot Christopher!

    • Christopher Parker 2011/12/16 at 10:31 #

      Thank you! I threw it together very quickly based on my existing knowledge of Ext JS 3.

      I’m planning on rewriting it now that I’ve become acquainted with the new MVC architecture available in Ext JS 4.

  2. pldu 2012/02/17 at 01:55 #

    how to remove column?
    thank you!

    • Christopher Parker 2012/02/18 at 18:13 #

      I did not make columns completely removable in this example.

      However, if you look at the code to see how columns are added once some records have already been added, you should be able to figure out how to remove a column, too.

      I might just add column removal to this example, anyway.

      Thank you for your interest! 

  3. Hemlata 2012/03/05 at 06:27 #

    Hi,
    Nice example. I have a similar requirement, I do not know the number of columns to begin with. They are fetched from the server via ajax…using json format. Can you give me some ideas on how I can create a grid with columns from a json data.
    Thanks for the help.
     

  4. Nelson Stuardo 2012/04/11 at 11:51 #

    Excelente Codigo

    Como puedo hacer que el filtro me muestre un combo con los datos de la columna?

    Saludos 

  5. eepeenx 2012/04/26 at 22:33 #

    thanx man. nice work.
    it helps me a lot 

  6. guru 2012/07/17 at 03:10 #

    Amazing example!!!
    works fine…
    keep it up…….

  7. vittoriano aurelio 2012/09/13 at 05:03 #

    super

  8. Jose 2012/09/13 at 11:42 #

    Would be nice to have the MVC version in Sencha Architect for this example.

    Nice job, thank you.

  9. vittoriano aurelio 2012/09/23 at 04:18 #

    ” I don’t need no stinking tagline.”

    I agree: you are “bravo”.

  10. Umesh Kamat 2012/10/12 at 02:18 #

    Thanks for such awesome example. I can use maximum logic of your code for our project requirement. Thanks a ton.

  11. sindhu 2013/04/03 at 03:49 #

    Thanks you Sir,

    This is what i am searching for

    Reply
  12. ratheesh 2013/04/08 at 05:51 #

    Thanks alo, the same stuff am looking for

    Reply