Toolbar:- Toolbar is very important feature that’s enable user to operate multiple operation at a single line. Many UI associated with them.

Code of toolbar with split button is as follows:-

Class name of toolbar :-  'Ext.toolbar.Toolbar',

Ext.create('Ext.toolbar.Toolbar', {
     
alias: 'widget.dropdown',
height: 35,            
items: [                
{
xtype: 'splitbutton',
text: 'Activity',
menu: [{
text: 'Menu ',
 menu: [{
text: 'Sub Menu'
 }
{
text: ' Sub Menu '
 }]
}]
});

Region Layout:- It consist 4 regions,that’s accuires many form or ui separately.And give a user interface that’s allow multiple form accessing in single window.

Code of Region Layout:- 

Ext.create('Ext.panel.Panel',
{
     requires: ['Ext.layout.container.Border'],
initComponent: function () {
        Ext.apply(this, {
 
            layout: 'border',
 
            items: [
            {
                title: 'North',
                region: 'north',
                hideCollapseTool: true,
            },
            {
                title: 'North',
                region: 'north',
                hideCollapseTool: true,
                
 
            },
            {
                title: 'south',
                region: 'south',
                height: 25,
            },
            {
                title: 'Control Panel',
                region: 'west',
                width: 200,
                collapsible: true,
            },
            {
                itemId: 'center',
                region: 'center',
                hideCollapseTool: true,
            }]
        });
        this.callParent(arguments);
    }
});

Creation of windows:- Windows is important part of Extjs UI.Its provide

functionality of minimize and maximize.

Code of window :-

Ext.define('app.view.UserWindow', {  //define UserWindow
    extend: 'Ext.window.Window',  //extend wimdow class
    requires: ['app.controller.TabController'],//requirement of class that use in this page
    title: 'User Details',
    autoScroll: true,
    alias: 'widget.userWindow',//define alias
    height: 400,
    width: 600,
    id: 'popWindow',
    itemID: 'popWindow',
    items: [
    {
        xtype: 'panel',  //use grid view
    }
    ]
});
 

Tree view:- Tree view provide facility of multiple menu accessing with

single

click.

Code of Tree view:-

Ext.create('Ext.Container',
    {
        alias:'widget.westTrees',
        xtype: 'basic-trees',
        layout: {
            type: 'fit',
            columns: 2,
            tdAttrs: { style: 'padding: 10px;' }
        },
        defaults: {
            xtype: 'treepanel',
            width: 300,
            height: 200,
            rootVisible: true,
            collapse: true,
            Sharing the store synchronizes the views:
            store: yourStore        },
        items: [{
              title: 'tree',
              useArrow: true
          }
          ]
    });