Scale down and expand FieldSet instances in Extjs, and extjsfieldset

Scale down and expand FieldSet instances in Extjs, and extjsfieldset
Example of FieldSet contraction and expansion in Extjs: The FieldSet Form Control belongs to Ext. form. fieldSet class, inherited from: Ext. panel, indicating the standard container for a set of fields. One of the most important functions is to contract, expand, contract, and expand demo:

Items: [id: 'check _ email_hacklog_send ', xtype: 'fieldset', height: 'auto', checkboxToggle: true, checkboxName: 'Enable _ email_hacklog_send', title: EmailAlertMsg. enable_email_hacklog_send_box + '(Remarks: SSDDSDSDSDSDSDSDSDSD)', collapsed: true, collapsedCls: 'emailhacklogcss ', items [{...}]

Result switching display

 

The following instructions are from the official documentation and network:

The Fieldset control of Extjs has an attribute checkboxToggle.

When this attribute is set to true, fieldset will have an extra checkbox in the title. When this checkbox is checked, this fieldset will be opened and shrunk.

There are also two matching attributes: onCheckClick and checkboxName. The onCheckClick attribute is a function used to replace the default contraction/expansion function, with checkboxName, you can know the checkbox check conditions in the onCheckClick function to do some things. For example, if there is a CheckBoxGroup in fieldset, you can select all checkboxgroups Based on the checkBox situation of fieldset.

Another attribute is collapsible, which is used for expansion and contraction. Unlike checkboxToggle, this attribute is a small triangle.

The two contraction/expansion attributes can be both true. when both are true, the checkbox and the small triangle will appear at the same time.

Other FieldSet attributes and methods in Extjs:

1. labelWidth: Number
 
Label width. This attribute affects sub-containers of lower levels.
 
2. itemCls: String
 
The extra CSS style of the form item element of the container (the default value is "", which is used if the itemCls of the container is set ). Because the style acts on the entire entry container, this will be effective for the form fields, label elements (if specified), or other elements as long as they belong to the element in the entry. This component is only useful for rendering under the container controlled by Ext. form. FormLayout layout manager.
 
3. baseCls: String
 
CSS style class ('x-panel 'by default) applied to panel elements ').
 
4. layout: String
 
The layout type used by the container. If this parameter is not specified, the default Ext. layout. ContainerLayout type is used. Valid values include accordion, anchor, border, cavd, column, fit, form, and table. For the selected layout type, you can specify # layoutConfig for further configuration.

5. animCollapse: Boolean
 
True indicates the animation effect is attached to the Panel closure process (the default value is true, when the Ext. Fx class is available ).

6. applyTo: Mixed
 
The node id, DOM node, or an existing element equivalent to the DIV. These are all existing elements in the Document. When applyTo is used, the id or CSS style class specified by the primary element will act on the component components, and the created component will try to build its child components based on these markup. After this configuration is used, you do not need to execute the render () method. If applyTo is specified, any value passed by # renderTo will be ignored and the parent element of the target element will be used as the container of the component.
 
7. frame: Boolean
 
"True" indicates that the outer frame of the Panel can be customized, and "false" indicates that the border can be 1 px (default value: false ).
 
8. border: Boolean
 
"True" indicates that the border of the Panel body element is displayed. "false" indicates that the border is hidden (true by default). By default, the border is a set of 2 PX width internal border, but can be further set in # bodyBorder.

9. bodyBorder: Boolean
 
"True" indicates that the border of the Panel body element is displayed. "false" indicates that the border is hidden (true by default). It is valid only when # border = true. If border = true and bodyBorder = false, the border is 1 px wide. You can specify the built-in appearance of the entire body element.

10. titleCollapse: Boolean
 
True indicates that the Panel can be reduced at any position in the header area (when # collapsible = true); otherwise, only the tool button can be clicked (false by default ).
 
11. autoScroll: Boolean
 
"True" indicates the Panel body element. "overflow: 'auto'" and "scroll bar" "false" indicates that all overflow content is cropped. The default value is "false ).
 
12. floating: Boolean
 
True indicates floating on this panel (absolute positioning with Auto Fill and projection), false indicates "nearby" display at its rendering position (false by default ).
If floating is set to true, an Ext. Layer is created based on the panel element, and the Panel is displayed as a coordinate of a non-positive number. Therefore, the position of the rendered panel must be precisely set, that is, the absolute positioning method is used. (For example, myPanel. setPosition (100,100);) If a floating panel is not fixed with its width, the Panel will be filled with the area on the right of the view. This attribute can also be the configuration item object used to create the Ext. Layer object.
 
13. shadow: Boolean/String
 
True indicates that (or a valid Ext. Shadow # mode Value) the projection effect is displayed on the rear of the Panel (the default value is 'side ). Note that this option is only valid when floating = true.
 
14. shadowOffset: Number
 
The pixel value of the projection offset (default value: 4 ). Note that this option is only valid when floating = true.

15. contentEl: String
 
Use the content of an existing HTML node as the Panel body (default ''). The afterRender method of the Panel is responsible for adding the HTML element to the Panel body. The content of this part is later than the position where # html HTML is displayed. Therefore, when the render event is triggered, the document has not mentioned the HTML content.

16. draggable: Boolean
 
Although Ext. panel. DD is an internal class that is not archived. However, you can also customize the implementation of drag/drop. The specific method is to pass in an Ext. panel. DD configuration replaces the true value. It is a subclass of Ext. dd. DragSource. Therefore, you can add specific actions when implementing the Ext. dd. DragDrop interface method:
 
17. tabTip: String
 
The innerHTML String Of The tooltip (or html Tag). It is displayed when you move the cursor to the tab. In this case, Ext. Panel acts as a subpanel of Ext. TabPanel. Remember that Ext. QuickTips. init () must be initialized.
 
18. disabled: Boolean
 
If this component is rendered as disabled (the default value is false ).
 
19. autoHeight: Boolean
 
True indicates height: 'auto', and false indicates fixed height (default value: false ). Note: although many components inherit this configuration option, not all 'auto' heights are valid. AutoHeight: if it is set to true, the value of autoHeight is automatically adjusted according to the content of the element. Ext does not ask the height question.
 
20. collapsedCls: String
 
When the panel is closed, the CSS style class of the panel Element ('x-panel-collapsed 'by default ').
 
21. headerAsText: Boolean
 
True indicates the title of the display panel header (default value: true ).
 
22. buttonAlign: String
 
The button alignment on this panel. Valid values: 'Right, 'left' and 'center' (default value: 'right ').
 
23. collapsed: Boolean
 
True indicates that it is closed after the rendering Panel (the default value is false ).

24. collapseFirst: Boolean
 
True indicates that the expand/Close rotation button appears on the left side of the panel header, and false indicates on the right side (true by default ).

25. minButtonWidth: Number

The minimum button width (75 by default) on this panel ).
 
26. layoutConfig: Object
 
After the layout is selected, the corresponding configuration attributes are set on this object. (That is, used together with # layout configuration) complete configuration information effective for different types of layout,
 
Refer to the corresponding layout class:
 
Ext. layout. Absolute
 
Ext. layout. Accordion
 
Ext. layout. AnchorLayout
 
Ext. layout. BorderLayout
 
Ext. layout. CardLayout
 
Ext. layout. ColumnLayout
 
Ext. layout. FitLayout
 
Ext. layout. FormLayout
 
Ext. layout. TableLayout
 
 
27. items: Mixed
 
An array composed of a single item or sub-component is added to this container. The object type of each item is based on Ext. for Component, you can pass in the lazy-rendering configuration object of a Component. The advantage of this is that the Component will not be rendered immediately, reducing the overhead of building Component objects directly. To use the "lazy instantiation delayed initialization" feature, you must configure the Ext. Component # xtype attribute of the registration type to which the Component belongs. For more information about all available xtyps, see Ext. Component. If a separate item is passed in, a reference of an object (such as items: {...}) should be passed in directly :{...}). Multiple items should be input as arrays (for example, items: [{...}, {...}]).
 
28. defaults: Object
 
Configuration item objects applied to all components, whether specified by # items or added by # add or # insert, are supported. The default configuration can be any number of containers that can recognize the "name/value". Assume that each Ext is automatically configured. set the padding patch for Panel items. You can pass in ults: {bodyStyle: 'padding: 15px '}.
 
29. hideBorders: Boolean
 
True indicates that the border of each component under the container is hidden. false indicates that the existing border settings of the component are retained (the default value is false ).