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:
- create an empty container (
<div></div>) in the page where you want the component to show - 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:
<div id="cmp-ct" style="height:420px;max-width:770px;margin:20px 0"></div>
Hints:
- 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:
Ext.define('MyApp.Application', {
name: 'MyApp'
,extend:'Ext.app.Application'
,views:[]
,controllers:[]
,stores:[]
,requires:[]
,launch:function() {
var me = this
,ct = Ext.fly('cmp-ct') || Ext.getBody()
;
Ext.widget('inlinecmp',{
renderTo:ct
});
} // eo function launch
});
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.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015