ExtJS Components

 

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.

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

I am more JavaScript oriented so maybe I like building layouts with JS objects more than manually.

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.

ExtJS Container

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.

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

Ext.ComponentManager.get(‘#componentID’);

or shorter

Ext.getCmp(‘#componentID’);

ExtJS has something from every better javascript framework. So we have CSS like element selection via Ext.ComponentQuery similar to jQuery. Take a look at the documentation. There are many ways to find a component. With ComponentQuery we can even find by xtype, or use complex CSS like selector. query() method searcher component registered with ComponentManager and return an array of components or an empty array.

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 Layouts

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:

• left
• top
• center
• right
• bottom

We have also pack option that controls how elements are packed together. Options are start, end, center. You should also try pack options.

Conclusion

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.