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

  • Trackback ( 0 )
  • Comments ( 12 )
    • Sheetal
    • December 16th, 2011 3:46am

    Amazing example!!
     
    Thanks a lot Christopher!

      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.

    • pldu
    • February 17th, 2012 1:55am

    how to remove column?
    thank you!

      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! 

    • Hemlata
    • March 5th, 2012 6:27am

    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.
     

    • Nelson Stuardo
    • April 11th, 2012 11:51am

    Excelente Codigo

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

    Saludos 

    • eepeenx
    • April 26th, 2012 10:33pm

    thanx man. nice work.
    it helps me a lot 

    • guru
    • July 17th, 2012 3:10am

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

    • vittoriano aurelio
    • September 13th, 2012 5:03am

    super

    • Jose
    • September 13th, 2012 11:42am

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

    Nice job, thank you.

    • vittoriano aurelio
    • September 23rd, 2012 4:18am

    " I don't need no stinking tagline."

    I agree: you are "bravo".

    • Umesh Kamat
    • October 12th, 2012 2:18am

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

  1. No trackbacks yet.