---
title: "Important features of ExtJs"  
description: "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 to"  
author: "Jonas Stuart"  
published: 2017-02-25  
updated: 2018-03-17  
canonical: https://www.mindstick.com/blog/11305/important-features-of-extjs  
category: "sencha extjs"  
tags: ["sencha"]  
reading_time: 2 minutes  

---

# Important features of ExtJs

**Toolbar:-** Toolbar is very important [feature](https://www.mindstick.com/forum/541/what-is-new-feature-in-sql-server-2012) that’s enable user to operate [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) [operation](https://www.mindstick.com/forum/33917/how-to-callback-operation-using-delegate-in-c-sharp) at a single line. Many UI associated with them.

Code of toolbar with split button is as follows:-

**[Class name](https://www.mindstick.com/forum/12871/how-to-get-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](https://yourviews.mindstick.com/view/85049/escape-to-paradise-top-10-luxury-resorts-in-india-s-tropical-regions),that’s accuires many form or ui separately.And give a [user interface](https://www.mindstick.com/interview/22909/user-interface-objects-in-cocoa) 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](https://yourviews.mindstick.com/view/85506/what-was-the-causes-of-creation-of-pakistan) of [windows](https://www.mindstick.com/articles/311752/how-to-install-and-use-the-google-wifi-software-on-a-windows-or-mac-computer):-** Windows is important part of Extjs UI.Its provide

\

[functionality](https://www.mindstick.com/blog/136/using-watermark-functionality-in-textbox-by-jquery) 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          }          ]    });  
```

---

Original Source: https://www.mindstick.com/blog/11305/important-features-of-extjs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.