PDA

View Full Version : gridpanel header lineup problem



YankeeImperialistDog
30 Nov 2009, 1:48 PM
What would cause the headings on a grid to be offset by column? I'll explain: The headings are off by an equal incremental amount. The heading on the first column is off by say 20px, the second is off by 40px, …. I’m using an example taken straight out of the book “Learning ExtJS” chapter 5.

Animal
1 Dec 2009, 12:19 AM
You'd have to show code and screenshots.

But you can also poke the header with Firebug and see what CSS rules are applying to it, and see what CSS file these rules came from.

YankeeImperialistDog
1 Dec 2009, 6:56 AM
Thank you (again) for your help. I'll malke it a point to just post code on all requests from here forward. I included as much as I could think of. I'd guess it's too much, but i'm always managing to not include enough. I really appreciate you help here.


Ext.onReady(function () {
var movieGenre_data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/Form/MovieGenreData/'
}),
reader: new Ext.data.JsonReader({},
['IntId', 'GenreName']),
remoteSort: false
});
var store = new Ext.data.Store({
data: [
[1, "84m.jpg", "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],
[3, "42m.jpg", "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1],
[4, "12m.jpg", "American Beauty", "Sam Mendes", "1999-10-01", 2, "... Look Closer", 19.95, true],
[5, "49m.jpg", "The Big Lebowski", "Joel Coen", "1998-03-06", 1, "The \"Dude\"", 21.9, 'true'],
[6, "94m.jpg", "Fight Club", "David Fincher", "1999-10-15", 3, "How much can you know about yourself...", 19.95, true]],
reader: new Ext.data.ArrayReader({
id: 'id'
},
['id', 'coverthumb', 'title', 'director', {
name: 'released',
type: 'date',
dateFormat: 'Y-m-d'
},
'genre', 'tagline', {
name: 'price',
type: 'float'
},
{
name: 'available',
type: 'bool'
}])
});
movieGenre_data.load();
movieGenre_data.on('load', function () {
loadGrid();
});


function genre_name(val) {
return movieGenre_data.queryBy(function (rec) {
return rec.data.IntId == val;
}).itemAt(0).data.GenreName;
};


function title_tagline(val, x, store) {
return '<b>' + val + '</b><br>' + store.data.tagline;
}


function cover_image(val) {
return '<img src=/images/imagesVideo/' + val + '>';
}



function loadGrid() {
var grid = new Ext.grid.GridPanel({
renderTo: 'myDiv',
frame: true,
title: 'Movie Database',
height: 500,
width: 800,
store: store,
columns: [{
header: 'Cover',
dataIndex: 'coverthumb',
renderer: cover_image
},
{
header: "Title",
dataIndex: 'title',
width: 150,
renderer: title_tagline
},
{
header: "Director",
dataIndex: 'director'
},
{
header: "Released",
dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
{
header: "Genre",
dataIndex: 'genre',
renderer: genre_name
},
{
header: "Tagline",
dataIndex: 'tagline',
hidden: true
},
{
header: "Price",
dataIndex: 'price'
},
{
header: "Avail",
dataIndex: 'available'
}]
});
};
});

Animal
1 Dec 2009, 7:35 AM
You must be doing something else.

I just ran this at the Firebug command line:



Ext.onReady(function () {
Ext.getBody().update('');
var store = new Ext.data.Store({
data: [
[1, "84m.jpg", "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],
[3, "42m.jpg", "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1],
[4, "12m.jpg", "American Beauty", "Sam Mendes", "1999-10-01", 2, "... Look Closer", 19.95, true],
[5, "49m.jpg", "The Big Lebowski", "Joel Coen", "1998-03-06", 1, "The \"Dude\"", 21.9, 'true'],
[6, "94m.jpg", "Fight Club", "David Fincher", "1999-10-15", 3, "How much can you know about yourself...", 19.95, true]],
reader: new Ext.data.ArrayReader({
idIndex: 0
},
['id', 'coverthumb', 'title', 'director', {
name: 'released',
type: 'date',
dateFormat: 'Y-m-d'
},
'genre', 'tagline', {
name: 'price',
type: 'float'
},
{
name: 'available',
type: 'bool'
}])
});
loadGrid();

function genre_name(val) {
val;
};

function title_tagline(val, x, store) {
return '<b>' + val + '</b><br>' + store.data.tagline;
}


function cover_image(val) {
return '<img src=/images/imagesVideo/' + val + '>';
}

function loadGrid() {
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
title: 'Movie Database',
height: 500,
width: 800,
store: store,
columnLines: true,
columns: [{
header: 'Cover',
dataIndex: 'coverthumb',
renderer: cover_image
},
{
header: "Title",
dataIndex: 'title',
width: 150,
renderer: title_tagline
},
{
header: "Director",
dataIndex: 'director'
},
{
header: "Released",
dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
{
header: "Genre",
dataIndex: 'genre',
renderer: genre_name
},
{
header: "Tagline",
dataIndex: 'tagline',
hidden: true
},
{
header: "Price",
dataIndex: 'price'
},
{
header: "Avail",
dataIndex: 'available'
}]
});
};
});


And got this:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/grid-works-as-usual.jpg

YankeeImperialistDog
1 Dec 2009, 8:25 AM
I appreciate the back and forth on this. I'll include a single page with a full example including the references to the extJS source using you posted code back to me. For me it still happns. All things remaining equal, My extJS libraries must be different. The only other difference is I'm using Windows7 and iis as a webserver. Can i have a direct link to the specific library you are using. This has to be it.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../Scripts/ext/ext-all.js"></script>
<script type="text/javascript" src="../../Scripts/ext/ext-all-debug.js"></script>
<script type="text/jscript">
Ext.onReady(function() {
Ext.getBody().update('');
var store = new Ext.data.Store({
data: [
[1, "84m.jpg", "Office Space", "Mike Judge", "1999-02-19", 1, "Work Sucks", "19.95", 1],
[3, "42m.jpg", "Super Troopers", "Jay Chandrasekhar", "2002-02-15", 1, "Altered State Police", "14.95", 1],
[4, "12m.jpg", "American Beauty", "Sam Mendes", "1999-10-01", 2, "... Look Closer", 19.95, true],
[5, "49m.jpg", "The Big Lebowski", "Joel Coen", "1998-03-06", 1, "The \"Dude\"", 21.9, 'true'],
[6, "94m.jpg", "Fight Club", "David Fincher", "1999-10-15", 3, "How much can you know about yourself...", 19.95, true]],
reader: new Ext.data.ArrayReader({
idIndex: 0
},
['id', 'coverthumb', 'title', 'director', {
name: 'released',
type: 'date',
dateFormat: 'Y-m-d'
},
'genre', 'tagline', {
name: 'price',
type: 'float'
},
{
name: 'available',
type: 'bool'
}])
});
loadGrid();
function genre_name(val) {
val;
};
function title_tagline(val, x, store) {
return '<b>' + val + '</b><br>' + store.data.tagline;
}

function cover_image(val) {
return '<img src=/images/imagesVideo/' + val + '>';
}
function loadGrid() {
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame: true,
title: 'Movie Database',
height: 500,
width: 800,
store: store,
columnLines: true,
columns: [{
header: 'Cover',
dataIndex: 'coverthumb',
renderer: cover_image
},
{
header: "Title",
dataIndex: 'title',
width: 150,
renderer: title_tagline
},
{
header: "Director",
dataIndex: 'director'
},
{
header: "Released",
dataIndex: 'released',
renderer: Ext.util.Format.dateRenderer('m/d/Y')
},
{
header: "Genre",
dataIndex: 'genre',
renderer: genre_name
},
{
header: "Tagline",
dataIndex: 'tagline',
hidden: true
},
{
header: "Price",
dataIndex: 'price'
},
{
header: "Avail",
dataIndex: 'available'
}]
});
};
});
</script>
</head>
<body>
</body>
</html>

Animal
1 Dec 2009, 8:42 AM
You have extra CSS in that page. Remove it and retest.

Does it look the same in FF? Because you can debug CSS with Firebug very easily. Right click an element, inspect it, and see what CSS is applying to it.

YankeeImperialistDog
1 Dec 2009, 8:57 AM
It lines up perfectly now. The css i took out is an auto generated when an MVC.net site is created. I don't know as much as i should about css, but that is changing. I really appreciate your patience on an issue that was quite obvoiusly minor. Had you not kept telling me to include code and examples i'd still be complaining about this.

If you ever get to Chicago dinner is on me!

KES