Contraction and expansion examples of fieldset in ExtJS

contraction and expansion examples of fieldset in ExtJS: fieldsetform Controlsa class belonging to Ext.form.FieldSet, inherited from: Ext.panel, represents a standard container for a set of fields, the most important of which is shrinking and expandingContraction and expansionDemo:

  Items: [ID: ' Check_email_hacklog_send ',        xtype: ' fieldset ',        height: ' auto ',        checkboxtoggle:true,        Checkboxname: ' Enable_email_hacklog_send ',        Title:EmailAlertMsg.enable_email_hacklog_send_box + ' (Note: SSDDSDSDSDSDSDSDSDSD) ',        collapsed:true,        collapsedcls: ' emailhacklogcss ', items[{...}]

Effect Toggle Display

The following instructions are from official documents and networks:

ExtJS has an attribute in the FieldSet control Checkboxtoggle

When this property is set to True, FieldSet will have a checkbox in the title, and when this checkbox is checked, the fieldset expands and shrinks.

There are also two properties for mates: The Oncheckclick and Checkboxname properties, the Oncheckclick property is a function to override the default Shrink/expand Function, plus the checkboxname, You can check the checkbox in the Oncheckclick function to do something, such as: If FieldSet inside is a checkboxgroup, then according to the FieldSet checkbox situation, To select All CheckboxGroup.

There is also a property is collapsible, this is also used to do the expansion and contraction of the checkboxtoggle is different, this comes out is a small triangle

Both the shrink/expand properties can be true at the same time, and when they are true both the checkbox and the small triangle appear

FieldSet other properties and methods in ExtJS:

1, Labelwidth:number

The width of the label, which affects subordinate sub-containers.

2, Itemcls:string

An extra CSS style for the container's table item element (the default is "", as if the container's itemcls is set, then the value is used). Because the style is scoped to the entire item container, this will be a valid form field, a LABEL element (if specified), or other elements that belong to the element within the entry. This component is only useful for rendering under a container controlled by the Ext.form.FormLayout formlayout layout manager.

3, Basecls:string

A CSS style class that acts on a panel element (default is ' X-panel ').

4, Layout:string

The type of layout used by this container. If not specified, the default Ext.layout.ContainerLayout type is used. The valid values can be: accordion, anchor, border, CAVD, column, fit, form, and table. For the selected layout type, you can specify #layoutconfig further configuration.

5, Animcollapse:boolean

True indicates that the panel closure process is animated (by default, true, in case the class ext.fx is available).

6, Applyto:mixed

The ID of the node, or the DOM node, or the existing element equivalent to the DIV, which is an element that already exists in the document when ApplyTo is used, the ID or CSS style class specified by the main element will be used for the component part. The components that are created will try to build its subcomponents based on these markup. With this configuration, you do not need to execute the render () method. If ApplyTo is specified, any values passed in by #renderto are ignored and the parent element of the target element is used as the container for the component.

7, Frame:boolean

True to indicate that the bounding box for the panel is customizable, false to indicate a point line with a 1px border (false by default).

8, Border:boolean

True to display the bounding rectangle of the BODY element of the panel, false to hide (true by default), and by default, the border is a set of 2px wide inner borders, but can be further set in #bodyborder

9, Bodyborder:boolean

True indicates that the bounding rectangle of the BODY element of the panel is displayed, False is hidden (true by default), and is valid only if #border = = True. if border = = true and Bodyborder = = False, the border is 1px wide, which specifies the built-in appearance of the entire BODY element.

10, Titlecollapse:boolean

True to allow the panel to be shrunk (when #collapsible = True) by clicking anywhere in the head area, whereas the tool button is only allowed (false by default).

11, Autoscroll:boolean

True for the BODY element on the panel, set overflow: ' Auto ' and the scroll bar false indicates that all overflow content is clipped (false by default).

12, Floating:boolean

True to float this panel (absolute positioning with autofill and projection), false to show "nearest" to the location where it is rendered (false by default).
Setting floating to True will create a ext.layer on the basis of the panel element and the panel is displayed in the non-positive coordinates, not displayed correctly. The Panel must therefore accurately set the position after rendering, that is, using absolute positioning. (e.g. mypanel.setposition (100,100);) If a floating panel does not have its width fixed, this causes the panel to fill the area to the right of the view. This property can also be the configuration item object used to create that Ext.layer object.

13, Shadow:boolean/string

True indicates that the projection effect is displayed (or a valid Ext.shadow#mode value) after the panel (default is ' sides '). Note This entry is valid only if Floating = true.

14, Shadowoffset:number

The pixel value of the projection offset (default is 4). Note This entry is valid only if Floating = true.

15, Contentel:string

Use the contents of the existing HTML node as the contents of the panel body (default is "). The AfterRender method of the panel is responsible for adding this HTML element to the panel body. This part of the content is more than the #html HTML display location, so the time of the render event triggered by the document has not been said HTML content.

16, Draggable:boolean

Although Ext.Panel.DD is an internal class that is not archived, it is also possible to customize the implementation of drag-and-drop (Drag/drop) by passing in a Ext.Panel.DD configuration instead of a true value. It is a subclass of Ext.dd.DragSource, so you can add specific behavior in the process of implementing the Ext.dd.DragDrop interface method:

17, Tabtip:string

The innerHTML string of the ToolTip (which can also be an HTML tag), which is displayed when the mouse is moved to the tab. At this point the Ext.panel role is ext.tabpanel a sub-panel. Remember that Ext.QuickTips.init () must be initialized well.

18, Disabled:boolean

Renders the component as disabled (default = False).

19, Autoheight:boolean

True to use height: ' auto ', false to use fixed height (default = False). Note: Although many components inherit this configuration option, not all of the ' auto ' height is valid. Autoheight:true's settings indicate that the content is adaptive to the size of the element, ext will not ask the height of the problem.

20, Collapsedcls:string

When the panel is closed, the CSS style class for the Panel element (default is ' x-panel-collapsed ').

21, Headerastext:boolean

True indicates the caption for the display panel header (default is True).

22, Buttonalign:string

The alignment of the button on this panel, the valid value is ' right ', ' left ' and ' center ' (default = ' "").

23, Collapsed:boolean

True indicates that the panel is closed when rendered (false by default).

24, Collapsefirst:boolean

True indicates that the expand/Close Rotation button appears to the left of the panel's head, false to the right (by default, true).

25, Minbuttonwidth:number

The minimum width of the buttons on this panel (default is 75).

26, Layoutconfig:object

When layout layouts are selected, their corresponding configuration properties are set on this object. (that is, used in conjunction with the #layout configuration) for complete configuration information that is valid for different types of layouts,

See 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 of individual items, or subcomponents, that are added to this container. The object type of each item is a ext.component-based configuration object that you can pass in to a component, which is lazy-rendering, and the benefit is that the component does not render immediately, reducing the overhead of building component objects directly. To perform the "lazy instantiation delay Initialization" feature, configure the Ext.component#xtype property of the registration type to which the component belongs. To learn about all the available Xtyps, refer to Ext.component. If a single entry is passed in, a reference to an object, such as items: {...}, should be passed directly. ）。 Multiple items should be passed in as an array type (such as items: [{...}, {...}] ）。

28, Defaults:object

A configuration item object that is applied on a whole component, whether the component is specified by #items, or is supported by a #add, #insert的方法加入. The default configuration can be a "name/value" that can be recognized by any number of containers, assuming that you want to automatically set padding within each Ext.panel entry, you can pass in defaults: {bodystyle: ' padding:15px '}.

29, Hideborders:boolean

True to hide the border of each component under the container, false to preserve the existing border setting for the component (false by default).

Contraction and expansion examples of fieldset in ExtJS