1. #1
    Sencha User
    Join Date
    Dec 2008
    Location
    Lodz, Poland
    Posts
    173
    Vote Rating
    3
    grzegorz.borkowski is on a distinguished road

      0  

    Default [2.2.1] Incorrect behavior of some components with browser zooming

    [2.2.1] Incorrect behavior of some components with browser zooming


    Browser zooming feature breaks some Ext components in 2.2.1.
    For example, open the page with EditorGrid http://extjs.com/deploy/dev/examples...edit-grid.html in IE7. Increase page zoom (Ctrl+mouse scroll), to, say 110%. Try then edit any cell : it doesn't work properly.
    I thought it is only the issue with IE7. However, it's not true. Editor grid example works well under FF3. But I created my own version of row expander to display TabPanel in expanded row body. If you expand the row, and then edit any cell of parent row (ie. expanded row) the display of first tab in tab panel gets broken if you have zoom increased in FF3 (funny that only first tab is crippled, even if it is not an active one). All works well under IE7 in this case though.
    This all is not crucial, but as the resolution of screens goes up, more and more people will increase zoom of their browser (e.g. I had zoom in my FF set to 170% for all pages).

    This is the code I use for rendering tabpanel in row expander, and sample grid built with it:

    Code:
    Ext.ux.TabPanelRowExpander = function(config) {
        Ext.apply(this, config);
        Ext.ux.TabPanelRowExpander.superclass.constructor.call(this);
    
        if (this.tpl) {
            if (typeof this.tpl == 'string') {
                this.tpl = new Ext.Template(this.tpl);
            }
            this.tpl.compile();
        }
    
        this.state = {};
        this.bodyContent = {};
    
        this.addEvents({
                    beforeexpand : true,
                    expand : true,
                    beforecollapse : true,
                    collapse : true
                });
    };
    
    Ext.extend(Ext.ux.TabPanelRowExpander, Ext.util.Observable, {
        header : "",
        width : 20,
        sortable : false,
        fixed : true,
        dataIndex : '',
        id : 'expander',
    
        getBodyNode : function(row) {
            return Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
        },
    
        getRowClass : function(record, rowIndex, p, ds) {
            p.cols = p.cols - 1;
            return this.state[record.id]
                    ? 'x-grid3-row-expanded'
                    : 'x-grid3-row-collapsed';
        },
    
        init : function(grid) {
            this.grid = grid;
    
            var view = grid.getView();
            view.getRowClass = this.getRowClass.createDelegate(this);
    
            view.enableRowBody = true;
    
            view.on("rowupdated", function(gridView, rowIndex, record) {
                        var row = gridView.getRow(rowIndex);
                        this.refreshRow((row));
                    }, this);
    
            grid.on('render', function() {
                        view.mainBody.on('mousedown', this.onMouseDown, this);
                    }, this);
        },
    
        onMouseDown : function(e, t) {
            if (t.className == 'x-grid3-row-expander') {
                e.stopEvent();
                var row = e.getTarget('.x-grid3-row');
                this.toggleRow(row);
            }
        },
    
        renderer : function(v, p, record) {
            p.cellAttr = 'rowspan="2"';
            return '<div class="x-grid3-row-expander"> </div>';
        },
    
        beforeExpand : function(record, body, rowIndex) {
            if (this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false) {
                if (body.innerHTML == '') {
                    Ext.id(body, "expander_detail_");
                    var tabPanel = new Ext.TabPanel(Ext.apply({
                                activeTab : 0,
                                plain : true
                            }, this.tabPanelConfig));
                    var oldTabPanel = this.bodyContent[record.id];
                    if (oldTabPanel) {
                        var index = oldTabPanel.items.indexOf(oldTabPanel
                                .getActiveTab());
                        tabPanel.setActiveTab(index);
                    }
                    tabPanel.render(body.id);
                    this.bodyContent[record.id] = tabPanel;
                }
                return true;
            } else {
                return false;
            }
        },
    
        toggleRow : function(row) {
            if (typeof row == 'number') {
                row = this.grid.view.getRow(row);
            }
            this[Ext.fly(row).hasClass('x-grid3-row-collapsed')
                    ? 'expandRow'
                    : 'collapseRow'](row);
        },
    
        refreshRow : function(row) {
            if (typeof row == 'number') {
                row = this.grid.view.getRow(row);
            }
            this[Ext.fly(row).hasClass('x-grid3-row-expanded')
                    ? 'expandRow'
                    : 'collapseRow'](row);
        },
    
        expandRow : function(row) {
            if (typeof row == 'number') {
                row = this.grid.view.getRow(row);
            }
            var record = this.grid.store.getAt(row.rowIndex);
            var body = this.getBodyNode(row);
            if (this.beforeExpand(record, body, row.rowIndex)) {
                this.state[record.id] = true;
                Ext.fly(row).replaceClass('x-grid3-row-collapsed',
                        'x-grid3-row-expanded');
                this.fireEvent('expand', this, record, body, row.rowIndex);
            }
        },
    
        collapseRow : function(row) {
            if (typeof row == 'number') {
                row = this.grid.view.getRow(row);
            }
            var record = this.grid.store.getAt(row.rowIndex);
            var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
            if (this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false) {
                this.state[record.id] = false;
                Ext.fly(row).replaceClass('x-grid3-row-expanded',
                        'x-grid3-row-collapsed');
                this.fireEvent('collapse', this, record, body, row.rowIndex);
            }
        }
    });
    
    
    Ext.onReady(function() {
                var expander = new Ext.ux.TabPanelRowExpander({
                            tabPanelConfig : {
                                items : [{
                                            title : 'Tab 1',
                                            xtype : "panel",
                                            html : "some content 1"
                                        }, {
                                            title : 'Tab 2',
                                            xtype : "panel",
                                            html : "some content 2"
                                        }]
                            }
                        });
                var store = new Ext.data.Store({
                            autoLoad : true,
                            proxy : new Ext.data.MemoryProxy({
                                        data : [{
                                                    day : "10-10-2000",
                                                    duration : "8h",
                                                    description : "aaa"
                                                }, {
                                                    day : "11-10-2000",
                                                    duration : "7h",
                                                    description : "bbb"
                                                }, {
                                                    day : "12-10-2000",
                                                    duration : "6h",
                                                    description : "ccc"
                                                }]
                                    }),
                            reader : new Ext.data.JsonReader({
                                        root : 'data',
                                        fields : ['day', 'description', 'duration']
                                    }),
                            remoteSort : true
                        });
                new Ext.Viewport({
                            layout : 'fit',
                            items : [{
                                        xtype : 'editorgrid',
                                        title : 'Entries',
                                        viewConfig : {
                                            forceFit : true
                                        },
                                        tbar : new Ext.PagingToolbar({
                                                    pageSize : 10,
                                                    store : store
                                                }),
                                        store : store,
                                        plugins : expander,
                                        columns : [expander, {
                                                    header : "Date",
                                                    dataIndex : 'day',
                                                    editor : new Ext.form.TextField()
                                                }, {
                                                    header : "Time",
                                                    dataIndex : 'duration',
                                                    editor : new Ext.form.TextField()
                                                }, {
                                                    header : "Description",
                                                    dataIndex : 'description',
                                                    editor : new Ext.form.TextField()
                                                }]
                                    }]
                        });
            });

  2. #2
    Sencha User
    Join Date
    Dec 2008
    Location
    Lodz, Poland
    Posts
    173
    Vote Rating
    3
    grzegorz.borkowski is on a distinguished road

      0  

    Default [2.2.1] Incorrect behavior of some components with browser zooming

    [2.2.1] Incorrect behavior of some components with browser zooming


    I've discovered that invalid behavior in FF was my fault. The items in tab panel should have set autoHeight : true:

    Code:
    ...
    var expander = new Ext.ux.TabPanelRowExpander({
                            tabPanelConfig : {
                                defaults : {
                                    autoHeight : true
                                },
                                items : [{
                                            title : 'Tab 1',
                                            xtype : "panel",
                                            html : "some content 1"
                                        }, {
                                            title : 'Tab 2',
                                            xtype : "panel",
                                            html : "some content 2"
                                        }]
                            }
                        });
    ...
    With this change, firefox works correctly at any zoom.

    So it seems that problem with zooming happens only with IE7.