Search code examples
javascriptcssextjsextjs4

Ext Js 4 "white-space" only for one grid in project

Dear StackOverFlowers )

I am trying to style only one grid in my ExtJs 4 project. I want it to be "multiline" i.e.

    .x-grid-row .x-grid-cell-inner {
    white-space: normal;
}
.x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
    white-space: normal;
}

But if I modify css like above, all my grids became multiline. And in general how can I style only one component in project? For example if I want color only one tab in tabpanel (first or second) or color one of accordion titles?

If anyone can help me I will be really appreciate ^.^

Solution

  • You can try adding an Id to the control and use it as a selector to filter out unwanted components.
    Lets say your grid id is gridx use

    #gridx .x-grid-row .x-grid-cell-inner {
    white-space: normal;
}
#gridx .x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
    white-space: normal;
}