Extjs4 note (9) Ext. Panel panel control, ext. Window. Window window control, ext. Container. viewport layout Control

Back to the series directory

This article describes three container controls.

I. panel control Ext. Panel

A panel control consists of several parts, including the title bar, toolbar, body, and button area. The title bar is located at the top, and the toolbar can be placed in four positions, centered around the middle part of the body, and the button area is located at the smallest side. The following describes several basic configuration items:

1. Title:Set the panel title text.

2. tbar, lbar, rbar, bbar:Set the toolbar for the top, left, right, and bottom parts.

3. html, items:The former is used to set the HTML of the body part, and the latter is used to set the ext control of the body part.

4. Buttons:Set the button in the button area.

Next let's take a look at the panel generationCode:

[HTML]

 
<H1> panel  
 
[JS]
 

Ext. onready (function () {var P = ext. create ('ext. panel ', {Title: 'panel title', collapsible: True, renderto: 'div1', width: 400, height: 300, autoscroll: false, bodyborder: True, buttonalign: 'right', buttons: [{text: "button 1", Handler: function () {Ext. MSG. alert ("prompt", "first event") ;}, ID: "Bt1" },{ text: "button 2", ID: "bt2"}], floating: true, footercfg: {Tag: 'span ', ID: 'span1', HTML: 'bottom of the Panel'}, items: [{xtype: "button", text: "button"}], tbar: ext. create ('ext. toolbar. toolbar ', {items: ["toolbar"]}), HTML: "<B> body </B>"}); p. setposition (40, 50 );});
 
 
 

 
The effect is as follows:
 

 
 
Ii. Window control Ext. Window. Window
The window control is similar to the panel control, except that it looks like a window with window operations such as maximizing, minimizing, opening, closing, and dragging. Let's take a look at the code generated by the window:
 

 
Let's take a look at the panel Generation Code:
 

 
[HTML]
 

 
<H1> window  
 
[JS]
 

Ext. onready (function () {var window1 = ext. create ('ext. window. window ', {applyto: 'win1', layout: 'table', // internal element Layout mode {absolute accordion anchor border card column fit form table} width: 500, height: 200, closeaction: 'hide ', // window close method: Hide/Close plain: True, title: "window title", maximizable: True, // whether the minimizable can be maximized: true, // whether closable: false can be minimized, // whether modal: True can be disabled, // whether it is a modal window resizable: false ,/ /Can I change the window size? items: [{text: 'button', xtype: "button"}, {width: 214, minvalue: 0, maxvalue: 100, value: 50, xtype: "Slider" },{ xtype: "button", text: 'One menu ', width: "60px", height: "15px", menu: {items: [New Ext. colorpalette ({listeners: {select: function (CP, color) {Ext. MSG. alert ('color select', 'select '+ color + '. ') ;}}),'-', {Text: 'menu item 1'}, {text: 'menu item 2'}, {text: 'menu item 3'}], buttons: [{text: 'true', Disabled: true}, {text: 'cancel', Handler: function () {window1.hide () ;}}]}); Ext. fly ("button1 "). on ("click", function () {window1.show (ext. get ("button1 "));});});
 

 
The effect is as follows:
 

 
 
3. layout control Ext. Container. viewport
 
The layout control is generally used for the layout of the entire page. It is divided into four areas in four directions, and the middle body. The four areas can be automatically hidden, in fact, the core function of this control is to use the "border" layout. Let's take a look at the generated code:
 

 
[JS]
 

Ext. onready (function () {Ext. create ('ext. container. viewport', {layout: 'border', items: [{region: 'north', HTML: ' 
 
 

The effect is as follows:
 

 
 
By Lipan)

Source: [Lipan] (http://www.cnblogs.com/lipan)

Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.