View Full Version : How to: fire rowclick event of GridPanel ????

16 Jul 2010, 8:36 AM
I want to simulate a click in the first row right after the grid is loaded

to do so I thought I could use

rowclick (http://www.sencha.com/deploy/dev/docs/source/GridPanel.html#event-Ext.grid.GridPanel-rowclick) : ( Grid this, Number rowIndex, Ext.EventObject e )

but what should I put in Ext.EventObject?

the variable grid as in "grid = new Ext.grid.GridPanel" ?

if yes, what should I put in GRID ??

16 Jul 2010, 9:23 AM
Can't you just call the handler routine?

Unless you have multiple, unknown handler attached, in which case, call the fireEvent method. It's documented!

And you don't need to pass an event unless one of your handlers uses it!

Obviously, the grid is the grid you are firing the event from!

16 Jul 2010, 9:34 AM
hey thx!!!

another question, wich css should I alter to get my first row always in a different color no matter what??

16 Jul 2010, 9:36 AM
Poke the DOM. I think the first row does have a special class, so you'll have to look to see what.

Then just add a rule to your inn-house stylesheet.

16 Jul 2010, 9:39 AM
im sorry, im a little newbie, and from Brazil, so I didnt get what "Poke the DOM" really means...
can you help me?

16 Jul 2010, 9:59 AM
Right click it in Firefox (of course you have Firebug) and choose "Inspect Element"

This also works in Chrome.

IE should be your last browser of choice for development. Ensure it runs on IE (You'll probably have to fix stuff), but don't develop with it.

16 Jul 2010, 10:07 AM
ok i got it.

in firebug, my right side I have the DOM tab, but what should i look for in there:?

16 Jul 2010, 10:16 AM
right click on that first row.

Each row is a <table> inside a <div> You can see the elements there.

There'll be a class like x-grid3-first-row or something like that. Look around. Explore.

16 Jul 2010, 10:16 AM
It's the HTML tab you want, not the DOM tab.

On the right side there is styling info.

16 Jul 2010, 10:22 AM
man, this is so cool!

but i couldnt find any that reffers to the first row,

inside the code however I looked for "first" and found x-grid3-cell-first

but the grid doesnt use it? I altered in my style like this>

.x-grid3-cell-first {font-weight: bold;}

it didnt do anything

16 Jul 2010, 10:29 AM
It's there, quite clear. Each row is a div. Look at the first one.

16 Jul 2010, 10:30 AM
I thought you wanted to style rows, not cells.

16 Jul 2010, 10:40 AM
it is the row, but I couldnt find the style of it, just the cell one that i posted...
and it didnt work...

16 Jul 2010, 10:50 AM
I clicked with right button in the first row

and i got this :

.ext-strict .x-grid3-cell-inner, .ext-strict .x-grid3-hd-inner {width:auto;}ext-all.css (line 2178).x-grid3-cell-inner, .x-grid3-hd-inner {overflow:hidden;padding:3px 3px 3px 5px;white-space:nowrap;}ext-all.css (line 2149)

Inherited fromtd.x-grid3-col

.x-grid3-row td, .x-grid3-summary-row td {font:11px/13px arial,tahoma,helvetica,sans-serif;}ext-all.css (line 5681).x-grid3-row td, .x-grid3-summary-row td {line-height:13px;}ext-all.css (line 2118)

Inherited fromdiv.x-grid3-row

.x-grid3-row {cursor:default;}ext-all.css (line 2190)

Inherited fromdiv#ext-gen23.x-panel-body

.x-panel-body {border-style:none solid solid;}ext-all.css (line 3694)

Inherited fromdiv#ext-comp-1006.

.x-panel {border-style:solid;}ext-all.css (line 3680)

Inherited fromdiv

element.style {text-align:left;}

Inherited frombody#ext-gen5.

body {font-family:helvetica,tahoma,verdana,sans-serif;font-size:13px;}

16 Jul 2010, 10:57 AM
That's the CSS. Look at the HTML

16 Jul 2010, 11:05 AM
i got "x-grid3-cell-inner x-grid3-col-1" from html but nothing saying row #

16 Jul 2010, 11:15 AM
the row is without any class just : <tr>

16 Jul 2010, 11:26 AM
Go outwards from there.

16 Jul 2010, 11:50 AM
what do you mean? outwards? how do i put a class in this tr?

16 Jul 2010, 12:07 PM
the tr is contained

You can see that.

It is inside a element which is inside a element which is inside a element which is inside a element which is inside a element...

You can SEE that.

Go outwards.

19 Jul 2010, 3:22 AM
i finally got it thank you very much! it is the


thanks for helping find it out

19 Jul 2010, 3:47 AM
just for the record

i could make the first row text turns in bold...

dunno why... however i could change its background color, so it is also ok for me

i tried to put !important and everything, but it didnt change to BOLD

19 Jul 2010, 3:48 AM
i finally got it thank you very much! it is the


thanks for helping find it out

Well done. That process of exploration and discovery will have improved your skills. You're a better developer now than you were 2 days ago!

19 Jul 2010, 3:49 AM
You need to make your CSS selector more specific.

Make it target the inner div that is inside each <td> cell.

19 Jul 2010, 4:19 AM
i think i understand now,

because the inner td has the last class add, it will take the last one right? so it wont get bold?

19 Jul 2010, 4:37 AM
got another problem...

it all worked well local, but when i uploaded in the linux server in the web, it didnt work...

any ideas why?

19 Jul 2010, 4:38 AM
No. How could we have any idea?

19 Jul 2010, 4:43 AM
ok... maybe you have heard some thing like it before. but hey, thx for helping me out ^^

19 Jul 2010, 4:54 AM
I've heard lots of "it didn't work"!

19 Jul 2010, 5:30 AM
I've heard lots of "it didn't work"!

19 Jul 2010, 5:34 AM
Animal is asking what didn't work and you answer with "ok"?

19 Jul 2010, 5:43 AM
i didnt understand he meant what didnt work, at least i dont think he said that...

but we were talking about the changing the class of the first row making the text bold
i said it all worked well in local, but when I put it online, nothing happened, it didnt work, no changes in the first row

i asked if he knew why

he said how could he know

I thought maybe that happened before with someone else.

but if not, ok, what can i do, right? just keep searching

19 Jul 2010, 5:48 AM
Well, did you check your CSS was arriving? Did you look at the DOM to see from where any styling was being applied?

19 Jul 2010, 5:48 AM
You have to clear your browser cache. IE loads stylesheets from the cache, even if you force refresh the page.

This is why I attach a version number to my stylesheets, e.g.

<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css?version=20100608" />

19 Jul 2010, 5:53 AM
it was the browser cache. thx again for everything,
i've now learned how to debug better in firebug

problems solved