Results 1 to 2 of 2

Thread: Grid columns don't line up with the grid panel in Chrome

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    1

    Default Grid columns don't line up with the grid panel in Chrome

    I have an odd issue wherein an Ext.grid.Panel has columns which fail to align with their column headers. This is specific to Chrome. This is in 4.2.1.

    Here's what it looks like in chrome:
    chrome_example.png

    And in firefox:
    firefox_example.png


    Here is my code:
    Code:
    var summaryGrid = Ext.create('Ext.grid.Panel', {
    //	title: "message-summary-grid",
    	store: 'summary-data',
    	stripeRows: true,
    //	animCollapse: true,
    	columnLines: true,
    	autoShow: true, 
    	loadMask: true,
    //        viewConfig: {forceFit: true},
    //        forceFit: true,
    	columns: [ 
                {header: 'Code', dataIndex: 'code', width: 65},
                {header: 'Type', dataIndex: 'type'},//, width: 65},
                {header: 'Attributes', dataIndex: 'attributes'},//, width: 100},
    	    {header: 'Count', dataIndex: 'count'},//, width: 65},
                {header: 'Text', dataIndex: 'text', flex: 1},//, width: 525},
                {
    		header: 'Waived', 
    		dataIndex: 'waived'//,
    //		width: 65
    	    },
    	    {
    		xtype: 'actioncolumn',
    		items: [{
    			icon: './images/add.png',
    			tooltip: "Modify the waivers associated with this row.",
    			handler: function(grid, rowIndex, colIndex){
    				//alert("Button clicked");
    				var record = summaryGrid.getStore().getAt(rowIndex);
    				WaiverRowIndex = rowIndex;
    				WaiverCode = record.get("code");				
    				WaiverSource = "context";
    				console.log(WaiverCode);
    				waiverWin.show();
    			}
    		},
    		{
    			icon: './images/remove.png',
    			tooltip: "Modify the waivers associated with this row.",
    			handler: function(grid, rowIndex, colIndex){
    				//alert("Button clicked");
    				var record = summaryGrid.getStore().getAt(rowIndex);
    				WaiverRowIndex = rowIndex;
    				WaiverCode = record.get("code");				
    				WaiverText = record.get("text");
    				WaiverSource = "context";
    				WaiverType = "ALL";
    				Ext.MessageBox.confirm('Confirm', 'Remove all waivers on messages with Code: '+WaiverCode, removeWaiver);
    
    
    			}
    		}]
    	    },	
            ],
    	bbar: Ext.create('Ext.PagingToolbar', {
    		pageSize: 25,
    		store: 'summary-data',
    		displayMsg: 'Displaying messages {0} - {1} of {2}',
    		emptyMsg: "No messages to display"
    		}),
    	listeners: {
    			itemdblclick: function(dv, record, item, index, e) {
    				CodeRegexp = record.get("code");
    				TypeRegexp = record.get("type");
    				globalRefresh("true");		
    			}
    		},
    	viewConfig: {
    		getRowClass: function(record) {
    			if(record.get('type') == "Error"){
    				return 'error-row';
    			}else if(record.get('type') == "Warning"){
    				return 'warning-row';
    			}else{
    				return 'normal-row';
    			}
    		}		
    	}
    I would greatly appreciate any help anyone might have regarding why Chrome is rendering this grid so strangely. Thank you.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    That is indeed strange. Any chance you can post a stand-alone test case so we can have a play with it?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •