View Full Version : [FIXED] Ext.ComponentQuery - significant whitespace

3 Aug 2011, 2:53 PM

Ext version tested:

Ext 4.0.5

Browser versions tested against:

FF3 (firebug 1.8.0 installed)
Chrome 12.0.742.122 m


Extra spaces between tokens in selector strings passed to Ext.ComponentQuery.parse are treated as significant and affect the interpretation of the selector.

Steps to reproduce the problem:

Goto http://dev.sencha.com/deploy/ext-4.0.2a/examples/layout/border.html
Use FireBug or Chrome Developer Tools
Run in the console:

1. Ext.ComponentQuery.query('viewport panel').length
2. Ext.ComponentQuery.query('viewport??panel').length
3. Ext.ComponentQuery.query('viewport???panel').length

? = a single space

The result that was expected:

1. 10
2. 10
3. 10

The result that occurs instead:

1. 10
2. 5
3. 0

Test Case:

<!DOCTYPE html>
<title>ExtJS Test Bed</title>
<script type="text/javascript" src="../ext-4.0.5/ext-debug.js"></script>
<style type="text/css">b { color:red; } b.ok { color:green; }</style>
<pre id="test">RUNNING TESTS...

<script type="text/javascript">

Ext.define('Test.view.Viewport', {
extend: 'Ext.container.Viewport',
id: 'parent',

Ext.define('Test.controller.Main', {
extend: 'Ext.app.Controller',

init: function() {
'#parent' : test('element'),
'#parent #child' : test('descendents'),
'#parent #child' : test('descendents / extra spaces'),
'#parent>#child' : test('direct child'),
'#parent >#child' : test('direct child / single space [L]'),
'#parent >#child': test('direct child / extra spaces [L]'),
'#parent> #child' : test('direct child / single space [R]'),
'#parent> #child': test('direct child / extra spaces [R]')


autoCreateViewport: true,
name: 'Test',
controllers: ['Main']

var testCount = 0;
function test(m) {
var N = ++this.testCount, id = 'e'+N;
'\n '+N+'. <b id='+id+'>FAIL</b> - '+m);
return {
afterrender: function() {



Debugging already done:

The \s special characters in the modeRe regular expression in ComponentQuery.js only allow for zero or one space on either side of a greater-than or caret, or a single space between tokens:

modeRe = /^(\s?([>\^])\s?|\s|$)/,

Possible fix:

Modify the regular expression to support extraneous whitespace:

modeRe = /^(\s*([>\^])\s*|\s+|$)/,

Operating System:

Window 7 Professional

4 Aug 2011, 9:30 AM
To be honest on this one... I don't think it's a bug (please convince me and I will report it)... I think it's developer laziness.

5 Aug 2011, 7:59 AM
This is clearly not a pressing issue at all. I first ran into it when I used extra whitespace between my component xtypes because they were very verbose and used dashes and the extra separation helped to distinguish things. I was still very new to the component query syntax and so it took me a while to figure out why it wasn't working. I discussed with Brian Moeskau at a javascript meetup because I thought maybe I was being pedantic, but he said it sounded like a bug to him. Honestly I only just reported it because I was looking in to the pseudo-class querying within ComponentQuery.js and happened to run across it.

So I totally understand if it does or does not get fixed, but I thought I would report it anyway. Thanks!

5 Aug 2011, 3:37 PM
I agree that it is debatable, but I lean towards this being a bug, albeit a very minor one. The selector syntax is inspired by css selectors, extraneous white space is insignificant in that context, might as well make it insignificant in a component query context as well. I'll get this filed.