Shulou(Shulou.com)06/02 Report--

This article is about how to use Ext.panel.Panel in Ext.js4.2.1. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

One: description

Panel Panel is the basis of ExtJS controls, many advanced controls are extended on the basis of panels, and most other controls are directly or indirectly related to it. The interface of an application is generally formed by panels that are organized in different ways.

The panel consists of the following parts, a top toolbar (tbar), a bottom toolbar (bbar), a panel head (header), a panel tail (bottom), and a panel main area (body). Panel expansion, closing and other functions are also built into the panel class.

And provide a series of reusable tool buttons so that we can easily achieve custom behavior, the panel can be put into any other container, the panel itself is a container, it can contain a variety of other components.

Panel Panel has the following main features:

1) the panel can be understood as an interface block in an application, which can be large or small, and contains specific style information

2) the panel Panel inherits from the Container class, so the panel is a visual container component; it is also the base class for most other visual controls such as TabPanel, Window, and TreePanel

3) the panel can include either other element components or specific html code snippets, and the contents of the panel can be dynamically updated in the program.

4) the panel is composed of five fixed parts, which are not necessary except for the body part.

If you want to place an Ext component or control element in a panel, you can specify it through the panel's items property, whose value can be an array, indicating that there are many child elements in the panel

It can also be an object, indicating that only one child element is defined in the panel. When the panel object is created, you can dynamically add child elements to the panel through the add and insert of the panel container, and use the remove method to dynamically delete the child elements in the panel.

Two: Config

1.bbar: Object/Ojbect []

A simple way to configure the bottom tool class.

Bbar: [{

Xtype: 'button'

Text: 'Button 1'

}]

= >

DockedItems: [{

Xtype: 'toolbar'

Dock: 'bottom'

Items: [

{xtype: 'button', text:' Button 1'}

]

}]

2.buttons: Object/Object

A simple way to configure button at the bottom of panel

Buttons: [

{text:'Button 1'}

]

= >

DockedItems: [{

Xtype: 'toolbar'

Dock: 'bottom'

Items: [

{xtype: 'button', text:' Button 1'}

]

}]

4.dockedItems

One or more docking components are added to panel. Can be added to the top and bottom of the panel around the position, mainly used for toolbars and tab bar.

5.formBind

6.icon

Specify a picture path as the icon to the left of the title

7.iconClass

Thank you for reading! This is the end of the article on "how to use Ext.panel.Panel in Ext.js4.2.1". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.