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
    Posts
    5
    Vote Rating
    0
    Thomas Pollinger is on a distinguished road

      0  

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

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


    REQUIRED INFORMATION

    Ext version tested:
    Ext 4.0.2

    Browser versions tested against:
    FF3 (firebug 1.6.2 installed)

    Description:
    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:
    Code:
    function byPseudo(cs, name, value){
        return Ext.DomQuery.pseudos[name](cs, value);
    }
    Test Case:

    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*'
    ]);
    
    Ext.onReady(function(){
        Ext.define('Task', {
            extend: 'Ext.data.Model',
            idProperty: 'taskId',
            fields: [
                {name: 'taskId', type: 'int'},
                ':someName'
            ]
        });
    
      var exampleData = {
        data: [
            {taskId: 105}
        ],
        summaryData: [
            {':someName': ''}
        ]
      };
    
        var store = Ext.create('Ext.data.Store', {
            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'
            }]
        });
    });


    HELPFUL INFORMATION


    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
    Location
    Sydney, Australia
    Posts
    16,915
    Vote Rating
    630
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Essentially the same issue posted here: http://www.sencha.com/forum/showthre...alue-rendering

    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
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1