Ext. Panel API Translation

Ext. Panel API Translation
Reference URL: http://tianmoboping.blog.163.com/
Activeitem: String/Number
This is used to set the child widget of the current activity. The value is the serial number or ID of the Child widget. However, it can only be applied to the layout class that can only display one child component at a time, such as Ext. layout. Accordion, ext. layout. cardlayout and Ext. layout. fitlayout.

Allowdommove; Boolean
Whether the DOM node of the component can be moved during component rendering. The default value is true.

Animcollapse: Boolean
Set whether to use animation when the Panel is scaled down. If Ext. FX is valid (included), the default value is true; otherwise, the value is false.

Applyto: mixed
The ID of the DIV corresponding to the X-panel.

Autodestroy: Boolean
If you want to remove a sub-component from the Panel and the value is true, the sub-component will be destroyed automatically during the removal process. If yes, the sub-component will not be destroyed manually, the default value is true.

Autoheight: Boolean
If this is true, set this. El. Dom. style. Height = 'auto '. The default value is false.

Autoscroll: Boolean
If it is true, set this. Body. Dom. style. Overflow = 'auto '. The default value is false.

Autoshow: Boolean
If it is true, check whether the component is set to hidden. If yes, remove this effect.

Autowidth: Boolean
Same as autoheight ..

Basecls: String
This. basecls class (default value: 'x-panel ')

Bbar: Object/Array
The toolbar at the bottom of the Panel. It is an Ext. toolbar object, or a Config object of the toolbar, or an array of the config objects of the buttons to be added to the toolbar. Note: This attribute is invalid after render. If you want to use it after render, use getbottomtoolbar to get reference.

Bodyborder: Boolean
If it is true, the border is displayed for the elements corresponding to this. El. The default value is true. This is only valid when border = true. If border = true and bodyborder = false, the 1px inset border is displayed. This. El inset is returned.

Bodystyle: String/Object/Function
CSS class to be applied to this. El. The format is the same as Ext. element. applystyle. The default value is null.

Border: Boolean
It also sets the border of this. Body. The default value is true. In this case, the border is 2px by default. Of course, it will also be affected by bodyborder.

Buttonalign: String
The alignment of buttons added to the Panel. Valid values: 'right', 'left', and 'center'. The default value is 'right '.

Buttons: Array
The Config array of Ext. Button, used to add the button to the footer of the Panel.

CLS: String
This. El class.

Collapsefirst: Boolean
When the title bar is displayed, whether to always put the shrink and expand buttons in front of all other buttons. The default value is true.

Collapsed: Boolean
Whether to contract or expand during rendering. If it is true, it is reduced. The default value is false.

Collapsedcls: String
When the Panel is in the shrinking State, the default value of this. El class is 'x-panel-collapsed '.

Collapsible: Boolean
Whether the Panel can be shrunk or whether the button for shrinking and stretching can be displayed. Display. The default value is false.

Contentel: String
The ID of an existing Dom. This function is used to remove this. Body. Dom. appendchild after afterrender. The default value is ''.

Ctcls: String
Set this. Container class.

Defaulttype: String
When you use items to add a new member in the constructor, if xtype is not set, xtype is used as the default type to add the component. The default value is 'panel '.

Defaults: Object
Default config of all child components added to this component. If these sub-components are configured with config, the newly created sub-components shall prevail. Example: {bodystyle: 'padding: 15px '}.

Disabledclass: String
CSS when the component is set to disabled. The default value is "X-item-Disabled ".

Draggable: Boolean
Whether it can be dragged. The default value is false. Of course, it can also be an Ext. Panel. dd config. Ext. panel. dd is an internal but non-public class (I have not found its source code). It moves a proxy element to replace the Panel that should have followed the mouse. el. However, it does not provide any other actions during the drag process or when you put it down. That is to say, if you do not handle it, the mouse is loose and the Panel is still in the old place. It is a subclass of Ext. dd. dragsource. Therefore, you must implement the Ext. dd. dragdrop method to generate an action. The sample code is as follows:

New Ext. Panel ({
Title: 'drag me ',
X: 100,
Y: 100,
Renderto: Ext. getbody (),
Floating: True,
Frame: True,
Width: 400,
Height: 200,
Draggable :{
// Config option of Ext. Panel. dd class.
// It's a floating panel, so do not show a placeholder proxy in the original position.
Insertproxy: false,

// Called for each mousemove event while dragging the DD object.
Ondrag: function (e ){
// Record the X, Y position of the drag proxy so that we can
// Position the panel at end of drag.
VaR Pel = This. Proxy. getel ();
This. x = pel. getleft (true );
This. Y = pel. gettop (true );

// Keep the shadow aligned if there is one.
VaR S = This. Panel. getel (). Shadow;
If (s ){
S. Realign (this. X, this. Y, Pel. getwidth (), Pel. getheight ());
}
},

// Called on the mouseup event.
Enddrag: function (e ){
This. Panel. setposition (this. X, this. y );
}
}
}). Show ();

Elements: String
A panel has five parts: Header, tbar, body, bbar, and footer. Elements stores the current Panel and contains several parts. For example, if a panel has a header and a body, element = 'body, head'. The default value is 'body '.

Floating: Boolean
If it is true, it will make panel. El. style. Position = absolute. In addition, shimming and shadow are provided by default. If the value is false, the original display mode is not changed.
Note: Setting floating to true will cause the panel to be hidden in the offsets mode with a large number of negative offsets. This bit will be known after a try. So if floating is set to true. You 'd better setpostion (x, y) after render. Of course, if you let the Panel float, you also need to set the width to a fixed value. Otherwise, it will expand to the right to the edge of the viewport.

Footer: Boolean
If it is set to true, footer is explicitly created. If it is set to false, no footer is created. By default, if one or more buttons are added to footer, footer is automatically created.

Frame: Boolean
If it is set to true, a custom rounded border is added to the Panel. If it is set to false, a rectangle border with a width of 1 px is added.

Header: Boolean
If this parameter is set to true, the header is created. If this parameter is set to true, the header is automatically created when it is not in special circumstances. Otherwise, the header is not created, if the title is set but the header is false, the header will not be created.

Headerastext: Boolean
The title is displayed in the header, and hidden when the title is false. The default value is true.

Height: Number
The height of the Panel. The default value is auto.

Hideborders: Boolean
If the value is true, the border of all child widgets of the Panel is hidden. If the value is false, the original border settings of the Child widgets are exclusive.

Hidecollapsetool: Boolean
When collapsible is set to true and hidecollapsetool is set to true, the button that controls contraction and stretching is hidden. If it is set to false, the button is displayed. The default value is false.

Hidemode: String
There are three hiding modes: "visibility" (CSS visibility), "offsets" (negative offset position) and "display" (CSS display)-defaults to "display ".

Hideparent: Boolean
The container used to set whether to hide the component, that is, component. container.

HTML: String/Object
An HTML fragment, or an object that meets the domhelper syntax, is used to set the content of the body part of the panel. The default value is ''.

Iconcls: String
Class used to set the icon on the header. Example:. My-Icon {Background: URL (../images/my-icon.gif) 0 6px no-repeat! Important ;}

ID: String
An ID value uniformly allocated for component. The default value is panel. El. Id.

Items: mixed
An array of a single member or a child component. Each member can be any object inherited from Ext. component.

Its member can be a reference of component, so that it will immediately render, or it can be a Config of component. Then lazy render will be created. Of course, you must add xtype in config. Don't talk about this.

For all values of xtype, see the config description of Ext. component. xtype. As mentioned in. In fact, there are many examples of its value. If a member is transferred, it is like: items :{......}, For example :[{......}, {……}].

Keys: Object/Array
A keymap config object. Used to set the shortcut key. The default value is null.

Layout: String
Set the layout of panel. container. If not set, the default value is Ext. layout. containerlayout. Valid values include absolute, accordion, anchor, border, card, column, fit, form, and table. Layoutconfig is required if you want to set layout details.

Layoutconfig: Object
It is used to set layout details. layout can only be effective when it has valid settings. If you want to know the configuration details of this config, see the layout classes:
Ext. layout. Absolute
Ext. layout. Accordion
Ext. layout. anchorlayout
Ext. layout. borderlayout
Ext. layout. cardlayout
Ext. layout. columnlayout
Ext. layout. fitlayout
Ext. layout. formlayou
Ext. layout. tablelayout

Listeners: Object
A config object contains one or more event handler, which is used by addlistener to register events.

Maskdisabled: Boolean
Whether to display mask when panel. Disabled. Is displayed as true. Otherwise, it is not displayed.
By default, even when a panel is disabled, its sub-elements are displayed normally. the user does not know that the Panel is disabled, which causes problems to the user. However, with mask, the user will be prompted. Oh, this Panel is unavailable and disabled. This gives users a new experience.

Minbuttonwidth: Number
The minimum width of all buttons on the panel, in PX.

Monitorresize: Boolean
If it is true, it automatically monitors the resize event of the window and changes the viewport accordingly. The classic application of this item serves layout, instead of manually adjusting the size of some components to adapt to window size changes.

Overcls: String
Class when you place the cursor over panel. El. The best thing is that when the mouse goes out, it will be automatically deleted, resulting in a hover effect.

Pagex: Number
X coordinate of a widget relative to a page

Pagey: Number
Y coordinate of a widget relative to a page

Plugins: Object/Array
An object or an array of objects, which provides custom functions for component. Each object is referenced by a plug-in. Of course, the premise is that the plug-in defines the init method, which will be called during component initialization. Useless. No more. Difficult to translate.

Renderto: mixed
Ext. Get (panel. renderto) is panel. container. The term is unclear.

Shadow: Boolean/string
If it is true, a shadow is displayed for the Panel. If it is false, no shadow is displayed. You can also set the shadow type. For details, see Ext. Shadow and Ext. Shadow. mode. Note that this option works only when floating is set to true.

Shadowoffset: Number
Shadow offset. The default value is 4. It only takes effect when floating is set to true.

Shim: Boolean
Do you want to create shim for the component? What is Shim? In this case, the menu made by div is used. However, if there is an applet or flash built on it, the menu will be covered. This was once depressing for B/S personnel. Ext provided a general solution to create an IFRAME with the same size as the component to avoid this problem, make the Z-index of this component greater than IFRAME. IFRAME will not be covered by other things, so Z-index's things on IFRAME will not be covered. IFRAME is equivalent to a mat, and the things we are going to use are increased, shim English also refers to the thin gasket. Long live extjs. Of course, the SRC of IFRAME must be ''.

Stateevents: Array
Event array. When this event is triggered, the component Status is saved.

Stateid: String
ID used to manage the component status. The default value is the ID of the component.

Stateful: Boolean
Indicates whether the component Status is loaded from a certain place when the component is created. Which attributes can be saved as states? Only the internal attribute is supported.
To save the component Status, the component Status manager provider must implement Ext. state. provider, that is, to override its set and get methods to save/re-read key/value pairs. The provider of an inner key is Ext. state. cookieprovider.

You can set the status provider for the current page as follows:
Ext. state. Manager. setprovider (New Ext. state. cookieprovider ());

The component tries to save the status when an event is configured in stateevents. You can write some code for processing, such as in the Code for processing beforestaterestore, staterestore, beforestatesave, and statesave events.

Style: String
A style applied to panel. El. The syntax must meet the Ext. element. applystyles interface.

Tabtip: String
When the Panel is a page in Ext. tabpanel, set tooltips for this panel. However, before render, you must call ext. quicktips. INIT () to initialize it.

Tbar: Object/Array
The toolbar at the top of the Panel. It can be an Ext. toolbar, a button array, or a Config of a button. Note: After render, this reference is useless. If you want to process it, use gettoptoolbar.

Title: String
The title displayed in the panel header. When the title is set, the header will be created unless the header is set to false. If you need a title, but not when creating a panel, but at a later time, you need to set a non-null value (such as a space) for the title or set the header to true. In this way, the header is created only when the Panel is created. Otherwise, the header will not be created.

Titlecollapse: Boolean
When collapsible = true and titlecollapse = true, clicking any part of the title bar of the Panel will produce a folding/stretching effect. Otherwise, you can only click that button (as mentioned above) to produce this effect.

Tools: Array
A toolbar button array. This toolbar is not like tbar or bbar, but the title bar on the header. What is the concept of the title bar on the header? The close button of the panel you see is superb. Each toolbar element is made public to developers by referencing an element.
Tools. <tool-type>. Violent.
The Config of Each toolbar member must contain the following attributes:
ID: String
Required. The type of the toolbar button. Optional values:

Toggle (created by default when collapsible is true)
Close
Minimize
Maximize
Restore
Gear
Pin
Unpin
Right
Left
Up
Down
Refresh
Minus
Plus
Help
Search
Save
Print

Handler: Function
Required. It is executed when the button is clicked. Its parameters are described as follows:
Event: Ext. eventobject
Toolel: Ext. Element
Panel: Ext. Panel host panel

Scope: Object
QTip: String/Object
A tips string or tips config for Ext. quicktip. Register.

Hidden: Boolean
On: Object
The Config of the Custom Event processor, used by addlistener.

Example:
Tools :[{
ID: 'refresh ',
QTip: 'refreshform data ',
// Hidden: True,
Handler: function (event, toolel, panel ){
// Refresh Logic
}
}]
Note: Except for Toggle, other toolbar members only provide a visual icon without any function. Therefore, if you want to add them, you have to write the processing functions by yourself.

Width: Number
The width of component. Unit: Px. Default Value: auto.

X: Number
Obtain the X of the component, which is equivalent to panel. El. style. Left.

Xtype: String
Needless to say, see the xtype In the config of Ext. component.

Y: Number
Same as X.