PDA

View Full Version : [CLOSED] Ext.XTemplate cant handle variable names with slash ("/") in them



GustavR
18 Dec 2012, 8:31 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.1.2.1

Description:

When defining an Ext.XTemplate you cant use a slash inside the curly braces, it wont get replaced by the corresponding value.

Test Case:

var t = new Ext.XTemplate('{/var}');
t.apply({'/var': 'test'}); The result that was expected:

"test"

The result that occurs instead:

""

HELPFUL INFORMATION

Possible fix:
EXTJS4:


Ext.define('Ext.fix.XTemplateCompiler', {
override: 'Ext.XTemplateCompiler',

// |< add the slash here :)
tagRe: /^([\w-\/\.\#\$]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?$/,

parseTag: function (tag) {
var me = this,
m = me.tagRe.exec(tag),
name, format, args, math, v;

if (!m) {
return null;
}

name = m[1];
format = m[2];
args = m[3];
math = m[4];

// name = "." - Just use the values object.
if (name == '.') {
// filter to not include arrays/objects/nulls
if (!me.validTypes) {
me.definitions.push('var validTypes={string:1,number:1,boolean:1};');
me.validTypes = true;
}
v = 'validTypes[typeof values] || ts.call(values) === "[object Date]" ? values : ""';
}
// name = "#" - Use the xindex
else if (name == '#') {
v = 'xindex';
}
// name = "$" - Use the xkey
else if (name == '$') {
v = 'xkey';
}
else if (name.substr(0, 7) == "parent.") {
v = name;
}
// // compound Javascript property name (e.g., "foo.bar")
// else if (isNaN(name) && name.indexOf('-') == -1 && name.indexOf('.') != -1) {
// v = "values." + name;
// }
// else: use array notation
// (http://jsperf.com/string-property-access/4)
else {
v = "values['" + name + "']";
}

if (math) {
v = '(' + v + math + ')';
}

if (format && me.useFormat) {
args = args ? ',' + args : "";
if (format.substr(0, 5) != "this.") {
format = "fm." + format + '(';
} else {
format += '(';
}
} else {
return v;
}

return format + v + args + ')';
}
});

EXTJS5:

Ext.define('Perbility.fix.util.XTemplateCompiler', {
override: 'Ext.util.XTemplateCompiler',

tagRe: /^([\w-\/\.\#\$]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?$/
});

And please dont ask me why I would want such a thing. It is possible to have JS objects defined that way and our REST-Api uses them everywhere (its returning some kind of a flattened tree with var names like "/root/leaf"). Rewriting all the keys before using them and remapping them back before posting them to the API would make more problems than it would solve.
Again and finally: A JS object like {'/key': 'value'} is perfectly fine (but uncommon - I know), nevertheless Ext.XTemplate should be able to cope with it.

mitchellsimoens
18 Dec 2012, 8:34 AM
Thanks for the report! I have opened a bug in our bug tracker.

GangleTron
8 Jul 2013, 2:19 PM
A good example of when you could run into this is when you are creating dynamic model fields from a server response. Setting a model's fields with something like this will fail:


{"name" : "My \ field name"}

It fails when data is applied to the Ext.data.reader.Reader's recordDataExtractorTemplate. The field is lost and you end up with an error that looks like this:


TypeError: __field9 is undefined

Automating model fields and grid columns now requires a bit more logic. I cannot simply create a dynamic column based on a field.

GustavR
24 Nov 2015, 2:54 AM
Bug still exists in 5.1.2.748. Is there any update? Still waiting for a fix here.

For all the folks out there wating too, the needed fix became much smaller since ExtJs5:

Ext.define('Perbility.fix.util.XTemplateCompiler', {
override: 'Ext.util.XTemplateCompiler',

tagRe: /^([\w-\/\.\#\$]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?(\s?[\+\-\*\/]\s?[\d\.\+\-\*\/\(\)]+)?$/
});

PBTwo
18 Apr 2018, 11:44 PM
Still not working in ExtJS 6: https://fiddle.sencha.com/#view/editor&fiddle/2fqp