Roo.util.Observable
Roo.XComponent 

		   

Class Roo.XComponent

Package:Roo
Defined In: Roo/XComponent.js.
Class:XComponent
Extends: Roo.util.Observable
A delayed Element creator...
Or a way to group chunks of interface together.
technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
used in conjunction with XComponent.build() it will create an instance of each element,
then call addxtype() to build the User interface.

Mypart.xyx = new Roo.XComponent({

parent : 'Mypart.xyz', // empty == document.element.!!
order : '001',
name : 'xxxx'
region : 'xxxx'
disabled : function() {}

tree : function() { // return an tree of xtype declared components
var MODULE = this;
return
{
xtype : 'NestedLayoutPanel',
// technicall
}
]
})


It can be used to build a big heiracy, with parent etc.
or you can just use this to render a single compoent to a dom element
MYPART.render(Roo.Element | String(id) | dom_element )


Usage patterns.

Classic Roo

Roo is designed primarily as a single page application, so the UI build for a standard interface will
expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.

Each sub module is expected to have a parent pointing to the class name of it's parent module.

When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
- if mulitple topModules exist, the last one is defined as the top module.

Embeded Roo

When the top level or multiple modules are to embedded into a existing HTML page,
the parent element can container 'id' of the element where the module will be drawn.

Bootstrap Roo

Unlike classic Roo, the bootstrap tends not to be used as a single page.
it relies more on a include mechanism, where sub modules are included into an outer page.
This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )

Bootstrap Roo Included elements

Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
hence confusing the component builder as it thinks there are multiple top level elements.
Class Comments / Notes => [Add Your comment/notes about this class]
Config Options (Usually are also Properties)
Options Defined By
Public Properties
Property Description Defined By
 
Roo.XComponent.buildCompleted : Boolean
True when the builder has completed building the interface.
True when the builder has completed building the interface.
Roo.XComponent
 
Roo.XComponent.build_from_html : true (default false)
Build elements from html - used by bootstrap HTML stuff
- this is cleared after build is completed
Build elements from html - used by bootstrap HTML stuff
- this is cleared after build is completed
Roo.XComponent
 
Roo.XComponent.elmodules : of Roo.XComponent
array of modules to be created by which use ID
array of modules to be created by which use ID
Roo.XComponent
 
Roo.XComponent.event :
Event Object.
Event Object.
Roo.XComponent
 
Roo.XComponent.hideProgress : Boolean
true to disable the building progress bar.
true to disable the building progress bar.. usefull on single page renders.
Roo.XComponent
 
Roo.XComponent.modules : of Roo.XComponent
array of modules to be created by registration system.
array of modules to be created by registration system.
Roo.XComponent
 
Roo.XComponent.on :
wrapper for event.on - aliased later.
wrapper for event.on - aliased later..
Typically use to register a event handler for register:

eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
Roo.XComponent
 
Roo.XComponent.topModule : Object
the upper most module - uses document.element as it's constructor.
the upper most module - uses document.element as it's constructor.
Roo.XComponent
Public Methods
Method Defined By
Events
Event Defined By
Documentation generated by Introspection Doc Generator on Mon Nov 24 2014 12:40:12 GMT+0800 (HKT) Based on JsDoc Toolkit