This issue duplicates another issue.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.1.3] Renderer of hidden column can cause undesired effect

    [4.1.3] Renderer of hidden column can cause undesired effect


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome
    • IE9
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • A renderer of a hidden column can cause some undesired effect. I think nothing stops me to return "<div style='height: 50px;'></div>" from a renderer. But this cause increasing of rows height. I would expect that hidden column should not affect on rendering process this way.
    • I understand it can be hard to fix. Maybe an option like "renderHiddenColumns: true|false"? By the way, it could be good in the performance aspect as well.
    Steps to reproduce the problem:
    • Just run the sample
    The result that was expected:
    • Default row height
    The result that occurs instead:
    • Row height is increased because of the renderer oh the hidden column
    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Grid hidden column renderer</title>
    
        <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script type="text/javascript" src="../ext-all-debug.js"></script>
    
        <script type="text/javascript">
            Ext.onReady(function () {
                Ext.create("Ext.grid.Panel", {
                    renderTo: Ext.getBody(),
                    store: {
                        autoLoad: true,
                        fields: [{
                            name: "test1"
                        }, {
                            name: "test2"
                        }],
                        proxy : {
                            type: "memory",
                            reader: {
                                type: "array"
                            },
                            data: [
                                ["test1", "test2", "test3"],
                                ["test4", "test5", "test6"],
                                ["test7", "test8", "test9"]
                            ]
                        }
                    },
                    columns: {
                        items: [{
                            dataIndex: "test1",
                            text: "Test"
                        }, {
                            hidden: true,
                            dataIndex: "test2",
                            renderer: function () { 
                                return "<div style='height: 50px;'></div>" 
                            },
                            text: "Hidden column"
                        }]
                    }
                });
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>


    HELPFUL INFORMATION


    Possible workaround:
    • Check the column's hidden property with the renderer. Return nothing if it is hidden.
    • Refresh the view if the column is shown. It can be done in a column's show listener.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is because the columns are still rendered and therefore will still affect the row height. So you want normal row height but when you show the column the rows will then take up the 50px? Personally wouldn't like that UI.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thank you for the answer.

    Yes, I understand why it happens therefore suggest "renderHiddenColumns: true|false".

    Personally wouldn't like that UI.
    But the inadequately stretched rows also doesn't look good Moreover, a user might not show a hidden column at all.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

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


    Dupe of: EXTJSIV-6734
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Thank you, Evan.

    Could you clarify how does this ticket sound? Is it considered a bug or a feature request?
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  6. #6
    Ext JS Premium Member Juanito's Avatar
    Join Date
    Apr 2007
    Location
    San Diego->Boston->Brazil
    Posts
    159
    Vote Rating
    4
    Juanito is on a distinguished road

      2  

    Default


    @mitchellsimoens This report may leave whether it's a bug kind of up in the air, but if you look at the test case in http://www.sencha.com/forum/showthre...871#post926871 you'll see that the behavior in that case is unnacceptable, the row height becomes way taller than it was originally after hiding the column.

    I really don't think you would like to see a lot of blank space on a grid after hiding the tall column.



    The case I reported is definitely a bug, and it's the same underlying code issue. Sencha team, please take that into consideration when deciding whether to fix it.




  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Quote Originally Posted by evant View Post
    Dupe of: EXTJSIV-6734
    Hello Evan,

    I see EXTJSIV-6734 in the Release notes for 4.2.0 Beta.
    EXTJSIV-6734 Hidden grid column's height is not properly measured when wordwrap is used

    But the test case in the initial post still reproduces the issue with 4.2.0 GA.

    Maybe, is it another issue?
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  8. #8
    Sencha User
    Join Date
    Jul 2009
    Posts
    22
    Vote Rating
    2
    vot is on a distinguished road

      0  

    Default


    I can confirm the issue still exists in ExtJS 4.2.0 (GPL). As soon as a white-space:normal (in my case) is used within a column the height calculation seems to freak out.

    Code:
    columns: [{
            text: _("Description"),
            sortable: true,
            dataIndex: "description",
            id: "description",
            renderer: function(value, metaData, record, rowIndex, colIndex,
              store, view) {
                metaData.style = "white-space:normal;";
                var longdescription = record.get("longdescription");
                if(!Ext.isEmpty(longdescription)) {
                    value = Ext.String.format("<b>{0}</b><br/>{1}",
                      value, Ext.String.htmlEncode(longdescription));
                }
                return value;
            },
            width: 340,
            hidden: true
    },{
    ...