Right Click on Grid header and i can't find checkboxes to hide/show column names

[sreenija]

hi !

I have a grid when i right click on column header

it shows me columns option -> then list of columns
but in the drop down i can see only column names but no check boxes are visible beside them

i included ext-all.css

Thank You
sreenija

[jay@moduscreate.com]

are you getting 404's in your firebug console?

[sreenija]

No i am not getting any 404's
Please help me
even my column header is not showing up/down arrows when hit it to sort

Thanks for replying
sreenija

[jay@moduscreate.com]

can you paste your code in php or code tags please?

[mjlecomte]

The references to your css are not correct. Use firebug to inspect your XHR images...it will show all images downloaded, etc. Some are likely red (meaning it couldn't find them).

You may have a correct link to your css file, but if you moved it, you may have screwed up the relative references inside that file to default images used in grid.

[sreenija]

i followed scott walter's demo and build the project

into my project folder:
i copied css and images folders of ext 1.1
also ext-all.js and ext-all-debug.js
then parallel to them i placed my javascript file

some code of my javascript file:


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

friendcm = new Ext.grid.ColumnModel([
{header: "Friend Name", width: 75, sortable: true, dataIndex:'friends'},
{header: "VN",hidden:true, width: 75, sortable:true, dataIndex:'viewname'},
{header: "Status", width: 75, sortable: true, dataIndex:'status'}
]);

dsforgrid = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'/listfriends.do?username='+uname}),
reader: new Ext.data.JsonReader({root: 'data'},[{name: 'friends'},{name:'viewname'},{name:'status'}])});

grid = new Ext.grid.EditorGrid('NewDiv'+l, {ds:dsforgrid, cm:friendcm,autoSizeColumns:true,enableRowHeightSync:true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})});
var gridFooter = grid.getView().getFooterPanel(true);
// add a paging toolbar to the grid's footer

var paging = new Ext.PagingToolbar(gridFooter, dsforgrid, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying friends {0} - {1} of {2}',
emptyMsg: "No Data To Display"
});


my grid footer is fine displaying all images like naxt page,lastpage,first page,loading e.t.c

but i wonder why the check boxes are not showing up if i want to show or hide a column
i can see only column names but no check boxes left side of colmn names
and another crucial thing i observed is :
when i right click on my column header the images in the menu seem like trying to load but the options in the menu are moving to most left
i.e., i think they are occupying the space given to images like
column names sitting on check boxes

I even don't have any 404's in my firebug
is this the problem
please let me know
how to fix this
Please see the attachment in my next reply
Thank You
sreenija

[sreenija]

Please see the Attachment
I have attached a screenshot
You will get a clear idea why check boxes/icons are not visible beside column names/options
in the menu when i right click on column header

as mjlecomte said:
Use firebug to inspect your XHR images...it will show all images downloaded, etc. Some are likely red (meaning it couldn't find them).
My fire bug is showing all images.nothing is marked red.
ThankYou
sreenija

[jsakalos]

i followed scott walter's demo and build the project

into my project folder:
i copied css and images folders of ext 1.1
also ext-all.js and ext-all-debug.js
then parallel to them i placed my javascript file



You cannot do this. Ext 2.0 has its own set of css and images that have to be included for UI to show properly. Do it standard way taking an example as a model.

[mjlecomte]

Please see the Attachment
I have attached a screenshot
You will get a clear idea why check boxes/icons are not visible beside column names/options
in the menu when i right click on column header

as mjlecomte said:
Use firebug to inspect your XHR images...it will show all images downloaded, etc. Some are likely red (meaning it couldn't find them).
My fire bug is showing all images.nothing is marked red.
ThankYou
sreenija

When you go Firebug, Net, Images, all images used to render page should show.

In that list of images should be for example checked.gif. Is it there? Is it red?

When you go Firebug, Net, CSS, all css files referenced by the page should show. Do you see ext-all.css? Is it red?


First answer on both needs to be yes. Second answer should be no, if it's red then your relative references are screwed up or you need to manually move images around accordingly.

[sreenija]

Please see the attachment
it's a screen shot of my firebug. it is looking at all the image files.
Nothing is marked red.
please help me.
i still wonder why the column names in the menu are sitting over the check boxes

[jay@moduscreate.com]

I'm going to throw this out there:

copy extjs/resources to the root of your website. does that fix it?

[sreenija]

sorry djliquidice
my grid still looks the same way as shown in the screenshot
menu text occupying the space of menu images
i am completely bewildered and :s

[jsakalos]

Download Ext http://extjs.com/deploy/ext-2.0.1.zip
Extract it to subdirectory ext under your server root
Check that you have {server-root}/ext/resources
Put your html file to the server root directory
Include the following in the head of your html file:

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

[jaimeperry]

I don't see the icons on grid header context menus but only in FF. They show up fine in IE6/7. I'm using the standard ext images and my resources path is correct.

Also is there a way to stop the grid cell lines from bleeding through the context menus ???

[sreenija]

Thanks a lot for all of your replies.
when i try with a new setup.it's working.
but i wonder why its not working for my old one.
the position of css and images is same in my old and new set up's. :s

Thanks a lot
sreenija

[jsakalos]

I don't see the icons on grid header context menus but only in FF. They show up fine in IE6/7. I'm using the standard ext images and my resources path is correct.

Also is there a way to stop the grid cell lines from bleeding through the context menus ???

Browser can cache old files => Ctrl + R, or delete browser's cache and reload. There is no other reason why one browser would display images and another not from the same server.

[sreenija]

hi jaimeperry
did u by any chance modify ext-base.js
like did u remove BLANK_IMAGE_URL property in ext-base.js to stop your application looking at extjs.com.
If so set your own local path to s.gif
like: BLANK_IMAGE_URL:"./images/gray/s.gif"
if images folder is in your project root