ExtJS Panel Basic Introduction

1. Panel is a special container, because he has both the characteristics of the container and his own unique characteristics.

A panel is a container that has specific features and structural components that enable it to perfectly create parts for the application-oriented user interface. The panel inherits from Ext.container.Container, and can set its own layout layouts, and can contain sub-components. either specify the panel's items or dynamically add components to the Panel, and remember to consider how you want the panel to arrange the child elements, and whether the child elements need to be resized using the ext built-in layoutlayout rules. By default, the Panel uses Containerlayout automatic rules. It simply renders the subcomponents, adds them to the container one by one, and no longer makes any resizing operations, or you can configure layout to set the size and position of the child components in the Panel container.

2, Panel components are divided into seven parts, respectively, are:

Title, toolbar (up or down), buttons toolbar, content area

1) Title: The title bar is not just a text title, you can also add tools, because he also has the header function, you can add tools in the tool, such as minimize, maximize and so on. Configuration items Use title: ' title ' and Tools:[{xtype: ' Help '},{xtype: ' Search '}]

2) Toolbar: Tbar Bbar lbar Rbar; corresponding to the top and bottom toolbars, using tools consistent with

3) button toolbar: Buttons or Fbar, both of which display the tool between the content area and the Bbar, and can also control the placement of the button by Buttonalign

4) Content area: If you use the template method pattern only, you can use HTML configuration items, and if you are a container, it is best to use items to add sub-components

3, some important properties of the panel

1) Closeaction: Can be a string of destroy (default) or hide, the former is when you click the Close button or call the Close method will completely destroy the object, the DOM removed from the text tree, the latter is only hidden, you can also use show show.

2) BODYCLS: Panel body style, this is a class name OH

3) Bodystyle: Panel body style, this is a style configuration item

4) Bodypadding: The inner margin of the panel body is actually the distance between the sub-components

5) Layout: Default auto layout, you can set a string or layout object to set the layout

6) Width, height: the size of the container

7) Icon: Specify a picture path, set the icon for the title bar

8) Iconcls: A class name, set the icon for the title bar

4. Tools Toolbar Configuration Items

1) Type: button name, such as Save Help search ....

2) Handler: Event triggered when the tool is clicked

3) Scope: scope

4) Stopevent: If False indicates allow event propagation

5) ToolTip: A string or Quicktips object, which is actually the cue message displayed when the mouse is placed on the icon

5. Example

Var resultspanel = ext.create (' Ext.panel.Panel ', {    title:  ' Results ',    width: 600,    height: 400,     renderto: ext.getbody (),    layout: {         type:  ' vbox ',       //  child elements Vertical Layout          align:  ' Stretch ',    //  each child element width is full of sub-containers          padding: 5    },    items:  [{               //  Specify a grid child element         xtype:  ' grid ',         columns: [{header:  ' Column one '}],             //  Configure only one column to display, no data         store: ext.create (' Ext.data.ArrayStore ',  {}), //  set a store        flex: 1   with no data                                        //  1/3 height   of the container (in  Box  layout)     }, {         xtype:  ' splitter '    //a splitter between two subcomponents     },  {                     // Details  panel as a configuration come in panel  (not specified by xtype, default is   ' panel ') .         title:  ' Details ',         bodypadding: 5,        items: [{             fieldLabel:  ' Data item ',             xtype:  ' TextField '         }], //  form elements (text field)         flex: 2              //  2/3 height   (in  Box  layout) of the container     }]} );

Reference:

1) ExtJS authoritative guide

2) ExtJS4.0 Help documentation

ExtJS Panel Basic Introduction