Results 1 to 2 of 2

Thread: Valid HTML id not supported in column id. Example id with colon (:) in identifer

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Jul 2011
    Vote Rating

    Default Valid HTML id not supported in column id. Example id with colon (:) in identifer


    Ext version tested:
    Ext 4.0.2

    Browser versions tested against:
    FF3 (firebug 1.6.2 installed)

    id field in Ext.grid.column.Column does not support colon ( : ) value.
    This is a valid HTML identifier.

    Steps to reproduce the problem:
    • See sample with a grid and a data summary

    The result that was expected:
    Table and summary footer rendered the right way.

    The result that occurs instead:
    The following exception was shown in the Firebug console:
    Ext.DomQuery.pseudos[name] is not a function

    Offending line in function:
    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    Test Case:

        Ext.define('Task', {
            extend: '',
            idProperty: 'taskId',
            fields: [
                {name: 'taskId', type: 'int'},
      var exampleData = {
        data: [
            {taskId: 105}
        summaryData: [
            {':someName': ''}
        var store = Ext.create('', {
            model: 'Task',
            autoLoad: true,
            data: exampleData,
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'data'
            groupField: ':someName'
        var grid = Ext.create('Ext.grid.Panel', {
            width: 600,
            height: 200,
            title: 'Tasks',
            renderTo: Ext.getBody(),
            store: store,
            viewConfig: {
                stripeRows: false
            features: [{
                id: 'group',
                ftype: 'groupingsummary',
                groupHeaderTpl: '{name}',
                hideGroupedHeader: true,
                remoteRoot: 'summaryData'
            columns: [{
              dataIndex: 'taskId',
              header: 'Task Id',
              id: 'taskId'
              dataIndex: ':someName',
              header: ':someName',
              // This is the offending line: Having a : in front of the name results in the following error
              // in Firefox 3.5:
              // Ext.DomQuery.pseudos[name] is not a function
              // function byPseudo(cs, name, value){
              //     return Ext.DomQuery.pseudos[name](cs, value);
              // }
              // Looking at the documentation, there is no mention of any id restrictions.
              // One would expect that valid HTML ids for instance should work.
              id: ':someName'


    Screenshot or Video:
    Not applicable

    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    Not applicable

    Operating System:
    Windows 7

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia
    Vote Rating


    Essentially the same issue posted here:

    Agree that they are valid html ids, however the id gets used in several other contexts, for example being used in class names to identify certain elements or to get embedded in templates to refer to certain things.

    1) Since ":" is not a valid character in a class name, this can cause failures
    2) ":" has a special meaning in our template language, which refers to a function call

    As such, we won't be fixing these issues however I will make a note in the documentation regarding the restrictions on the identifiers. Probably safest to stick with A-Z, 0-9, - & _.
    Evan Trimboli
    Twitter - @evantrimboli

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts