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

14 comments on “Ext JS 4: Dynamic Grid Example
  1. Sheetal says:

    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.

  2. pldu says:

    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! 

  3. Hemlata says:

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

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

    Saludos 

  5. eepeenx says:

    thanx man. nice work.
    it helps me a lot 

  6. guru says:

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

  7. vittoriano aurelio says:

    super

  8. Jose says:

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

    Nice job, thank you.

  9. vittoriano aurelio says:

    ” I don’t need no stinking tagline.”

    I agree: you are “bravo”.

  10. Umesh Kamat says:

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

  11. sindhu says:

    Thanks you Sir,

    This is what i am searching for

  12. ratheesh says:

    Thanks alo, the same stuff am looking for

Follow Me

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 5 other subscribers

Calendar
May 2013
S M T W T F S
« Nov    
 1234
567891011
12131415161718
19202122232425
262728293031  
Archives
Categories
%d bloggers like this: