megakill
24 Jan 2012, 6:09 PM
Hello,
I'm tryting to get the Three.js WebGL framework working within ExtJS. The problem occurs when I try to add the rendering canvas into a Component's body, e. g.:
Ext.define('HP.Stage',{
extend: 'Ext.Component',
alias: 'stage',
initComponent: function()
{
this.callParent(arguments);
var renderer;
renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 640);
this.html = renderer.domElement;
}
});
A code like this would be expected to insert just a simple:
<canvas width="x" height="y">
but what is really inserted doesn't make sense:
<div clientleft="0" scrollheight="0" firstelementchild offsetwidth="0" nodetype="1" iscontenteditable="false" hidden="false" previouselementsibling parentelement webkitdropzone offsetparent nodevalue lastelementchild height="640" offsetleft="0" classname prefix width="800" previoussibling namespaceuri="http://www.w3.org/1999/xhtml" localname="canvas" id lastchild childelementcount="0" innertext clientheight="0" textcontent nextsibling scrollwidth="0" offsetheight="0" clientwidth="0" nodename="CANVAS" style="cssText:;length:0;parentRule:null;getPropertyValue:function getPropertyValue() { [native code] };getPropertyCSSValue:function getPropertyCSSValue() { [native code] };removeProperty:function removeProperty() { [native code] };getPropertyPriority:function getPropertyPriority() { [native code] };setProperty:function setProperty() { [native code] };item:function item() { [native code] };getPropertyShorthand:function getPropertyShorthand() { [native code] };isPropertyImplicit:function isPropertyImplicit() { [native code] };" lang scrolltop="0" offsettop="0" childnodes="length:0;item:function item() { [native code] };" baseuri nextelementsibling classlist="length:0;item:function item() { [native code] };contains:function contains() { [native code] };add:function add() { [native code] };remove:function remove() { [native code] };toggle:function toggle() { [native code] };" title firstchild attributes="0:[object Attr];1:[object Attr];length:2;getNamedItem:function getNamedItem() { [native code] };removeNamedItem:function removeNamedItem() { [native code] };item:function item() { [native code] };getNamedItemNS:function getNamedItemNS() { [native code] };removeNamedItemNS:function removeNamedItemNS() { [native code] };setNamedItem:function setNamedItem() { [native code] };setNamedItemNS:function setNamedItemNS() { [native code] };" dataset outertext parentnode clienttop="0" tabindex="-1" contenteditable="inherit" dir scrollleft="0" ownerdocument="head:[object HTMLHeadElement];images:[object HTMLCollection];nodeType:9;embeds:[object HTMLCollection];linkColor:;doctype:[object DocumentType];parentElement:null;bgColor:;styleSheets:[object StyleSheetList];localName:null;referrer:;ownerDocument:null;defaultCharset:windows-1250;URL:http://localhost/hp-client/public/desktop/;documentURI:http://localhost/hp-client/public/desktop/;webkitCurrentFullScreenElement:null;height:635;designMode:off;readyState:complete;lastModified:01/24/2012 02:40:07;webkitVisibilityState:visible;preferredStylesheetSet:null;prefix:null;width:1280;xmlEncoding:null;previousSibling:null;characterSet:UTF-8;plugins:[object HTMLCollection];fgColor:;namespaceURI:null;activeElement:[object HTMLBodyElement];nodeValue:null;lastChild:[object HTMLHtmlElement];xmlStandalone:false;textContent:null;nextSibling:null;domain:localhost;applets:[object HTMLCollection];charset:UTF-8;nodeName:#document;webkitFullScreenKeyboardInputAllowed:false;cookie:;childNodes:[object NodeList];baseURI:http://localhost/hp-client/public/desktop/;inputEncoding:UTF-8;webkitIsFullScreen:false;implementation:[object DOMImplementation];compatMode:CSS1Compat;links:[object HTMLCollection];title:Hedron Power;firstChild:[object DocumentType];attributes:null;defaultView:[object DOMWindow];vlinkColor:;xmlVersion:null;selectedStylesheetSet:null;webkitHidden:false;alinkColor:;location:http://localhost/hp-client/public/desktop/;scripts:[object HTMLCollection];documentElement:[object HTMLHtmlElement];dir:;parentNode:null;anchors:[object HTMLCollection];forms:[object HTMLCollection];body:[object HTMLBodyElement];all:[object HTMLAllCollection];id:ext-document;open:function open() { [native code] };close:function close() { [native code] };write:function write() { [native code] };writeln:function writeln() { [native code] };clear:function clear() { [native code] };captureEvents:function captureEvents() { [native code] };releaseEvents:function releaseEvents() { [native code] };hasFocus:function hasFocus() { [native code] };createElement:function createElement() { [native code] };createDocumentFragment:function createDocumentFragment() { [native code] };createTextNode:function createTextNode() { [native code] };createComment:function createComment() { [native code] };createCDATASection:function createCDATASection() { [native code] };createProcessingInstruction:function createProcessingInstruction() { [native code] };createAttribute:function createAttribute() { [native code] };createEntityReference:function createEntityReference() { [native code] };getElementsByTagName:function getElementsByTagName() { [native code] };createElementNS:function createElementNS() { [native code] };createAttributeNS:function createAttributeNS() { [native code] };getElementsByTagNameNS:function getElementsByTagNameNS() { [native code] };getElementById:function getElementById() { [native code] };createEvent:function createEvent() { [native code] };createRange:function createRange() { [native code] };evaluate:function evaluate() { [native code] };execCommand:function execCommand() { [native code] };queryCommandEnabled:function queryCommandEnabled() { [native code] };queryCommandIndeterm:function queryCommandIndeterm() { [native code] };queryCommandState:function queryCommandState() { [native code] };queryCommandSupported:function queryCommandSupported() { [native code] };queryCommandValue:function queryCommandValue() { [native code] };getElementsByName:function getElementsByName() { [native code] };elementFromPoint:function elementFromPoint() { [native code] };caretRangeFromPoint:function caretRangeFromPoint() { [native code] };getSelection:function getSelection() { [native code] };getCSSCanvasContext:function getCSSCanvasContext() { [native code] };getElementsByClassName:function getElementsByClassName() { [native code] };querySelector:function querySelector() { [native code] };querySelectorAll:function querySelectorAll() { [native code] };importNode:function importNode() { [native code] };adoptNode:function adoptNode() { [native code] };createNodeIterator:function createNodeIterator() { [native code] };createTreeWalker:function createTreeWalker() { [native code] };getOverrideStyle:function getOverrideStyle() { [native code] };createExpression:function createExpression() { [native code] };createNSResolver:function createNSResolver() { [native code] };webkitCancelFullScreen:function webkitCancelFullScreen() { [native code] };insertBefore:function insertBefore() { [native code] };replaceChild:function replaceChild() { [native code] };removeChild:function removeChild() { [native code] };appendChild:function appendChild() { [native code] };hasChildNodes:function hasChildNodes() { [native code] };cloneNode:function cloneNode() { [native code] };normalize:function normalize() { [native code] };isSupported:function isSupported() { [native code] };hasAttributes:function hasAttributes() { [native code] };lookupPrefix:function lookupPrefix() { [native code] };isDefaultNamespace:function isDefaultNamespace() { [native code] };lookupNamespaceURI:function lookupNamespaceURI() { [native code] };addEventListener:function addEventListener() { [native code] };removeEventListener:function removeEventListener() { [native code] };isSameNode:function isSameNode() { [native code] };isEqualNode:function isEqualNode() { [native code] };compareDocumentPosition:function compareDocumentPosition() { [native code] };contains:function contains() { [native code] };dispatchEvent:function dispatchEvent() { [native code] };ELEMENT_NODE:1;ATTRIBUTE_NODE:2;TEXT_NODE:3;CDATA_SECTION_NODE:4;ENTITY_REFERENCE_NODE:5;ENTITY_NODE:6;PROCESSING_INSTRUCTION_NODE:7;COMMENT_NODE:8;DOCUMENT_NODE:9;DOCUMENT_TYPE_NODE:10;DOCUMENT_FRAGMENT_NODE:11;NOTATION_NODE:12;DOCUMENT_POSITION_DISCONNECTED:1;DOCUMENT_POSITION_PRECEDING:2;DOCUMENT_POSITION_FOLLOWING:4;DOCUMENT_POSITION_CONTAINS:8;DOCUMENT_POSITION_CONTAINED_BY:16;DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC:32;" spellcheck="true" draggable="false" todataurl="function toDataURL() { [native code] }" getcontext="function getContext() { [native code] }" insertadjacenttext="function insertAdjacentText() { [native code] }" insertadjacentelement="function insertAdjacentElement() { [native code] }" getattribute="function getAttribute() { [native code] }" setattribute="function setAttribute() { [native code] }" removeattribute="function removeAttribute() { [native code] }" getattributenode="function getAttributeNode() { [native code] }" getattributens="function getAttributeNS() { [native code] }" setattributens="function setAttributeNS() { [native code] }" removeattributens="function removeAttributeNS() { [native code] }" getattributenodens="function getAttributeNodeNS() { [native code] }" hasattribute="function hasAttribute() { [native code] }" hasattributens="function hasAttributeNS() { [native code] }" focus="function focus() { [native code] }" blur="function blur() { [native code] }" scrollintoview="function scrollIntoView() { [native code] }" scrollintoviewifneeded="function scrollIntoViewIfNeeded() { [native code] }" scrollbylines="function scrollByLines() { [native code] }" scrollbypages="function scrollByPages() { [native code] }" getelementsbyclassname="function getElementsByClassName() { [native code] }" queryselector="function querySelector() { [native code] }" queryselectorall="function querySelectorAll() { [native code] }" webkitmatchesselector="function webkitMatchesSelector() { [native code] }" getclientrects="function getClientRects() { [native code] }" getboundingclientrect="function getBoundingClientRect() { [native code] }" setattributenode="function setAttributeNode() { [native code] }" removeattributenode="function removeAttributeNode() { [native code] }" setattributenodens="function setAttributeNodeNS() { [native code] }" webkitrequestfullscreen="function webkitRequestFullScreen() { [native code] }" allow_keyboard_input="1" insertbefore="function insertBefore() { [native code] }" replacechild="function replaceChild() { [native code] }" removechild="function removeChild() { [native code] }" appendchild="function appendChild() { [native code] }" haschildnodes="function hasChildNodes() { [native code] }" clonenode="function cloneNode() { [native code] }" normalize="function normalize() { [native code] }" issupported="function isSupported() { [native code] }" hasattributes="function hasAttributes() { [native code] }" lookupprefix="function lookupPrefix() { [native code] }" isdefaultnamespace="function isDefaultNamespace() { [native code] }" lookupnamespaceuri="function lookupNamespaceURI() { [native code] }" addeventlistener="function addEventListener() { [native code] }" removeeventlistener="function removeEventListener() { [native code] }" issamenode="function isSameNode() { [native code] }" isequalnode="function isEqualNode() { [native code] }" comparedocumentposition="function compareDocumentPosition() { [native code] }" contains="function contains() { [native code] }" dispatchevent="function dispatchEvent() { [native code] }" element_node="1" attribute_node="2" text_node="3" cdata_section_node="4" entity_reference_node="5" entity_node="6" processing_instruction_node="7" comment_node="8" document_node="9" document_type_node="10" document_fragment_node="11" notation_node="12" document_position_disconnected="1" document_position_preceding="2" document_position_following="4" document_position_contains="8" document_position_contained_by="16" document_position_implementation_specific="32">
Anybody understood what's going on here? How to fix it?
Thanks for any help...
I'm tryting to get the Three.js WebGL framework working within ExtJS. The problem occurs when I try to add the rendering canvas into a Component's body, e. g.:
Ext.define('HP.Stage',{
extend: 'Ext.Component',
alias: 'stage',
initComponent: function()
{
this.callParent(arguments);
var renderer;
renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 640);
this.html = renderer.domElement;
}
});
A code like this would be expected to insert just a simple:
<canvas width="x" height="y">
but what is really inserted doesn't make sense:
<div clientleft="0" scrollheight="0" firstelementchild offsetwidth="0" nodetype="1" iscontenteditable="false" hidden="false" previouselementsibling parentelement webkitdropzone offsetparent nodevalue lastelementchild height="640" offsetleft="0" classname prefix width="800" previoussibling namespaceuri="http://www.w3.org/1999/xhtml" localname="canvas" id lastchild childelementcount="0" innertext clientheight="0" textcontent nextsibling scrollwidth="0" offsetheight="0" clientwidth="0" nodename="CANVAS" style="cssText:;length:0;parentRule:null;getPropertyValue:function getPropertyValue() { [native code] };getPropertyCSSValue:function getPropertyCSSValue() { [native code] };removeProperty:function removeProperty() { [native code] };getPropertyPriority:function getPropertyPriority() { [native code] };setProperty:function setProperty() { [native code] };item:function item() { [native code] };getPropertyShorthand:function getPropertyShorthand() { [native code] };isPropertyImplicit:function isPropertyImplicit() { [native code] };" lang scrolltop="0" offsettop="0" childnodes="length:0;item:function item() { [native code] };" baseuri nextelementsibling classlist="length:0;item:function item() { [native code] };contains:function contains() { [native code] };add:function add() { [native code] };remove:function remove() { [native code] };toggle:function toggle() { [native code] };" title firstchild attributes="0:[object Attr];1:[object Attr];length:2;getNamedItem:function getNamedItem() { [native code] };removeNamedItem:function removeNamedItem() { [native code] };item:function item() { [native code] };getNamedItemNS:function getNamedItemNS() { [native code] };removeNamedItemNS:function removeNamedItemNS() { [native code] };setNamedItem:function setNamedItem() { [native code] };setNamedItemNS:function setNamedItemNS() { [native code] };" dataset outertext parentnode clienttop="0" tabindex="-1" contenteditable="inherit" dir scrollleft="0" ownerdocument="head:[object HTMLHeadElement];images:[object HTMLCollection];nodeType:9;embeds:[object HTMLCollection];linkColor:;doctype:[object DocumentType];parentElement:null;bgColor:;styleSheets:[object StyleSheetList];localName:null;referrer:;ownerDocument:null;defaultCharset:windows-1250;URL:http://localhost/hp-client/public/desktop/;documentURI:http://localhost/hp-client/public/desktop/;webkitCurrentFullScreenElement:null;height:635;designMode:off;readyState:complete;lastModified:01/24/2012 02:40:07;webkitVisibilityState:visible;preferredStylesheetSet:null;prefix:null;width:1280;xmlEncoding:null;previousSibling:null;characterSet:UTF-8;plugins:[object HTMLCollection];fgColor:;namespaceURI:null;activeElement:[object HTMLBodyElement];nodeValue:null;lastChild:[object HTMLHtmlElement];xmlStandalone:false;textContent:null;nextSibling:null;domain:localhost;applets:[object HTMLCollection];charset:UTF-8;nodeName:#document;webkitFullScreenKeyboardInputAllowed:false;cookie:;childNodes:[object NodeList];baseURI:http://localhost/hp-client/public/desktop/;inputEncoding:UTF-8;webkitIsFullScreen:false;implementation:[object DOMImplementation];compatMode:CSS1Compat;links:[object HTMLCollection];title:Hedron Power;firstChild:[object DocumentType];attributes:null;defaultView:[object DOMWindow];vlinkColor:;xmlVersion:null;selectedStylesheetSet:null;webkitHidden:false;alinkColor:;location:http://localhost/hp-client/public/desktop/;scripts:[object HTMLCollection];documentElement:[object HTMLHtmlElement];dir:;parentNode:null;anchors:[object HTMLCollection];forms:[object HTMLCollection];body:[object HTMLBodyElement];all:[object HTMLAllCollection];id:ext-document;open:function open() { [native code] };close:function close() { [native code] };write:function write() { [native code] };writeln:function writeln() { [native code] };clear:function clear() { [native code] };captureEvents:function captureEvents() { [native code] };releaseEvents:function releaseEvents() { [native code] };hasFocus:function hasFocus() { [native code] };createElement:function createElement() { [native code] };createDocumentFragment:function createDocumentFragment() { [native code] };createTextNode:function createTextNode() { [native code] };createComment:function createComment() { [native code] };createCDATASection:function createCDATASection() { [native code] };createProcessingInstruction:function createProcessingInstruction() { [native code] };createAttribute:function createAttribute() { [native code] };createEntityReference:function createEntityReference() { [native code] };getElementsByTagName:function getElementsByTagName() { [native code] };createElementNS:function createElementNS() { [native code] };createAttributeNS:function createAttributeNS() { [native code] };getElementsByTagNameNS:function getElementsByTagNameNS() { [native code] };getElementById:function getElementById() { [native code] };createEvent:function createEvent() { [native code] };createRange:function createRange() { [native code] };evaluate:function evaluate() { [native code] };execCommand:function execCommand() { [native code] };queryCommandEnabled:function queryCommandEnabled() { [native code] };queryCommandIndeterm:function queryCommandIndeterm() { [native code] };queryCommandState:function queryCommandState() { [native code] };queryCommandSupported:function queryCommandSupported() { [native code] };queryCommandValue:function queryCommandValue() { [native code] };getElementsByName:function getElementsByName() { [native code] };elementFromPoint:function elementFromPoint() { [native code] };caretRangeFromPoint:function caretRangeFromPoint() { [native code] };getSelection:function getSelection() { [native code] };getCSSCanvasContext:function getCSSCanvasContext() { [native code] };getElementsByClassName:function getElementsByClassName() { [native code] };querySelector:function querySelector() { [native code] };querySelectorAll:function querySelectorAll() { [native code] };importNode:function importNode() { [native code] };adoptNode:function adoptNode() { [native code] };createNodeIterator:function createNodeIterator() { [native code] };createTreeWalker:function createTreeWalker() { [native code] };getOverrideStyle:function getOverrideStyle() { [native code] };createExpression:function createExpression() { [native code] };createNSResolver:function createNSResolver() { [native code] };webkitCancelFullScreen:function webkitCancelFullScreen() { [native code] };insertBefore:function insertBefore() { [native code] };replaceChild:function replaceChild() { [native code] };removeChild:function removeChild() { [native code] };appendChild:function appendChild() { [native code] };hasChildNodes:function hasChildNodes() { [native code] };cloneNode:function cloneNode() { [native code] };normalize:function normalize() { [native code] };isSupported:function isSupported() { [native code] };hasAttributes:function hasAttributes() { [native code] };lookupPrefix:function lookupPrefix() { [native code] };isDefaultNamespace:function isDefaultNamespace() { [native code] };lookupNamespaceURI:function lookupNamespaceURI() { [native code] };addEventListener:function addEventListener() { [native code] };removeEventListener:function removeEventListener() { [native code] };isSameNode:function isSameNode() { [native code] };isEqualNode:function isEqualNode() { [native code] };compareDocumentPosition:function compareDocumentPosition() { [native code] };contains:function contains() { [native code] };dispatchEvent:function dispatchEvent() { [native code] };ELEMENT_NODE:1;ATTRIBUTE_NODE:2;TEXT_NODE:3;CDATA_SECTION_NODE:4;ENTITY_REFERENCE_NODE:5;ENTITY_NODE:6;PROCESSING_INSTRUCTION_NODE:7;COMMENT_NODE:8;DOCUMENT_NODE:9;DOCUMENT_TYPE_NODE:10;DOCUMENT_FRAGMENT_NODE:11;NOTATION_NODE:12;DOCUMENT_POSITION_DISCONNECTED:1;DOCUMENT_POSITION_PRECEDING:2;DOCUMENT_POSITION_FOLLOWING:4;DOCUMENT_POSITION_CONTAINS:8;DOCUMENT_POSITION_CONTAINED_BY:16;DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC:32;" spellcheck="true" draggable="false" todataurl="function toDataURL() { [native code] }" getcontext="function getContext() { [native code] }" insertadjacenttext="function insertAdjacentText() { [native code] }" insertadjacentelement="function insertAdjacentElement() { [native code] }" getattribute="function getAttribute() { [native code] }" setattribute="function setAttribute() { [native code] }" removeattribute="function removeAttribute() { [native code] }" getattributenode="function getAttributeNode() { [native code] }" getattributens="function getAttributeNS() { [native code] }" setattributens="function setAttributeNS() { [native code] }" removeattributens="function removeAttributeNS() { [native code] }" getattributenodens="function getAttributeNodeNS() { [native code] }" hasattribute="function hasAttribute() { [native code] }" hasattributens="function hasAttributeNS() { [native code] }" focus="function focus() { [native code] }" blur="function blur() { [native code] }" scrollintoview="function scrollIntoView() { [native code] }" scrollintoviewifneeded="function scrollIntoViewIfNeeded() { [native code] }" scrollbylines="function scrollByLines() { [native code] }" scrollbypages="function scrollByPages() { [native code] }" getelementsbyclassname="function getElementsByClassName() { [native code] }" queryselector="function querySelector() { [native code] }" queryselectorall="function querySelectorAll() { [native code] }" webkitmatchesselector="function webkitMatchesSelector() { [native code] }" getclientrects="function getClientRects() { [native code] }" getboundingclientrect="function getBoundingClientRect() { [native code] }" setattributenode="function setAttributeNode() { [native code] }" removeattributenode="function removeAttributeNode() { [native code] }" setattributenodens="function setAttributeNodeNS() { [native code] }" webkitrequestfullscreen="function webkitRequestFullScreen() { [native code] }" allow_keyboard_input="1" insertbefore="function insertBefore() { [native code] }" replacechild="function replaceChild() { [native code] }" removechild="function removeChild() { [native code] }" appendchild="function appendChild() { [native code] }" haschildnodes="function hasChildNodes() { [native code] }" clonenode="function cloneNode() { [native code] }" normalize="function normalize() { [native code] }" issupported="function isSupported() { [native code] }" hasattributes="function hasAttributes() { [native code] }" lookupprefix="function lookupPrefix() { [native code] }" isdefaultnamespace="function isDefaultNamespace() { [native code] }" lookupnamespaceuri="function lookupNamespaceURI() { [native code] }" addeventlistener="function addEventListener() { [native code] }" removeeventlistener="function removeEventListener() { [native code] }" issamenode="function isSameNode() { [native code] }" isequalnode="function isEqualNode() { [native code] }" comparedocumentposition="function compareDocumentPosition() { [native code] }" contains="function contains() { [native code] }" dispatchevent="function dispatchEvent() { [native code] }" element_node="1" attribute_node="2" text_node="3" cdata_section_node="4" entity_reference_node="5" entity_node="6" processing_instruction_node="7" comment_node="8" document_node="9" document_type_node="10" document_fragment_node="11" notation_node="12" document_position_disconnected="1" document_position_preceding="2" document_position_following="4" document_position_contains="8" document_position_contained_by="16" document_position_implementation_specific="32">
Anybody understood what's going on here? How to fix it?
Thanks for any help...