Extjs learning notes-4 toolbar and menu

The toolbar is easy to use. The key is to add content to the toolbar. By default, the toolbar adds a button, but you can actually add any component to the toolbar. The following is an example: CopyCode The Code is as follows: <SCRIPT type = "text/JavaScript">
Ext. onready (function (){
VaR TB = new Ext. toolbar ({
Renderto: Document. Body,
Width: 600,
Height: 100,
Items :[
{
// Xtype: 'button ', // default for toolbars, same as 'tbbutton'
Text: 'button'
},
{
Xtype: 'splitting', // same as 'tbsplitting'
Text: 'split click'
},
// Begin using the right-justified button container
'->', // Same as {xtype: 'tbfill'}, // Ext. toolbar. Fill
{
Xtype: 'textfield ',
Name: 'field1 ',
Emptytext: 'enter search term'
},
// Add a vertical separator bar between toolbar items
'-', // Same as {xtype: 'tbparamator'} to create Ext. toolbar. Separator
'Text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext. toolbar. textitem
{Xtype: 'tbspacer'}, // same as ''to create Ext. toolbar. Spacer
'Text 2 ',
{Xtype: 'tbspacer', width: 50}, // Add a 50px Space
'Text 3'
]
});

});
</SCRIPT>

Extjs can be used to add components flexibly. You can directly add objects in the items array, such as new Ext. Button (...), You can also directly add configuration items. As shown in the preceding example, the parameters in the object's constructor are taken out directly, and new is omitted. Instead, xtype is used, extjs constructs the corresponding object based on xtype. Xtype is defined in Ext. component. xtype is a string and its function is a type alias. Extjs has some default xtypes. You can also set a certain type of xtype, but this is beyond the scope of this article. The corresponding xtype and type are included in the extjs API documentation. The following is an excerpt for future reference.

Toolbar Components
---------------------------------------
Paging Ext. pagingtoolbar
Toolbar Ext. Toolbar
Tbbutton Ext. toolbar. Button (deprecated; Use button)
Tbfill Ext. toolbar. Fill
Tbitem Ext. toolbar. Item
Tbseparator Ext. toolbar. Separator
Tbspacer Ext. toolbar. Spacer
Tbsplit Ext. toolbar. splitbutton (deprecated; Use splitbutton)
Tbtext Ext. toolbar. textitem

Menu Components
---------------------------------------
Menu Ext. Menu. Menu
Colormenu Ext. Menu. colormenu
Datemenu Ext. Menu. datemenu
Menubaseitem Ext. Menu. baseitem
Menucheckitem Ext. Menu. checkitem
Menuitem Ext. Menu. Item
Menuseparator Ext. Menu. Separator
Menutextitem Ext. Menu. textitem

Form Components
---------------------------------------
Form Ext. Form. formpanel
Checkbox Ext. Form. checkbox
Checkboxgroup Ext. Form. checkboxgroup
Combo Ext. Form. ComboBox
Datefield Ext. Form. datefield
Displayfield Ext. Form. displayfield
Field Ext. Form. Field
Fieldset Ext. Form. fieldset
Hidden Ext. Form. Hidden
Htmleditor Ext. Form. htmleditor
Label Ext. Form. Label
Numberfield Ext. Form. numberfield
Radio Ext. Form. Radio
Radiogroup Ext. Form. radiogroup
Textarea Ext. Form. textarea
Textfield Ext. Form. textfield
Timefield Ext. Form. timefield
Trigger Ext. Form. triggerfield

Take a closer look at the original xtype API documentation:
Xtype: String

The registered xtype to create. this config option is not used when passing a Config object into a constructor. this config option is used only when lazy instantiation is being used, and a child item of a container is being specified not as a fully instantiated component, but as a component config object. thextype will be looked up at render time up to determine what type of child component to create.

In this statement, if xtype is used in new, the xtype is ignored. This is obvious. When new is used, you must specify a type. xtype is useless. The last half is the key. It means that if xtype is used, the object is not constructed immediately, but a delayed loading mechanism is used, construct this object when the object needs to be displayed. Before the first use, only one component config object (component config object) is in the memory. Although this is not explicitly stated in the API documentation, however, it implies that, if possible, using xtype instead of new is a better choice, which can save memory. In reality, not all components need to be displayed, so those components that are not displayed do not need to be instantiated.
This article describes the meaning of xtype in ext.
This article introduces xtype. Next we will return to the toolbar. The running effect of the above Code is:

A beautiful toolbar appears. The next step is to add methods for these buttons, but this is not the scope of this article. I will discuss it later.

next we will introduce menu, which is similar to toolbar. Components added on the menu are listed in the xtype table above. For example, see copy Code the code is as follows:

TB. Add ({text: 'colorful ', menu: {xtype: 'menu', items :[
{Text: 'Choose A date', menu: datemenu },
{Text: 'Choose A color', menu: colormenu },"-",
{
Text: 'Radio options ',
Menu: {// <-- submenu by nested config object
Items :[
// Stick any markup in a menu
'<B class = "menu-title"> choose a theme </B> ',
{
Text: 'aero glass ',
Checked: True,
GROUP: 'Theme'
},{
Text: 'Vista Black ',
Checked: false,
GROUP: 'Theme'
},{
Text: 'Gray theme ',
Checked: false,
GROUP: 'Theme'
},{
Text: 'default theme ',
Checked: false,
GROUP: 'Theme'
}
]
}
}
]}
});
TB. dolayout ();
});
</SCRIPT>

The effect is as follows: