Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    78
    Vote Rating
    2
    pscanlon1 is on a distinguished road

      0  

    Default Buffered Grid DOES NOT WORK in IE 9 inside a tab panel

    Buffered Grid DOES NOT WORK in IE 9 inside a tab panel


    Hello,

    Using the build ext-4.2.1.856 navigate to examples/grid/buffer-grid.html.

    Change the code a bit so that it renders a viewport with tabs.

    ie.
    Code:
    var view=Ext.create('Ext.container.Viewport', {
    			layout : 'fit',
    			items : [{
    				xtype : 'tabpanel',
    				
    				items:[grid]
    			}],
    			renderTo : Ext.getBody()
    		});
        view.down('tabpanel').add({
                  title:'title',
                  
                  layout:'fit',
    		      closable:true,
                  items:[Ext.create('Ext.panel.Panel',{tbar:[{xtype:'button',text:'tet'}]})]
    		});
    also, within the grid constructor, make sure you take out
    Code:
    renderTo:Ext.getBody()
    so that the grid renders in the viewport.

    Now here is the important part.

    If you navigate to this example in IE9, follow these steps.
    1. Scroll down the grid, say 10% of the way.
    2.switch to the other tab
    3.switch back to the buffered grid tab

    result: All of the data appears to be missing until you scroll the grid, and the grid is scrolled all the way to the top.

    If you view the page in IE7, everything is fine switching between tabs.


    Please help!


    If you want a full example, here you go
    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.plugin.BufferedRenderer'
    ]);
    
    
    Ext.define('Employee', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'employeeNo'
        }, {
            name: 'rating',
            type: 'int'
        }, {
            name: 'salary',
            type: 'float'
        }, {
            name: 'forename'
        }, {
            name: 'surname'
        }, {
            name: 'email'
        }, {
            name: 'department'
        }, {
            name: 'dob',
            type: 'date',
            dateFormat: 'Ymd'
        }, {
            name: 'joinDate',
            type: 'date',
            dateFormat: 'Ymd'
        }, {
            name: 'noticePeriod'
        }, {
            name: 'sickDays',
            type: 'int'
        }, {
            name: 'holidayDays',
            type: 'int'
        }, {
            name: 'holidayAllowance',
            type: 'int'
        }],
        idField: 'employeeNo'
    });
    
    
    Ext.onReady(function() {
        
        function random(from, to) {
            return Math.floor(Math.random() * (to - from + 1) + from);
        }
    
    
        function getEmployeeNo() {
            var out = '',
                i = 0;
            for (; i < 6; ++i) {
                out += random(0, 7);
            }
            return out;
        }
    
    
        /**
         * Returns an array of fake data
         * @param {Number} count The number of fake rows to create data for
         * @return {Array} The fake record data, suitable for usage with an ArrayReader
         */
        function createFakeData(count, data) {
            var firstNames   = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
                lastNames    = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
                departments  = ['Engineering', 'Sales', 'Marketing', 'Managment', 'Support', 'Administration'],
                ratings      = [1, 2, 3, 4, 5],
                salaries     = [100, 400, 900, 1500, 1000000],
                noticePeriods= ['2 weeks', '1 month', '3 months'],
                i;
    
    
            for (i = 0; i < (count || 25); i++) {
                var firstName   = firstNames[random(0, firstNames.length - 1)],
                    lastName    = lastNames[random(0, lastNames.length - 1)],
                    name        = Ext.String.format("{0} {1}", firstName, lastName),
                    email       = firstName.toLowerCase() + '.' + lastName.toLowerCase() + '@sentcha.com',
                    rating      = ratings[(name === 'Nige White') ? 0 : random(0, ratings.length - 1)],
                    salary      = salaries[(name === 'Nige White') ? 4 : random(0, salaries.length - 1)],
                    department  = departments[random(0, departments.length - 1)],
                    ageInYears  = random(23, 55),
                    dob         = new Date(new Date().getFullYear() - ageInYears, random(0, 11), random(0, 31)),
                    joinDate    = new Date(new Date() - random(60, 2000) * 1000 * 60 * 60 * 24),
                    sickDays    = random(0, 10),
                    holidayDays = random(0, 10),
                    holidayAllowance = random(20, 40);
    
    
                data.push({
                    employeeNo: getEmployeeNo(),
                    rating: rating,
                    salary: salary,
                    forename: firstName,
                    surname: lastName,
                    email: email,
                    department: department,
                    dob: dob,
                    joinDate: joinDate,
                    sickDays: sickDays,
                    holidayDays: holidayDays,
                    holidayAllowance: holidayAllowance,
                    noticePeriod: noticePeriods[random(0, noticePeriods.length - 1)]
                });
            }
        }
    
    
        // Create the Data Store.
        // Because it is buffered, the automatic load will be directed
        // through the prefetch mechanism, and be read through the page cache
        var store = Ext.create('Ext.data.Store', {
            groupField: 'department',
            model: 'Employee'
        });
        
        var jumpToRow = function(){
            var fld = grid.down('#gotoLine');
            if (fld.isValid()) {
                grid.view.bufferedRenderer.scrollTo(fld.getValue() - 1, true);
            }    
        };
        
        var data = [],
            perBatch = 1000,
            max = 5000;
    
    
        Ext.define('buffView',{
    		extend:'Ext.grid.Panel', 
            
    		initComponent:function(){
    			var me=this;
    			Ext.apply(me,{
    			width: 700,
    			height: 500,
            title: 'Buffered Grid of 5,000 random records',
            store: store,
            loadMask: true,
            plugins: ['bufferedrenderer'],
    		tbar:[{xtype:'button',text:'button'}],
            selModel: {
                pruneRemoved: false
            },
            viewConfig: {
                trackOver: false
            },
            features: [{
                ftype: 'groupingsummary',
                groupHeaderTpl: 'Department: {name}',
                showSummaryRow: true
            }],
            // grid columns
            columns:[{
                xtype: 'rownumberer',
                width: 40,
                sortable: false
            }, {
                text: 'Id',
                sortable: true,
                dataIndex: 'employeeNo',
                groupable: false,
                width: 70
            }, {
                text: 'Name',
                sortable: true,
                dataIndex: 'name',
                groupable: false,
                renderer: function(v, cellValues, rec) {
                    return rec.get('forename') + ' ' + rec.get('surname');
                },
                width: 120
            }, {
                text: 'Date of birth',
                dataIndex: 'dob',
                xtype: 'datecolumn',
                groupable: false
            }, {
                text: 'Join date',
                dataIndex: 'joinDate',
                xtype: 'datecolumn',
                groupable: false
            }, {
                text: 'Notice period',
                dataIndex: 'noticePeriod',
                groupable: false
            }, {
                text: 'Email address',
                dataIndex: 'email',
                width: 200,
                groupable: false,
                renderer: function(v) {
                    return '<a href="mailto:' + v + '">' + v + '</a>';
                }
            }, {
                text: 'Department',
                dataIndex: 'department',
                hidden: true,
                hideable: false,
                groupable: false
            }, {
                text: 'Absences',
                columns: [{
                    text: 'Illness',
                    dataIndex: 'sickDays',
                    width: 60,
                    groupable: false
                }, {
                    text: 'Holidays',
                    dataIndex: 'holidayDays',
                    width: 70,
                    groupable: false
                }, {
                    text: 'Holday Allowance',
                    dataIndex: 'holidayAllowance',
                    width: 125,
                    groupable: false
                }]
            }, {
                text: 'Rating',
                width: 70,
                sortable: true,
                dataIndex: 'rating',
                groupable: false
            }, {
                text: 'Salary',
                width: 110,
                sortable: true,
                dataIndex: 'salary',
                align: 'right',
                renderer: Ext.util.Format.usMoney,
                groupable: false
            }],
            bbar: [{
                labelWidth: 80,
                fieldLabel: 'Jump to row',
                xtype: 'numberfield',
                minValue: 1,
                maxValue: max,
                allowDecimals: false,
                itemId: 'gotoLine',
                enableKeyEvents: true,
                listeners: {
                    specialkey: function(field, e){
                        if (e.getKey() === e.ENTER) {
                            jumpToRow();
                        }
                    }
                }
            }, {
                text: 'Go',
                handler: jumpToRow
            }]
    			});
    		me.callParent(arguments);
    		me.view.on({
    			
            	itemdblclick:function(table,record,item,index,e,eOpts){
            		//debugger;
            		var tabs=this.up('tabpanel');
    				var newTab=tabs.add({xtype:'container',title:'conatainer'});
    				tabs.setActiveTab(newTab);
            	}
    		});
    		}
            
        });
    	
    	
        
    	Ext.application({
        	
    	
    	autoCreateViewport: false,
    	
    	name : 'FVM',
    
    
    	init : function() {
    	var grid=Ext.create('buffView');
    	var view=Ext.create('Ext.container.Viewport', {
    			layout : 'fit',
    			items : [{
    				xtype : 'tabpanel',
    				//layout:'fit',
    				items:[grid]
    			}],
    			renderTo : Ext.getBody()
    		});
        view.down('tabpanel').add({
                  title:'title',
                  
                  layout:'fit',
    		      closable:true,
                  items:[Ext.create('Ext.panel.Panel',{tbar:[{xtype:'button',text:'tet'}]})]
    		});
    		Ext.util.Observable.capture(grid, function(evname) {console.log(evname, arguments);})
    	
    	}
    	
    	});
    	
    	function makeData() {
            createFakeData(perBatch, data);
            if (data.length < max) {
                setTimeout(makeData, 10);
            } else {
                Ext.getBody().unmask();
                store.loadData(data);
            }
        }
        
        Ext.getBody().mask('Generating fake data...');
            
        // In old IE, the fake data loop can cause a slow script warning,
        // so kick this off in the "background" to load the data in chunks.
        makeData();
    });

  2. #2
    Sencha User
    Join Date
    Feb 2008
    Posts
    52
    Vote Rating
    3
    urban.novak is on a distinguished road

      0  

    Default


    Try setting hideMode on tabs to 'offsets', that should fix the scrollbar issue.

    Apparently, it's not a bug, this is a feature (although a little bit strange one), ext js 3.x behaves the same way.

  3. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    78
    Vote Rating
    2
    pscanlon1 is on a distinguished road

      0  

    Default


    ok so i actually had to put hideMode:'offsets' on the grid itself, and that fixes the issue of the data disappearing.

    Now lets move to next issue.


    When you collapse/expand a group, the grid i think fires a refresh event, and it scrolls all the way to the top. How can I reset the scroll to the position that it was at last?

    This happens in both chrome and IE.

    Im noticing some funny stuff with the grid grouped. When you collapse a group, even if it isnt buffered, when you select a row afterwards, it is actually selecting a row x # of rows above wheere you click.

    SO if you have 2 groups, one with 4 rows, and the second with 10 rows. and you collapse the FIRST group, when you select the 4th item in the second group, it will actually select the 1st item in the second group.

  4. #4
    Sencha User
    Join Date
    Feb 2008
    Posts
    52
    Vote Rating
    3
    urban.novak is on a distinguished road

      0  

    Default


    Extjs 4.1 introduced a new property of AbstractView - preserveScrollOnRefresh - I haven't actually tested it, but based on it's description it looks like it does what you need.

  5. #5
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    78
    Vote Rating
    2
    pscanlon1 is on a distinguished road

      0  

    Default


    Ok that helped a bit.

    Next issue.


    If you collapse the first group, then try and select a row, it doesnt highlight it. If you then expand the first group again, you will see it highlighted. The row selection model is messed up somehow.

    Also, if you collapse a group halfway down the grid, i think record 798 or so is the second group, it will move the scrollbar and the view to the first record. This doesnt happen when its NOT buffered.

    Help!

Thread Participants: 1