X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.form.FieldSet.html diff --git a/docs/output/Ext.form.FieldSet.html b/docs/output/Ext.form.FieldSet.html index 638ffe15..d9342008 100644 --- a/docs/output/Ext.form.FieldSet.html +++ b/docs/output/Ext.form.FieldSet.html @@ -1,54 +1,54 @@ -
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 +56,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).
@@ -178,13 +178,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 +200,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 +406,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 +833,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
@@ -936,38 +934,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
@@ -1030,7 +1028,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
@@ -1185,9 +1185,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 +1240,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 +1276,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()
: