[ExtJS Study notes] section eighth ExtJS Ext.toolbar.Toolbar toolbar components and their applications

This address: http://blog.csdn.net/sushengmiyan/article/details/38515499

This article Sushengmiyan

-------------------------------------------------------------Resource Link-------------------------------------------------------- ---------------

EXT JS Api:http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/ext.toolbar.toolbar

API Doc Address:

Online English 5.0 address: HTTP://DOCS.SENCHA.COM/EXTJS/5.0.0/APIDOCS/#!/API/EXT

English 4.1 translation online address: http://extjs-doc-cn.github.io/ext4api/

Chinese 4.1 download to Local: Https://github.com/extjs-doc-cn/ext4api/archive/gh-pages.zip

--------------------------------------------------------------------------------------------------------------- ---------------------------------

Having understood the principles of the components, we can apply them specifically to our project, and now we will add a toolbar to our application.

preparatory work

1. Sencha cmd is installed and it can be used correctly.

2. Understanding the operation and principle of the component Add icon this learning

3. Learn about the components of Ext JS and their template methods point this study

objective of this section

After using the Sencha cmd Generate app command to generate a simple application, we added support for the icon, and now we're going to enrich the page, and the general application will have a toolbar, and now we'll add a toolbar to the newly generated page.

Step One: Define the implementation class for the toolbar

Ext.define (  ' OaSystem.view.main.region.Top ',//classname class name, need to correspond to the file directory, Oasystem is the name of the application, which is said in view/main/ The region directory, the newly created a top.js file   {     extend: ' Ext.toolbar.Toolbar ',//inherited from the Ext toolbar, you can have the properties of the toolbar, to avoid their own writing trouble alias: ' Widget.maintop ',//aliases, late access to items: [   {                 //xtype: ' button ',//default toolbar Type text: ' Home ',   glyph:0xf015,//home icon c6/>}, {text: ' Help ', glyph:0xf059   }, {text: ' about ', glyph:0xf05a   },       {          xtype: ' TextField ',//default is a butt On so the others didn't write          name: ' Searchfield ',          emptytext: ' Enter your search keyword '       }, {text: ' Search ', glyph:0xf00e   }, '--', {t Ext: ' User login ', glyph:0xf007   },{text: ' Logout ', glyph:0xf011   }, {glyph:0xf102, handler: ' Hiddentopbottom ', t Ooltip: ' Hide top and bottom area ', Disablemouseover:true   }  ]  });

According to the EXT naming convention, we define the class is oaSystem.view.main.region.Top, so in the corresponding folder we go to create this JS file.

Ext. Define Method IntroductionExt.define is the definition or overriding of a class that accepts three arguments (a StringClassName,Objectdata,FunctionCREATEDFN)

Where classname is the class name we define, which corresponds to what we just wrote, is OaSystem.view.main.region.Top

Data is an object, and by default we can pass in the form of a key-value pair like JSON, and we can pass in a function (for the time being), where the latter part of our code is the data object.

CREATEDFN is an initialized function, such as initcomponent () in this case we have nothing to pass in, because JavaScript support defines that parameters can not be passed in.

Ext.toolbar.Toolbar Class Introduction

Ext.toolbar.Toolbar is an underlying toolbar class. The default type of the toolbar (that is, xtype) is a button, but the elements of the toolbar (the Children in the toolbar container) can be any type of component, and the type is developed by Xtype. The toolbar displays hierarchical data from Treestore as a trail of navigation buttons, with each button representing a node. Click on a button to place the "select" Node in the tree. Non-leaf nodes will display their child nodes, the drop-down menu will show the navigation path record corresponding to the button, and clicking on an entry menu will trigger the selection of the corresponding child node. Choose whether you can use SetSelection to set it programmatically, or use GetSelection to retrieve it if it is selected. Toolbar elements can be created explicitly by their constructors, or by their xtype type, and can be added dynamically.

Where the toolbar class has several common properties that can be set:

Xtype specific types can be button (the default button), Tbtext (render one text directly), SplitButton (split button), Tbfil (equivalent to use) right-aligned container, TextField (text field) Tbspace (space, Equal to ")

In general we define a text that is defined like this:

{  xtype: ' button ',  name: ' Text 1 ',}

There's an easy way to do that.

' Text 1 '

The two effects are the same. For the use of toolbars, you can refer to the API, the examples are quite numerous, and you can use the live Preview feature to see the implementation is very convenient.

Step Two: Add the toolbar to the page

In Main.js, add the following items value

  {xtype: ' Maintop ', Region: ' North ',   },

Xtype is the alias value we defined earlier in Top.js, which represents the introduction of Top.js, which adds a tool bar.

Region is representative of the location of the toolbar, location can have east, is the page up or down.

Refresh is OK, look at the effect ~

This is a way to refer to an external JS file, and of course you can create a toolbar directly using the Create method.

Learn to use ExtJS APIs

API documentation, the latest in English is 5.0 and the translation of the Chinese is 4.1, the proposed comparison to see, this will be faster, first see whether there is a difference, and then the English-based 4 of Chinese as auxiliary, learning more quickly. What components you want to use later can be handy.

is working hard to learn Extjs5, slow learning progress, we have a good learning method, a lot of contribution to share to the younger brother ~ Grateful.