X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..e9397f91ede62d446aed37d23256e8938fc4c335:/docs/output/Ext.form.FieldSet.html?ds=sidebyside diff --git a/docs/output/Ext.form.FieldSet.html b/docs/output/Ext.form.FieldSet.html index 638ffe15..df39bba7 100644 --- a/docs/output/Ext.form.FieldSet.html +++ b/docs/output/Ext.form.FieldSet.html @@ -1,54 +1,59 @@ -
Observable Component BoxComponent Container Panel FieldSet
Package: | Ext.form |
Defined In: | FieldSet.js |
Class: | FieldSet |
Extends: | Panel |
var form = new Ext.FormPanel({
- title: 'Simple Form with FieldSets',
- labelWidth: 75, // label settings here cascade unless overridden
- url: 'save-form.php',
- frame:true,
- bodyStyle:'padding:5px 5px 0',
- width: 700,
- renderTo: document.body,
- layout:'column', // arrange items in columns
- defaults: { // defaults applied to items
- layout: 'form',
- border: false,
- bodyStyle: 'padding:4px'
- },
- items: [{
- // Fieldset in Column 1
- xtype:'fieldset',
- columnWidth: 0.5,
- title: 'Fieldset 1',
- collapsible: true,
- autoHeight:true,
- defaults: {
- anchor: '-20' // leave room for error icon
- },
- defaultType: 'textfield',
- items :[{
- fieldLabel: 'Field 1'
- }, {
- fieldLabel: 'Field 2'
- }, {
- fieldLabel: 'Field 3'
- }
- ]
- },{
- // Fieldset in Column 2 - Panel inside
- xtype:'fieldset',
- title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
- autoHeight:true,
- columnWidth: 0.5,
- checkboxToggle: true,
- collapsed: true, // fieldset initially collapsed
- layout:'anchor',
- items :[{
- xtype: 'panel',
- anchor: '100%',
- title: 'Panel inside a fieldset',
- frame: true,
- height: 100
- }]
- }]
+Observable
+ Component
+ BoxComponent
+ Container
+ Panel
+ FieldSet
Class Ext.form.FieldSet
Package: Ext.form Defined In: FieldSet.js Class: FieldSet Extends: Panel
Standard container used for grouping items within a form.
+var form = new Ext.FormPanel({
+ title: 'Simple Form with FieldSets',
+ labelWidth: 75, // label settings here cascade unless overridden
+ url: 'save-form.php',
+ frame:true,
+ bodyStyle:'padding:5px 5px 0',
+ width: 700,
+ renderTo: document.body,
+ layout:'column', // arrange items in columns
+ defaults: { // defaults applied to items
+ layout: 'form',
+ border: false,
+ bodyStyle: 'padding:4px'
+ },
+ items: [{
+ // Fieldset in Column 1
+ xtype:'fieldset',
+ columnWidth: 0.5,
+ title: 'Fieldset 1',
+ collapsible: true,
+ autoHeight:true,
+ defaults: {
+ anchor: '-20' // leave room for error icon
+ },
+ defaultType: 'textfield',
+ items :[{
+ fieldLabel: 'Field 1'
+ }, {
+ fieldLabel: 'Field 2'
+ }, {
+ fieldLabel: 'Field 3'
+ }
+ ]
+ },{
+ // Fieldset in Column 2 - Panel inside
+ xtype:'fieldset',
+ title: 'Show Panel', // title, header, or checkboxToggle creates fieldset header
+ autoHeight:true,
+ columnWidth: 0.5,
+ checkboxToggle: true,
+ collapsed: true, // fieldset initially collapsed
+ layout:'anchor',
+ items :[{
+ xtype: 'panel',
+ anchor: '100%',
+ title: 'Panel inside a fieldset',
+ frame: true,
+ height: 100
+ }]
+ }]
});
Config Options
Config Options Defined By allowDomMove : BooleanWhether the component can move the Dom node when rendering (defaults to true). Component anchor : StringNote: this config is only used when this Component is rendered
by a Container which has been configured to use an Anc...Note: this config is only used when this Component is rendered
by a Container which has been configured to use an AnchorLayout (or subclass thereof).
@@ -56,7 +61,7 @@ based layout manager, for example:
- Ext.form.FormPanel
- specifying
layout: 'anchor' // or 'form', or 'absolute'
-See Ext.layout.AnchorLayout.anchor also.
BoxComponent animCollapse : Booleantrue to animate the transition when the panel is collapsed, false to skip the
+See Ext.layout.AnchorLayout.anchor also.
BoxComponent animCollapse : Booleantrue to animate the transition when the panel is collapsed, false to skip the
animation (defaults to false). FieldSet autoDestroy : BooleanIf true the container will automatically destroy any contained component that is removed from it, else
destruction mu...If true the container will automatically destroy any contained component that is removed from it, else
destruction must be handled manually (defaults to true). Container autoHeight : Booleantrue to use height:'auto', false to use fixed height (defaults to false).
@@ -147,7 +152,7 @@ element:
},
footerCfg: {
tag: 'h2',
- cls: 'x-panel-footer' // same as the Default class
+ cls: 'x-panel-footer', // same as the Default class
html: 'footer html'
},
footerCssClass: 'custom-footer', // additional css class, see addClass
@@ -178,13 +183,13 @@ an array of Ext.Button
If an item is configured with minWidth
or the Panel is configured with minButtonWidth
,
that width will be applied to the item. Panel bwrapCfg : Object Panel checkboxName : StringThe name to assign to the fieldset's checkbox if checkboxToggle = true
-(defaults to '[checkbox id]-checkbox'). FieldSet checkboxToggle : Mixedtrue to render a checkbox into the fieldset frame just
-in front of the legend to expand/collapse the fieldset when t...true to render a checkbox into the fieldset frame just
-in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
-to false).
-A DomHelper element spec may also be specified to create the checkbox.
-If true is specified, the default DomHelper config object used to create the element
+of this Panel's bwrap Element. See bodyCfg
also.
Panel checkboxName : StringThe name to assign to the fieldset's checkbox if checkboxToggle = true
+(defaults to '[checkbox id]-checkbox'). FieldSet checkboxToggle : Mixedtrue to render a checkbox into the fieldset frame just
+in front of the legend to expand/collapse the fieldset when th...true to render a checkbox into the fieldset frame just
+in front of the legend to expand/collapse the fieldset when the checkbox is toggled. (defaults
+to false).
+A DomHelper element spec may also be specified to create the checkbox.
+If true is specified, the default DomHelper config object used to create the element
is:
{tag: 'input', type: 'checkbox', name: this.checkboxName || this.id+'-checkbox'}
FieldSet clearCls : StringThe CSS class used to to apply to the special clearing div rendered
directly after each form field wrapper to provide...The CSS class used to to apply to the special clearing div rendered
directly after each form field wrapper to provide field clearing (defaults to
@@ -200,9 +205,9 @@ to enable closing in such situations. Defaults to false
.
An optional extra CSS class that will be added to this component's Element (defaults to ''). This can be
useful for adding customized styles to the component or any of its children using standard CSS rules. Component collapsed : Booleantrue
to render the panel collapsed, false
to render it expanded (defaults to
false
). Panel collapsedCls : StringA CSS class to add to the panel's element after it has been collapsed (defaults to
-'x-panel-collapsed'
). Panel collapsible : Booleantrue to make the fieldset collapsible and have the expand/collapse toggle button automatically
-rendered into the leg...true to make the fieldset collapsible and have the expand/collapse toggle button automatically
-rendered into the legend element, false to keep the fieldset statically sized with no collapse
+'x-panel-collapsed'
). Panel collapsible : Booleantrue to make the fieldset collapsible and have the expand/collapse toggle button automatically
+rendered into the lege...true to make the fieldset collapsible and have the expand/collapse toggle button automatically
+rendered into the legend element, false to keep the fieldset statically sized with no collapse
button (defaults to false). Another option is to configure checkboxToggle. FieldSet contentEl : StringOptional. Specify an existing HTML element, or the id of an existing HTML element to use as the content
for this comp...Optional. Specify an existing HTML element, or the id
of an existing HTML element to use as the content
for this component.
@@ -406,10 +411,10 @@ rules to style the specific instance of this component uniquely, and also to sel
sub-elements using this component's id as the parent.
Note: to avoid complications imposed by a unique id also see
itemId
and ref
.
-Note: to access the container of an item see ownerCt
.
Component itemCls : StringA css class to apply to the x-form-item of fields (see
-Ext.layout.FormLayout.fieldTpl for details).
-This property ...A css class to apply to the x-form-item of fields (see
-Ext.layout.FormLayout.fieldTpl for details).
+Note: to access the container of an item see ownerCt
.
Component itemCls : StringA css class to apply to the x-form-item of fields (see
+Ext.layout.FormLayout.fieldTpl for details).
+This property cas...A css class to apply to the x-form-item of fields (see
+Ext.layout.FormLayout.fieldTpl for details).
This property cascades to child containers. FieldSet itemId : StringAn itemId can be used as an alternative way to get a reference to a component
when no object reference is available. ... Component hidden : BooleanTrue if this component is hidden. Read-only. Component initialConfig : ObjectThis Component's initial configuration specification. Read-only. Component items : MixedCollectionThe collection of components in this container as a Ext.util.MixedCollection Container ownerCt : Ext.ContainerThis Component's owner Container (defaults to undefined, and is set automatically when
this Component is added to a C... Component private : ObjectWe can only lay out if there is a view area in which to layout.
-display:none on the layout target, *or any of its par...We can only lay out if there is a view area in which to layout.
-display:none on the layout target, *or any of its parent elements* will mean it has no view area. Container refOwner : Ext.ContainerThe ancestor Container into which the ref reference was inserted if this Component
+Note: to access items within the Container see itemId.
Component refOwner : Ext.ContainerThe ancestor Container into which the ref reference was inserted if this Component
is a child of a Container, and has...The ancestor Container into which the ref reference was inserted if this Component
is a child of a Container, and has been configured with a ref
. Component rendered : BooleanTrue if this component has been rendered. Read-only. Component
Public Methods
Method Defined By FieldSet( Object config
)
- Parameters:config
: ObjectConfiguration options
Returns:- void
FieldSet add( Object/Array component
, Object (Optional)
, Object (Optional)
)
+ Parameters:config
: ObjectConfiguration options
Returns:- void
FieldSet add( ...Object/Array component
)
:
- Ext.ComponentAdds Component(s) to this Container.
+ Ext.Component/ArrayAdds Component(s) to this Container.
Description :
<ul class="mdetail-params">
Fires the beforeadd event before addin...Adds Component(s) to this Container.
@@ -835,8 +838,8 @@ tb.BorderLayout
for more details.
-Parameters:component
: Object/ArrayEither a single component or an Array of components to add. See
-items
for additional information.
(Optional)
: Objectcomponent_2(Optional)
: Objectcomponent_n
Returns:Ext.Component
component The Component (or config object) that was added.
Container addButton( String/Object config
, Function handler
, Object scope
)
+Parameters:component
: ...Object/ArrayEither one or more Components to add or an Array of Components to add. See
+items
for additional information.
Returns:Ext.Component/Array
The Components that were added.
Container addButton( String/Object config
, Function handler
, Object scope
)
:
Ext.ButtonAdds a button to this panel. Note that this method must be called prior to rendering. The preferred
approach is to ...Adds a button to this panel. Note that this method must be called prior to rendering. The preferred
@@ -900,12 +903,12 @@ Or a shorthand syntax:
scope: this
});Returns:- void
Observable applyToMarkup( String/HTMLElement el
)
:
- voidApply this component to existing markup that is valid. With this function, no call to render() is required.Apply this component to existing markup that is valid. With this function, no call to render() is required.Parameters:el
: String/HTMLElement
Returns:- void
Component bubble( Function fn
, [Object scope
], [Array args
] )
+ voidApply this component to existing markup that is valid. With this function, no call to render() is required.Apply this component to existing markup that is valid. With this function, no call to render() is required.Parameters:el
: String/HTMLElement
Returns:- void
Component bubble( Function fn
, [Object scope
], [Array args
] )
:
- Ext.ContainerBubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of
+ Ext.ComponentBubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of...Bubbles up the component/container heirarchy, calling the specified function with each component. The scope (this) of
function call will be the scope provided or the current component. The arguments to the function
will be the args provided or the current component. If the function returns false at any point,
-the bubble is stopped.Parameters:fn
: FunctionThe function to callscope
: Object(optional) The scope of the function (defaults to current node)args
: Array(optional) The args to call the function with (default to passing the current component)
Returns:Ext.Container
this
Container cascade( Function fn
, [Object scope
], [Array args
] )
+the bubble is stopped.Parameters:fn
: FunctionThe function to callscope
: Object(optional) The scope of the function (defaults to current node)args
: Array(optional) The args to call the function with (default to passing the current component)
Returns:Ext.Component
this
Component cascade( Function fn
, [Object scope
], [Array args
] )
:
Ext.ContainerCascades down the component/container heirarchy from this component (called first), calling the specified function wi...Cascades down the component/container heirarchy from this component (called first), calling the specified function with
each component. The scope (this) of
@@ -936,38 +939,38 @@ calc layouts as required (defaults to false, which calls doLayout recursively fo
:
Ext.ComponentEnable this component and fire the 'enable' event.Enable this component and fire the 'enable' event.Parameters:- None.
Returns:Ext.Component
this
Component enableBubble( String/Array events
)
:
- voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget() if present...Enables events fired by this Observable to bubble up an owner hierarchy by calling
-this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
-This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
-implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
-access the required target more quickly.
-Example:
Ext.override(Ext.form.Field, {
- // Add functionality to Field's initComponent to enable the change event to bubble
- initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
- this.enableBubble('change');
- }),
-
- // We know that we want Field's events to bubble directly to the FormPanel.
- getBubbleTarget : function() {
- if (!this.formPanel) {
- this.formPanel = this.findParentByType('form');
- }
- return this.formPanel;
- }
-});
-
-var myForm = new Ext.formPanel({
- title: 'User Details',
- items: [{
- ...
- }],
- listeners: {
- change: function() {
- // Title goes red if form has been modified.
- myForm.header.setStyle('color', 'red');
- }
- }
+ voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present....Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget()
if present. There is no implementation in the Observable base class.
+This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.
+Example:
Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+ }
+});
+
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+ }
});
Parameters:events
: String/ArrayThe event name to bubble, or an Array of event names.
Returns:- void
Observable expand( Boolean animate
)
:
Ext.PanelExpands the panel body so that it becomes visible. Fires the beforeexpand event which will
@@ -988,9 +991,11 @@ the default), or true to check whether this Component is directly of the specifi
:
Ext.ContainerFind a container above this component at any level by a custom function. If the passed function returns
true, the con...Find a container above this component at any level by a custom function. If the passed function returns
-true, the container will be returned.Parameters:fn
: FunctionThe custom function to call with the arguments (container, this component).
Returns:Ext.Container
The first Container for which the custom function returns true
Component findParentByType( String/Class xtype
)
+true, the container will be returned.Parameters:fn
: FunctionThe custom function to call with the arguments (container, this component).
Returns:Ext.Container
The first Container for which the custom function returns true
Component findParentByType( String/Ext.Component/Class xtype
, [Boolean shallow
] )
:
- Ext.ContainerFind a container above this component at any level by xtype or classFind a container above this component at any level by xtype or classParameters:xtype
: String/ClassThe xtype string for a component, or the class of the component directly
Returns:Ext.Container
The first Container which matches the given xtype or class
Component fireEvent( String eventName
, Object... args
)
+ Ext.ContainerFind a container above this component at any level by xtype or classFind a container above this component at any level by xtype or classParameters:xtype
: String/Ext.Component/ClassThe xtype to check for this Component. Note that the the component can either be an instance
+or a component class:shallow
: Boolean(optional) False to check whether this Component is descended from the xtype (this is
+the default), or true to check whether this Component is directly of the specified xtype.
Returns:Ext.Container
The first Container which matches the given xtype or class
Component fireEvent( String eventName
, Object... args
)
:
BooleanFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Obse...Fires the specified event with the passed parameters (minus the event name).
@@ -1030,7 +1035,9 @@ or use a render listener directly:new Ext.Panel({
},
single: true // Remove the listener after first invocation
}
-});
Parameters:- None.
Returns:Ext.Element
The Element which encapsulates this Component.
Component getFrameHeight()
+});Parameters:- None.
Returns:Ext.Element
The Element which encapsulates this Component.
Component getFooterToolbar()
+ :
+ Ext.Toolbar Panel getFrameHeight()
:
NumberReturns the height in pixels of the framing elements of this panel (including any top and bottom bars and
header and ...Returns the height in pixels of the framing elements of this panel (including any top and bottom bars and
@@ -1130,7 +1137,7 @@ property to the registered type of the Component wanted.
For a list of all available xtypes, see Ext.Component.Returns:Ext.Component
component The Component (or config object) that was
inserted with the Container's default config values applied.
Container isVisible()
:
- BooleanReturns true if this component is visible.Returns true if this component is visible.Parameters:- None.
Returns:Boolean
True if this component is visible, false otherwise.
Component isXType( String xtype
, [Boolean shallow
] )
+ BooleanReturns true if this component is visible.Returns true if this component is visible.Parameters:- None.
Returns:Boolean
True if this component is visible, false otherwise.
Component isXType( String/Ext.Component/Class xtype
, [Boolean shallow
] )
:
BooleanTests whether or not this Component is of a specific xtype. This can test whether this Component is descended
from th...Tests whether or not this Component is of a specific xtype. This can test whether this Component is descended
@@ -1142,7 +1149,11 @@ to participate in determination of inherited xtypes.
var t = new Ext.form.TextField();
var isText = t.isXType('textfield'); // true
var isBoxSubclass = t.isXType('box'); // true, descended from BoxComponent
-var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instance
Parameters:xtype
: StringThe xtype to check for this Componentshallow
: Boolean(optional) False to check whether this Component is descended from the xtype (this is
+var isBoxInstance = t.isXType('box', true); // false, not a direct BoxComponent instanceParameters:xtype
: String/Ext.Component/ClassThe xtype to check for this Component. Note that the the component can either be an instance
+or a component class:
+var c = new Ext.Component();
+console.log(c.isXType(c));
+console.log(c.isXType(Ext.Component));
shallow
: Boolean(optional) False to check whether this Component is descended from the xtype (this is
the default), or true to check whether this Component is directly of the specified xtype.
Returns:Boolean
True if this component descends from the specified xtype, false otherwise.
Component load( Object/String/Function config
)
:
Ext.PanelLoads this content panel immediately with content returned from an XHR call.Loads this content panel immediately with content returned from an XHR call.Parameters:config
: Object/String/FunctionA config object containing any of the following options:
@@ -1185,9 +1196,9 @@ is the scope (this
reference) in which the handler function is exec
voidAppends an event handler to this object (shorthand for addListener.)Appends an event handler to this object (shorthand for addListener.)Parameters:eventName
: StringThe type of event to listen forhandler
: FunctionThe method the event invokesscope
: Object(optional) The scope (this
reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event.options
: Object(optional) An object containing handler configuration.
Returns:- void
Observable onCheckClick()
:
- voidThis function is called by the fieldset's checkbox when it is toggled (only applies when
-checkboxToggle = true). Th...This function is called by the fieldset's checkbox when it is toggled (only applies when
-checkboxToggle = true). This method should never be called externally, but can be
+ voidThis function is called by the fieldset's checkbox when it is toggled (only applies when
+checkboxToggle = true). Thi...This function is called by the fieldset's checkbox when it is toggled (only applies when
+checkboxToggle = true). This method should never be called externally, but can be
overridden to provide custom behavior when the checkbox is toggled if needed.Parameters:- None.
Returns:- void
FieldSet previousSibling()
:
Ext.ComponentReturns the previous component in the owning containerReturns the previous component in the owning containerParameters:- None.
Returns:Ext.Component
Component purgeListeners()
@@ -1240,10 +1251,10 @@ events fired during event suspension will be sent to any listeners now.Sets the overflow on the content element of the component.Sets the overflow on the content element of the component.Parameters:scroll
: BooleanTrue to allow the Component to auto scroll.
Returns:Ext.BoxComponent
this
BoxComponent setDisabled( Boolean disabled
)
:
- Ext.ComponentConvenience function for setting disabled/enabled by boolean.Convenience function for setting disabled/enabled by boolean.Parameters:disabled
: Boolean
Returns:Ext.Component
this
Component setHeight( Number height
)
+ Ext.ComponentConvenience function for setting disabled/enabled by boolean.Convenience function for setting disabled/enabled by boolean.Parameters:disabled
: Boolean
Returns:Ext.Component
this
Component setHeight( Mixed height
)
:
- Ext.BoxComponentSets the height of the component. This method fires the resize event.Sets the height of the component. This method fires the resize event.Parameters:height
: NumberThe new height to set. This may be one of:
-- A Number specifying the new height in the Element's Ext.Element.defaultUnits (by default, pixels).
+ Ext.BoxComponentSets the height of the component. This method fires the resize event.Sets the height of the component. This method fires the resize event.Parameters:height
: MixedThe new height to set. This may be one of:
+- A Number specifying the new height in the Element's defaultUnits (by default, pixels).
- A String used to set the CSS height style.
- undefined to leave the height unchanged.
Returns:Ext.BoxComponent
this
BoxComponent setPagePosition( Number x
, Number y
)
@@ -1276,10 +1287,10 @@ In order to be able to set the title, a header eleme... Panel setVisible( Boolean visible
)
:
- Ext.ComponentConvenience function to hide or show this component by boolean.Convenience function to hide or show this component by boolean.Parameters:visible
: BooleanTrue to show, false to hide
Returns:Ext.Component
this
Component setWidth( Number width
)
+ Ext.ComponentConvenience function to hide or show this component by boolean.Convenience function to hide or show this component by boolean.Parameters:visible
: BooleanTrue to show, false to hide
Returns:Ext.Component
this
Component setWidth( Mixed width
)
:
- Ext.BoxComponentSets the width of the component. This method fires the resize event.Sets the width of the component. This method fires the resize event.Parameters:width
: NumberThe new width to setThis may be one of:
-- A Number specifying the new width in the Element's Ext.Element.defaultUnits (by default, pixels).
+ Ext.BoxComponentSets the width of the component. This method fires the resize event.Sets the width of the component. This method fires the resize event.Parameters:width
: MixedThe new width to set. This may be one of:
+- A Number specifying the new width in the Element's defaultUnits (by default, pixels).
- A String used to set the CSS width style.
Returns:Ext.BoxComponent
this
BoxComponent show()
: