PDA

View Full Version : Problem overriding Ext.dom.Element



VirtualGreg
10 Nov 2016, 8:22 AM
I have not done a lot of overrides but I grabbed some code off the web and tried overriding Ext.dom.Element.

But I'm getting an error on app launch: Uncaught TypeError: Element.normalize is not a function.

Any ideas? Hoping someone can shed light on this.


Ext.define('Ext.overrides.dom.Element', {
override: 'Ext.dom.Element',


setSize: function(width, height) {
var me = this, style;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setSize on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
style = me.dom.style;


if (Ext.isObject(width)) {
// in case of object from getSize()
height = width.height;
width = width.width;
}


style.width = Element.addUnits(width);
style.height = Element.addUnits(height);


if (me.shadow || me.shim) {
me.syncUnderlays();
}
}

return me;
},


setStyle: function(prop, value) {
var me = this, dom, hooks, style, name, hook;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setStyle on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
dom = me.dom;
hooks = me.styleHooks;
style = dom.style;
// we don't promote the 2-arg form to object-form to avoid the overhead...
if (typeof name === 'string') {
hook = hooks[name];
if (!hook) {
hooks[name] = hook = { name: Element.normalize(name) };
}
value = (value == null) ? '' : value; // map null && undefined to ''
if (hook.set) {
hook.set(dom, value, me);
} else {
style[hook.name] = value;
}
if (hook.afterSet) {
hook.afterSet(dom, value, me);
}
} else {
for (name in prop) {
if (prop.hasOwnProperty(name)) {
hook = hooks[name];
if (!hook) {
hooks[name] = hook = { name: Element.normalize(name) };
}
value = prop[name];
value = (value == null) ? '' : value; // map null && undefined to ''
if (hook.set) {
hook.set(dom, value, me);
} else {
style[hook.name] = value;
}
if (hook.afterSet) {
hook.afterSet(dom, value, me);
}
}
}
}
}


return me;
},


setWidth: function(width) {
var me = this;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setWidth on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
me.dom.style[WIDTH] = Element.addUnits(width);


if (me.shadow || me.shim) {
me.syncUnderlays();
}
}


return me;
}
});

VirtualGreg
10 Nov 2016, 9:32 AM
Can anyone shed light on this?

Gary Schlosberg
10 Nov 2016, 2:32 PM
According to the thread in the code comment, that override is written for Ext JS 5.x. What behavior were you looking to fix with the override?

VirtualGreg
11 Nov 2016, 8:57 AM
Another post answered my actual question, in places where Element alone is found, I've replaced it with Ext.dom.Element

As to what I am actually trying to achieve with this override, it is to avoid the dreaded error:

Uncaught TypeError: Cannot read property 'style' of null
at constructor.setWidth (http://localhost:1841/ext/packages/sencha-core/src/dom/Element.js:4261:19)
at constructor.callParent (http://localhost:1841/ext/packages/sencha-core/src/class/Base.js:1257:32)
at constructor.setWidth (http://localhost:1841/ext/overrides/dom/Element.js:2048:20)
at constructor.beginLayoutCycle (http://localhost:1841/ext/src/layout/component/Dock.js:315:24)
at constructor.resetLayout (http://localhost:1841/ext/src/layout/Context.js:1086:16)
at constructor.invalidate (http://localhost:1841/ext/src/layout/Context.js:739:20)
at constructor.invalidate (http://localhost:1841/ext/src/layout/Context.js:728:32)
at constructor.invalidate (http://localhost:1841/ext/src/layout/Context.js:728:32)
at constructor.invalidate (http://localhost:1841/ext/src/layout/Context.js:728:32)
at constructor.invalidate (http://localhost:1841/ext/src/layout/Context.js:728:32)

Gary Schlosberg
11 Nov 2016, 9:12 AM
Thanks. Link for future visitors: https://www.sencha.com/forum/showthread.php?331636

VirtualGreg
11 Nov 2016, 9:17 AM
This seems to avoid that error and other related errors:



Ext.define('Ext.overrides.dom.Element', {
override: 'Ext.dom.Element',


setSize: function(width, height) {
var me = this, style;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setSize on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
style = me.dom.style;


if (Ext.isObject(width)) {
// in case of object from getSize()
height = width.height;
width = width.width;
}


style.width = Ext.dom.Element.addUnits(width);
style.height = Ext.dom.Element.addUnits(height);


if (me.shadow || me.shim) {
me.syncUnderlays();
}
}

return me;
},


setStyle: function(prop, value) {
var me = this, dom, hooks, style, name, hook;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setStyle on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
dom = me.dom;
hooks = me.styleHooks;
style = dom.style;
name = prop;
// we don't promote the 2-arg form to object-form to avoid the overhead...
if (typeof name === 'string') {
hook = hooks[name];
if (!hook) {
hooks[name] = hook = { name: Ext.dom.Element.normalize(name) };
}
value = (value == null) ? '' : value; // map null && undefined to ''
if (hook.set) {
hook.set(dom, value, me);
} else {
style[hook.name] = value;
}
if (hook.afterSet) {
hook.afterSet(dom, value, me);
}
} else {
for (name in prop) {
if (prop.hasOwnProperty(name)) {
hook = hooks[name];
if (!hook) {
hooks[name] = hook = { name: Ext.dom.Element.normalize(name) };
}
value = prop[name];
value = (value == null) ? '' : value; // map null && undefined to ''
if (hook.set) {
hook.set(dom, value, me);
} else {
style[hook.name] = value;
}
if (hook.afterSet) {
hook.afterSet(dom, value, me);
}
}
}
}
}


return me;
},


setWidth: function(width) {
var me = this;


// Fix start
// This is to provide more debugging info for an intermitent issue we have on client browser
// See http://www.sencha.com/forum/showthread.php?298885-Ext.dom.Element.setStyle-Cannot-read-property-style-of-null
if (!me.dom) {
console.log('Ext.dom.Element trying to setWidth on invalid dom. Class:' + me.$className + ' itemId:' + me.itemId);
} else { // Fix end
me.dom.style[Ext.dom.Element.WIDTH] = Ext.dom.Element.addUnits(width);


if (me.shadow || me.shim) {
me.syncUnderlays();
}
}


return me;
}
});


Ext.define('Ext.overrides.dom.UnderlayPool', {
override: 'Ext.dom.UnderlayPool',


checkOut: function () {
var cache = this.cache,
len = cache.length,
el;


// do cleanup because some of the objects might have been destroyed
while (len--) {
if (cache[len].destroyed) {
cache.splice(len, 1);
}
}
// end do cleanup


el = cache.shift();


if (!el) {
el = Ext.Element.create(this.elementConfig);
el.setVisibilityMode(2);
//<debug>
// tell the spec runner to ignore this element when checking if the dom is clean
el.dom.setAttribute('data-sticky', true);
//</debug>
}
return el;
}
});