ExtJS Components – the building blocks
Beside great MVC implementation, object oriented approach and ton of other benefits that ExtJS provides for developer, one of the top 3 futures (if you ask me) is ability to not to code layout in HTML and CSS.
Part of frontend community will propably hate me for saying this.
In 95% of the cases phenomenal application can be build using ExtJS Components that are already made and well documented. In other 5% of cases we use ability to extend some of the base ExtJS classes and create our own widgets. Because we create custom ExtJS class that have it’s own namespace we can reuse it again and again.
ExtJS Components can have other components in itself. They are added with items config. Lets see a very simple example.
html: 'Some text in our subpanel',
We create tab panel component that renders itself to body. Tab panel can have tabs inside, tabs are just other panels. We have another panel inside that is added with items config.
Xtype property is very important, you will use it all the time to create complex layouts. It’s just a way to tell the framework what to render there. It’s like a short code, so xtype of Ext.panel.Panel is just panel. Xtype for Ext.grid.Panel of the way to create grid is xtype: ‘grid’. Simple as playing with lego toys.
So some of the framework layout advantages are:
- Making layout in ExtJS way is much faster than to code HTML/CSS.
- Sencha team made sure that all of components work cross browser.
- Components are reusable and we all know we lost a ton of HTML/CSS code through folders and projects.
- ExtJS 6 is now merged with sencha touch so we have great support for mobile
ExtJS Viewport and components hierarchy
Viewport is the main container for all other views. There can be only one viewport on the sceen. ExtJS viewport represents the viewable area of the screen, it renders itself to document body and sizes itself according to window resizing. We will talk about layouts below but ExtJS viewport uses border layout in most of the cases because we can easily have regions for side navigation, header, main panel etc. You can see in example below sample border layout where we have navigation on left side and content on right. Code is here.
Some good things to know about ExtJS Viewport are:
- It does not provide scrolling so you must insert components that have scrollable option.
- Other components can become viewport if we add plugin option to them with value viewport. So for example window can go full screen if it has viewport option etc.
- Yoo can use responsiveConfig and responsiveFormula configs on viewport to do stuff similar to media queries.
If we need to create multiple components in a container, (which is often the case). And our container don’t need to have other options beside it’s a container that groups other components than it’s best to use Ext.container.Container or xtype: container.
A common mistake is to use a panel or some other component for container where it’s not needed. Panel is much heavier than a container which will have a result of slowing down your interface.
On the other side container have some additional template methods like: onBeforeAdd, onAdd (this method is invoked after a component has been added), onRemove, beforeLayout, afterLayout (this method is invoked after child components are rendered).
If we need options like header, footer, option to collapse the component etc, than panel is for us. Because of it’s nature panel have template methods like: afterCollapse, afterExpand (invoked after panel is expanded), onDockedAdd, onDockedRemove etc.
Create custom ExtJS components
If we need to create components that ExtJS doesn’t have, we can extend some of framework components. Again if we don’t need some functions like header, footer or so, but we need child components, good candidate for extending is fellow described above – xtype: container.
If we don’t need child components and don’t need some of the ExtJS UI elements than xtype: component will be good.
extend: 'Ext.Component',// subclass Ext.Component
alias: 'widget.redborder',// this component will have an xtype of 'redborder',
border: '1px solid red;'
This is really simple example that shows how to create some custom component xtype: redborder. Whenever we call xtype: redborder in our code we will get component that has red border.
Finding and destroying ExtJS Components
We showed how to add components, how to create custom ones. We often need to do stuff dynamically, like finding components to update them, hide/show, destroy etc.
We can add itemId property to components. It’s similar to id in html but we use it in ExtJS for better targeting. Every components is registered with the Ext.ComponentManager so we can find component by id for example by using
We can use .destroy() on a component selection to remove it completely. Or we can use .remove( component) method on a container where we provide a component id as an argument or a reference to a component (such as component selection with .query() and similar).
ExtJS Layout system takes care of positioning and resizing of all components in our application. In most cases application consists of several nested layouts so sencha guys developed pretty intelligent system which enables us to order ton of components in horizontal, vertical or column order. In separate child components we can add a new set of items which have they own layout etc. You can check possible layouts here.
We add layout config to parent container in which we want to reorder elements. Take a look example below. We have a container with 2 child panels. Try to play, change layout option from hbox (horizontal box) to vbox (vertical box) and see what happens.
You should know that you can’t change hbox to vbox and vice versa on runtime. It’s only done on load time.
There are several options that can be passed with layout config. For example
Play with align property and test how elements will order. Possible align values for vbox are:
We have also pack option that controls how elements are packed together. Options are start, end, center. You should also try pack options.
It think I managed to cover basic about layouting in ExtJS. We saw how to add components to application and group them inside ExtJS Container. All that goes inside ExtJS Viewport which is the main container for whole application.
ExtJS Components can be selected by ID, xtype or in CSS style with Ext.ComponentQuery. We can also destroy selected components. When it comes to positioning components we use different types of layouts on our containers.