X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/docs/output/Ext.Viewport.html?ds=inline diff --git a/docs/output/Ext.Viewport.html b/docs/output/Ext.Viewport.html index 2cd7f204..83e283f9 100644 --- a/docs/output/Ext.Viewport.html +++ b/docs/output/Ext.Viewport.html @@ -1,51 +1,55 @@ -
Observable Component BoxComponent Container Viewport
Package: | Ext |
Defined In: | Viewport.js |
Class: | Viewport |
Extends: | Container |
A specialized container representing the viewable application area (the browser viewport).
-The Viewport renders itself to the document body, and automatically sizes itself to the size of -the browser viewport and manages window resizing. There may only be one Viewport created -in a page. Inner layouts are available by virtue of the fact that all Panels -added to the Viewport, either through its items, or through the items, or the add -method of any of its child Panels may themselves have a layout.
-The Viewport does not provide scrolling, so child Panels within the Viewport should provide -for scrolling if needed using the autoScroll config.
-An example showing a classic application border layout:
new Ext.Viewport({
- layout: 'border',
- items: [{
- region: 'north',
- html: '<h1 class="x-panel-header">Page Title</h1>',
- autoHeight: true,
- border: false,
- margins: '0 0 5 0'
- }, {
- region: 'west',
- collapsible: true,
- title: 'Navigation',
- width: 200
- // the west region might typically utilize a TreePanel or a Panel with Accordion layout
- }, {
- region: 'south',
- title: 'Title for Panel',
- collapsible: true,
- html: 'Information goes here',
- split: true,
- height: 100,
- minHeight: 100
- }, {
- region: 'east',
- title: 'Title for the Grid Panel',
- collapsible: true,
- split: true,
- width: 200,
- xtype: 'grid',
- // remaining grid configuration not shown ...
- // notice that the GridPanel is added directly as the region
- // it is not "overnested" inside another Panel
- }, {
- region: 'center',
- xtype: 'tabpanel', // TabPanel itself has no title
- items: {
- title: 'Default Tab',
- html: 'The first tab\'s content. Others may be added dynamically'
- }
- }]
+Observable
+ Component
+ BoxComponent
+ Container
+ Viewport
Class Ext.Viewport
Package: Ext Defined In: Viewport.js Class: Viewport Extends: Container
A specialized container representing the viewable application area (the browser viewport).
+The Viewport renders itself to the document body, and automatically sizes itself to the size of
+the browser viewport and manages window resizing. There may only be one Viewport created
+in a page. Inner layouts are available by virtue of the fact that all Panels
+added to the Viewport, either through its items, or through the items, or the add
+method of any of its child Panels may themselves have a layout.
+The Viewport does not provide scrolling, so child Panels within the Viewport should provide
+for scrolling if needed using the autoScroll config.
+An example showing a classic application border layout:
new Ext.Viewport({
+ layout: 'border',
+ items: [{
+ region: 'north',
+ html: '<h1 class="x-panel-header">Page Title</h1>',
+ autoHeight: true,
+ border: false,
+ margins: '0 0 5 0'
+ }, {
+ region: 'west',
+ collapsible: true,
+ title: 'Navigation',
+ width: 200
+ // the west region might typically utilize a TreePanel or a Panel with Accordion layout
+ }, {
+ region: 'south',
+ title: 'Title for Panel',
+ collapsible: true,
+ html: 'Information goes here',
+ split: true,
+ height: 100,
+ minHeight: 100
+ }, {
+ region: 'east',
+ title: 'Title for the Grid Panel',
+ collapsible: true,
+ split: true,
+ width: 200,
+ xtype: 'grid',
+ // remaining grid configuration not shown ...
+ // notice that the GridPanel is added directly as the region
+ // it is not "overnested" inside another Panel
+ }, {
+ region: 'center',
+ xtype: 'tabpanel', // TabPanel itself has no title
+ items: {
+ title: 'Default Tab',
+ html: 'The first tab\'s content. Others may be added dynamically'
+ }
+ }]
});
Config Options
Config Options Defined By activeItem : String/NumberA string component id or the numeric index of the component that should be initially activated within the
container's...A string component id or the numeric index of the component that should be initially activated within the
container's layout on render. For example, activeItem: 'item-1' or activeItem: 0 (index 0 = the first
@@ -676,14 +680,12 @@ config for a suggestion, or use a render listener directly:new
See also getEl
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 Viewport( Object config
)
- Create a new ViewportCreate a new ViewportParameters:config
: ObjectThe config object
Returns:- void
Viewport add( Object/Array component
, Object (Optional)
, Object (Optional)
)
+ Create a new ViewportCreate a new ViewportParameters:config
: ObjectThe config object
Returns:- void
Viewport 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.
@@ -708,8 +710,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 addClass( string cls
)
+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 addClass( string cls
)
:
Ext.ComponentAdds a CSS class to the component's underlying element.Adds a CSS class to the component's underlying element.Parameters:cls
: stringThe CSS class name to add
Returns:Ext.Component
this
Component addEvents( Object|String o
, string Optional.
)
:
@@ -768,12 +770,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
@@ -799,38 +801,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 find( String prop
, String value
)
:
ArrayFind a component under this container at any level by propertyFind a component under this container at any level by propertyParameters:prop
: Stringvalue
: String
Returns:Array
Array of Ext.Components
Container findBy( Function fn
, [Object scope
] )
@@ -846,9 +848,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).
@@ -970,7 +974,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
@@ -982,7 +986,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 mon( Observable|Element item
, Object|String ename
, Function fn
, Object scope
, Object opt
)
:
voidAdds listeners to any Observable object (or Elements) which are automatically removed when this Component
@@ -1059,10 +1067,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
)
@@ -1089,10 +1097,10 @@ This may be one of:
undefined
to leave the height unchanged.
Returns:Ext.BoxComponent
this
BoxComponent 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()
: