View Full Version : Grid Panel Column bad Allignment

27 Jun 2012, 1:31 AM
I have a GridPanel, but, as you can see, the first column(which is locked) is not aligned like the other ones.

Is it a bug, or am I doing something wrong?


27 Jun 2012, 11:42 AM
What exact version of ExtJS4 are you using?

Left grid has a small cell above '000100' .. is this always visible or after event?


27 Jun 2012, 11:01 PM
I am using the 4.1 version. The small cell(the one that shouldn't be there) is always visible. I don't know what event you are referring to.

28 Jun 2012, 5:34 AM
I don't know what event you are referring to

I was asking it displayed right away, or after you resize the grid, or some other event.
(not important now)

In an effort to narrow this down .. does this happen when you load our online example:

If not have you tried removing any extra code that might be causing this? CSS, etc?
(example: toolbars above grid, or custom renderers in grid cells)

We will need a small working example that exhibits this problem if you are unable to find that related issue in your code. Please do not send your entire app.


9 Jul 2012, 6:19 AM
I have done something else in the meantime, but, by accident, I found out, that this problem is somehow related to the number of columns that are shown in the grid and the grid's initial width.

When the grid gets created, if it's initial width is too small and the number of columns is too big, a scrollbar is inserted at it's bottom, but only for the unlocked columns. This can be seen in the screenshot above. For some reason, this causes the insertion of that element(I believe it is a spacer) on top of the locked column.

I have tried showing some more columns, in order to make the scrollbar appear after the render of the grid and the columns looked just fine. But when I refreshed the data(from the paging toolbar), the white spaces appeared. The same could be observed when getting the next page(also from the paging toolbar). My grid is resizable and if I enlarge it, so that the scrollbar disappears and then I refresh the data, that tiny space(or spacer) disappears.

In my opinion, this means, that whenever data is loaded in the store, if it needs to insert a horizontal scrollbar, this issue will occur.

Sadly, I could not create another example, in order to help you replicate the problem.

Can you tell me what is the problem here?

Thank you,


9 Jul 2012, 7:30 AM
Sadly, I could not create another example, in order to help you replicate the problem.
Does this mean you were unable to duplicate this in an example?


9 Jul 2012, 7:32 AM
I have tried to duplicate it in a static example, but I couldn't. I will try again tomorrow, if necessary.

9 Jul 2012, 7:35 AM
The thought here is that there may be something specific to your app that is causing this and not the grid itself.

You may have to isolate this in you code, or take that section and create an example instead of using our example.


10 Jul 2012, 6:41 AM
I have finally managed to reproduce the problem and I think the data must come from some web-service.

This is why I have created a tiny Java web-app.

How can I send it to you and in what format would you like to have it(source code and/or WAR file)?

10 Jul 2012, 8:25 AM
Source is preferred.


10 Jul 2012, 1:40 PM
Here is the Servlet:

package com.test.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyService extends HttpServlet {
private static final long serialVersionUID = 1L;

public MyService() {

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int t = Integer.parseInt(request.getParameter("offSet"));
PrintWriter pw = response.getWriter();
pw.write("[{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7}]");
} else{
pw.write("[{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7},{\"c2\":\"asf\", \"c1\":\"991222\", \"c3\":7}]");

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);


and this is the html file, also containing the JavaScript code:

<!doctype html>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="./ext-all.css">
<script type="text/javascript" src="./ext-all.js"></script>

<title id='title'>HTML Page setup Tutorial</title>

<script type="text/javascript">

Ext.define('Company', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: 'MyService',
limitParam: false,
startParam: 'offSet',
pageParam: false,
reader: {
fields: [{"name":"c1"},{"name":"c2"},{"name":"c3"},{"name":"c4"},{"name":"c5"},{"name":"c6"},{"name":"c7"},{"name":"c8"},{"name":"c9"},{"name":"c10"}]

Ext.onReady(function() {

var store = Ext.create('Ext.data.Store', {
model: 'Company',

callback: function(a, b, c){
// console.log(a);
// console.log(b);
// console.log(c);

var grid = Ext.create('Ext.grid.Panel', {
store: "employeeStore",
columns: [{"header":"Col1","dataIndex":"c1","locked":true},{"header":"Col2","dataIndex":"c2"},{"header":"Col3","dataIndex":"c3"},{"header":"Col4","dataIndex":"c4"},{"header":"Col5","dataIndex":"c5"},{"header":"Col6","dataIndex":"c6"},{"header":"Col7","dataIndex":"c7"},{"header":"Col8","dataIndex":"c8"},{"header":"Col9","dataIndex":"c9"},{"header":"Col10","dataIndex":"c10"}],
height: 350,
width: 300,
title: 'Array Grid',
renderTo: 'container',

<div id='container'></div>

I hope you can figure out where the problem lies.

Thank you!


1 Aug 2012, 4:55 AM
@ID91, Scott
We found a workaround for this issue, the tweak is to delay loading of data until the entire grid is drawn. i.e a setTimeOut for store.loadData did the trick :).


1 Aug 2012, 7:20 AM
Thank you for the update.


6 Aug 2012, 1:29 AM

I have read the workaround provided by vinod.kumarv (http://www.sencha.com/forum/member.php?478190-vinod.kumarv), but, as he has said it, it is a workaround. I am still waiting for a proper solution to this problem.

Thank you!