How to dynamically add a custom grid row in Ext.js?

Question

I have a grid that looks something like this:

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
200| Bar, LLC.| $23.50
----------------------

When I double click on any given row I want to add a row below that particular row which contains a nested grid. So then the grid would look like this:

----------------------
Id | Customer | Total
----------------------
100| Foo, Inc.| $19.95
----------------------
  ------------------
  ORDER DETAIL
  ------------------
  Item | Term | SKU
  ------------------
  1    | 30   | abc    
  ------------------
----------------------
200| Bar, LLC.| $23.50
----------------------

I already have a grid container for the child ("ORDER DETAIL") that I'm going to use elsewhere. How do I go about adding that grid dynamically to a row below the double-clicked one?

dbrin dbrin · Accepted Answer · 2013-03-12T20:46:15

As Robert has mentioned already you can use RowExpander plugin http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.RowExpander to include extra info in the grid row.

here is example of implementation: http://docs.sencha.com/ext-js/4-1/#!/example/grid/grid-plugins.html

How to dynamically add a custom grid row in Ext.js?

1 Answers