Embedding an Ext component in a page


There can be cases where we have an existing page and we just need to insert a grid, from or tree into it. It can be a blog post where we do not want the reader to navigate out of the text to see an example, or it can be a product page where you want to show a live demo inline with other information.


The approach is simple:

  1. create an empty container (<div></div>) in the page where you want the component to show
  2. in the application, render the component into that container

The container

The easiest is to give the container an id so that it is easily accessible from the application. It is also a good idea to give it initial dimensions, so that the browser does not need to reflow when the component is renders. For example:



  • give it an id
  • set dimensions, especially height to prevent browser reflows and flickering
  • you can set margins to get some space around the component (as here 20px top and bottom)
  • you can set a border if you like to, but it looks nicer if you don’t
  • avoid padding
  • for development, you can set some background color so that you see where will come the component, remove it afterwards.

The application

If we have an Sencha Cmd generated application autoCreateViewport is set to true. That would cause the application to take the whole browser window for its output but that is not what we want. Thus, we need to set it to false.

We also need to implement lauch method and create and render our component therein. The launch method would look like this:

Just in the case, here I set ct to the document body so the component renders even the app is used outside of the page or if I forget to setup the container.

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestEmail this to someone
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)

We will be happy to hear back from you

Please Login to post a comment