PDA

View Full Version : extjs 4.1 grid panel css stayling



asher2007
18 May 2012, 2:10 AM
i am having trouble trying to change the default grid css
tried using cls,bodyCls ,commponentCls nothing worked!!
i didn't tried to override sencha default css
but to create my own class and apply it on my specific component
since there are other grid panel in my app and i don't want to change their style

pleas help!!

any help would be appreciated

scottmartin
18 May 2012, 8:38 PM
Are you trying to change the entire look of the grid? You will need to look into theming:
http://docs.sencha.com/ext-js/4-0/#!/guide/theming
http://www.rallydev.com/engblog/2011/10/07/a-guide-to-custom-themes-in-extjs-4/comment-page-1/

Regards,
Scott.

sword-it
18 May 2012, 10:29 PM
Hi,
You need to give your custom styling for this classes and add them after default ExtJs styling sheet.

x-grid-row Applied to the <tr> element for each row of the grid.
x-grid-row-alt Applied to the <tr> element for alternate rows of the grid.
x-grid-cell Applied to the <td> element for each cell.
x-grid-cell-first Applied to the <td> element for the first cell in each row.
x-grid-cell-last Applied to the <td> element for the last cell in each row.
For examples and resulted screen shots, check this:http://skirtlesden.com/articles/styling-extjs-grid-cells

asher2007
19 May 2012, 12:38 AM
i already tried the above solutions
the problem is that the i am styling a single page in the app we are working on
and i don't want to change the css style of the grid for every one but just on my single grid

i tried adding cls to the grid like 'my-custom-grid'

and change css properties like

.my-custom-grid .
x-change-cell {
background-color: #B0FFC5;
color:green;
}

OR

.my-custom-grid .x-column-header-inner {
zoom: 1;
position: relative;
white-space: nowrap;
line-height: 22px;
padding: 0px 6px 12px 96px;
background-color:red;
}

the code below isn't good for me since it will change the style for all the grids used in the app


.x-change-cell {


background-color:#B0FFC5;
color:green;
}


* don't forget i am using extjs 4.1 and again any help will be appreciated

skirtle
19 May 2012, 9:21 AM
Whether you're using 4.1 or 4.0 it's all pretty much the same. The cls config is the correct way to apply a CSS class to the outer element of the grid. That will allow you to scope your changes to a single grid such that they don't affect all grids.

Then it should just be a case of getting the CSS right. There's no ExtJS magic here, it's all just standard CSS.

Use a suitable debugger (Firebug, Chrome Developer Tools, etc.) to inspect the elements of your page. Check that the CSS class has been applied to the outermost element. Then dig down to the elements you're trying to style. See which style rules are being applied to those elements. Are yours even in the list? If they are, if there another rule taking priority?

Make sure you understand specificity. Rules with higher specificity will take priority.

Check that your CSS file is definitely being included. Sounds silly but you can lose hours trying to find something subtle only to find it's something like that.

I don't know what x-change-cell is. Is that a CSS class you're applying yourself? Check that it appears on the elements it is supposed to be on. If you're adding it yourself I would advise against using the x- prefix. That prefix is added by ExtJS to ensure the ExtJS CSS doesn't collide with your own CSS - it defeats the entire point of it if you add the same prefix.

The CSS code you posted had a newline between the dot and the class name. I would get rid of that if I were you.

If you still can't figure out what's wrong you're going to have to provide details (i.e. code) that shows how you're applying your custom CSS classes.

asher2007
28 May 2012, 8:53 AM
thankssss its workinggggggg!!!