About Examples

This reincarnation of examples uses format different from the previous version. Each example has a page where you can find the complete information on it: description, main features, runtime, source code, and other.

Examples are grouped usually per main component they are about, such as grid, tree, panel, or by a more general area, as architecture, state, data, etc.

The navigation tree on the left is stateful what means that the folders start expanded or collapsed exactly as you left them off at your last visit.

For your convenience, there are also add-ons (extensions, plugins, overrides) in the tree, in additions to the examples themselves, and links to the original site, as well.


  1. Alessandro Mantelli says

    I’d like to see an example of a login page and relative authentication with Extjs 5 using MVC or MVVM

  2. Roy Maligro says


    I created a grid with a rowexpander plugins, basically you can create a Xtemplate in rowBodyTpl during loading. My problem is on how you can change the contents of the rowexpander tpl when using the expandbody function in listeners. Is there any properties to overwrite like “…tpl.overwrite / innerHTML”. Any idea how to achieve this case?.


  3. says

    The basic idea of rowexpander is that it is a place to display record data that normally do not fit in the cells. Therefore, the HTML markup is generated when needed from the underlying record data and the configured tpl. Hence, the problem boils down to providing the data what you want to see in the record. You can go so far that you set rowBodyTpl to “{markup}” and then you set value of “markup” field of the grid record to the HTML you want to have in row body.

    I don’t say that it is a recommended practice, I only mention it as one of the possibilities. Usually you can derive the row body html from the record fields.


    Hi!!, I’d like to see an example of a card layout where each card has components, and a top menu control the appearance of each card with Extjs 5 using MVVM, thank you!!!

  5. Srinivasa Rao S says


    I am using rowexpander plugin for Extjs Grid. Row expander is designed to display a ExtJS form to update the grid record. Form has few text boxes and couple of comboboxes. Some reason after time unable to update form fields(any combobox value). I debugged and found combobox store has records, but unable to select any values. Any help is really appreciated.

    —Srinivasa Rao S

    • says

      RowExpander has not been designed to hold components such as form with its fields and buttons. The problem is that whenever the grid view refreshes it destroys the complete HTML markup of the view, including elements created in the expanders by the forms. Of course, you can re-create forms and fields but that would inevitably lead to memory leaks and other unpredictable behavior.

      Much better is to use a popup window with the form. That is independent of the grid view refreshes. Use expander only for HTML, not for components.

  6. Srinivasa Rao S says


    Thanks for your reply. Now i understand why the form freezes automatically without any user interaction. We are using a cached EXT form ( gets created while initialize the grid) to render the form when user expands the grid row. We inject the form dynamically to the grid expander body as show in the below.

    We may not be able to change the design for now as it involves some approval process. Any suggestions
    how can we avoid freeze of combobox upon view refresh.

    Surprisingly textfields are not frozen but combobox, radio fields and buttons are frozen.

    Thanks in advance.

    • says


      it is too little information for me to advise you anything helpful. The code above shows how you render the form and there’s no problem with it, except the problem of grid refreshes destroying the form markup, as already mentioned.

      If you need more help file please a service request and I’ll get in touch with you.


      • Srinivasa Rao S says

        Thanks for your reply saki. Will try if i can avail you service via service request, but i doubt that as i may not get approval. if possible can you answer my last question, i started capturing the grid view beforerefresh and refresh events via console.log, but when the form freezes(after sometime with out any user event) i dont see any logs in the console what i captured in both the events. Any idea what might be the issue ?

  7. Dominik Graf says

    Hi Saki,

    first thanks for your work and helpfull examples.

    Can you make an Example / tutorial about KeyMapping in an MVVM projekt?

    Or how can i get an ViewController from my application.js file?


    • says

      Do you mean this key mapping? It is quite independent of architecture (MVC or MVVM) because it is usually used on component level to add key navigation and/or shortcuts support.

      However, in the key handlers, you can set values on a viewmodel so that you “connect” it to data binding logic.

      • Dominik Graf says

        Thank for your reply. Yes, i mean Ext.util.KeyMap. Can you give me a short example please. I can´t get it to run. I dont´t know how to implement. Where i must put witch code?

        Thanks for your help

  8. mallappa bijjur says

    Hi Saki , i want to display grid like full name which will be entered from two fields like first name ,last name .after updating in first name and last name full name should be update . can you please give example for this ..?.
    I tried using Convert:function (v,r)
    {return r.data[‘first name ‘] + ‘, ‘ + r.data[‘last name’]; }

    its only display once loading data but not updating

We will be happy to hear back from you

Please Login to post a comment