Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-10139 in 4.2.2.1144.
  1. #1
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      0  

    Default Double quote in cell text breaks Grid Grouping Header rendering

    Double quote in cell text breaks Grid Grouping Header rendering


    Ext version tested:
    • Ext 4.2.0.663
    Browser versions tested against:
    • Chrome
    • FF
    Description:
    • When cell text contains double quote, the grouping header rendering is broken.
    Steps to reproduce the problem:
    • Load the code example into browser
    • Group by "Seniority" column (i.e., open header menu of this column, and click "Group by this field")
    • Collapse the first goup
    The result that was expected:
    • The first group is collapsed correctly
    The result that occurs instead:
    • Broken HTML source is displayed on the page
    Test Case:
    Code:
            Ext.onReady(function () {
                var store = Ext.create('Ext.data.Store', {
                    storeId:'employeeStore',
                    fields:['name', 'seniority', 'department'],
                    //groupField: 'department',
                    data: {'employees':[
                        { "name": "Michael Scott",  "seniority": "<span style=\"color:red\">7</span>", "department": "Management" },
                        { "name": "Dwight Schrute", "seniority": "<span style=\"color:red\">2</span>", "department": "Sales" },
                        { "name": "Jim Halpert",    "seniority": "<span style=\"color:red\">3</span>", "department": "Sales" },
                        { "name": "Kevin Malone",   "seniority": "<span style=\"color:red\">4</span>", "department": "Accounting" },
                        { "name": "Angela Martin",  "seniority": "<span style=\"color:red\">5</span>", "department": "Accounting" }
                    ]},
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'employees'
                        }
                    }
                });
    
    
                Ext.create('Ext.grid.Panel', {
                    title: 'Employees',
                    store: Ext.data.StoreManager.lookup('employeeStore'),
                    columns: [
                        { text: 'Name',     dataIndex: 'name' },
                        { text: 'Seniority', dataIndex: 'seniority' }
                    ],
                    features: [{ftype:'grouping'}],
                    width: 400,
                    height: 275,
                    renderTo: Ext.getBody()
                });
            });
    Please provide a workaround for ExtJs 4.2.
    Thanks!

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,120
    Vote Rating
    508
    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


    Seems this is already resolved in 4.2.1. If you're looking for a patch you could open a support ticket and the support team should be able to help you out.

    Thanks for the test case.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      0  

    Default


    This issue in not fully fixed in ExtJs 4.2.1, the rendered HTML is still broken, but it's less obvious on the UI. I have changed the original example to better demonstrate this issue in ExtJs 4.2.1.

    Code:
    Ext.onReady(function () {
        var store = Ext.create('Ext.data.Store', {
            storeId:'employeeStore',
            fields:['name', 'seniority', 'department'],
            //groupField: 'department',
            data: {'employees':[
                { "name": "Dwight Schrute", "seniority": "<img src=\"http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/images/stop.png\" style=\"visibility:hidden\">2", "department": "Sales" },
                { "name": "Michael Scott",  "seniority": "<img src=\"http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/images/stop.png\">7", "department": "Management" },
                { "name": "Jim Halpert",    "seniority": "<img src=\"http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/images/stop.png\" style=\"visibility:hidden\">3", "department": "Sales" },
                { "name": "Kevin Malone",   "seniority": "<img src=\"http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/images/stop.png\" style=\"visibility:hidden\">4", "department": "Accounting" },
                { "name": "Angela Martin",  "seniority": "<img src=\"http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/images/stop.png\">5", "department": "Accounting" }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });
    
    
        Ext.create('Ext.grid.Panel', {
            title: 'Employees',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
                { text: 'Name',     dataIndex: 'name' },
                { text: 'Seniority', dataIndex: 'seniority' }
            ],
            features: [{ftype:'grouping'}],
            width: 400,
            height: 275,
            renderTo: Ext.getBody()
        });
    })
    To reproduce the issue:
    1. Run the above code example with ExtJs 4.2.1.883
    2. Group the Grid by "Seniority"
    3. Collapse the group of "Seniority: 2" (i.e. one without an icon on the UI)
    The entire group disappears.
    If you inspect the DOM of the group TR, the HTML is actually broken:
    Code:
    <tr data-boundview="gridview-1013" data-recordid="group-&lt;img src=" http:="" docs.sencha.com="" extjs="" 4.2.1="" extjs-build="" examples="" writer="" images="" stop.png"="" style="visibility:hidden" data-recordindex="0" class=""><td class="x-group-hd-container" colspan="2">...

  4. #4
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      0  

    Default


    Do I have to fire a new thread, or is there a way to re-open this bug?

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,120
    Vote Rating
    508
    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


    It may be for the sake of the test case, but if you're actually embedding markup in your models it's probably something you should avoid, it's not really good practice, since it's purely presentation data.

    You can work around it by forcing the id to htmlEncode:

    Code:
    '<tr data-boundView="{view.id}" data-recordId="{record.internalId:htmlEncode}" data-recordIndex="{[values.isCollapsedGroup ? -1 : values.recordIndex]}"',
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      0  

    Default


    Thanks for the work around suggestion. We'll look into htmlEncode in groupTpl.

    However could you clarify what would be the better practice to rendering HTML markup in Grid cell? For example, render a different icon for each Seniority. Do you suggest using a specialized render method for the column?

    Also, could you confirm whether having html markup in the model is supported or not? In some cases, a grid cell may need to render external data which is pre-formatted html.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,120
    Vote Rating
    508
    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


    1) If it were my app, I would not include the whole markup and put it in the model, rather I would just send back the seniority, then use a renderer to show the image. The image is something on the presentation layer, so it should be applied there.

    2) Not sure what you mean by "supported", of course you can put any old thing in your model data, it's more a question of best practice. Typically, presentation data like that doesn't really belong in the model unless the server is delivering it to you in that format and you've got no control over it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext JS Premium Member aedos's Avatar
    Join Date
    Dec 2009
    Posts
    148
    Vote Rating
    2
    aedos is on a distinguished road

      0  

    Default


    When the cell data is pre-formatted (e.g. from external integration), we don't always get to assemble the markup during renderer method.

    If it's "supported", I would expect the ExtJs framework to not blow up when the cell data contains HTML markup. Could you confirm that'll be the case? Thanks!

    Overriding the template in our code requires lots of code duplication and causes upgrade risk.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar