X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/output/Ext.Viewport.html diff --git a/docs/output/Ext.Viewport.html b/docs/output/Ext.Viewport.html index 2cd7f204..11c77554 100644 --- a/docs/output/Ext.Viewport.html +++ b/docs/output/Ext.Viewport.html @@ -1,51 +1,51 @@ -
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 +676,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 +706,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.
)
:
@@ -799,38 +797,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
] )
@@ -1059,10 +1057,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 +1087,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()
: