Search code examples
reactjsgridextreact

How to change the style (font color if there is a summary row) of Sencha Extreact Grid product

I have trouble changing the styles in the Sencha Extreact grid.

For example:

I want to change the font color of all columns to gray color. I use a renderer prop to change the font color for other columns.

This is the current condition: Current condition

Here is the example code for the grid:

<ExtGrid
    className="ppa"
    store={store}
    scrollable={true}
    plugins={{
        gridfilters: true,
        gridsummaryrow: true
    }}
    rowLines={true}
    style={{margin: 20}}
    grouped={true}
    height="755"
>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="10%" width="100%" filter='string' summaryRenderer={summarizeDate}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeLoad}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={averageSpeed}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeTime}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="8%" width="100%" filter='string' summaryRenderer={summarizeDuration}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeDistance}/>
    <ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="7%" width="100%" filter='number' summaryRenderer={summarizeDistance}/>        
</ExtGrid>

Here is the example code for the summary renderer prop:

const summarizeDate = (grid, context) => { 
    return context.records.length + ' Trips'
}

const summarizeDuration = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'duration')
    return convertSecondToHMS(sum)
}

const summarizeTime = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'time')
    return convertSecondToHMS(sum)
}

const summarizeDistance = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'distance')
    return changeValueTo1DecimalPoint(sum) + ' km'
}

const summarizeLoad = (grid, context) => {
    const sum = sumItemsInsideJSONArray(context.records, 'load')
    return changeValueTo1DecimalPoint(sum) + ' ton'
}

const averageSpeed = (grid, context) => {
    const average = averageItemsinJSONArray(context.records, 'speed')
    return changeValueTo1DecimalPoint(average) + ' km/h'
}

Now if I add a renderer prop to one of the column:

<ExtColumn text="<censored>" dataIndex="<censored>" align="center" maxWidth="10%" width="100%" filter='string' summaryRenderer={summarizeDate} renderer={renderGreyFontColor.bind(this, 'number')}/>

with the function for the renderer prop:

const renderGreyFontColor = (format, value) => (
    <span style={{ color: 'slategray'}}>
        {value}
    </span>
)

The app is error Error after adding a renderer prop

I think it happens because the context (table data) format and value have changed from a non-null and defined array type to an undefined object type.

I have tried other ways to change the font color such as:

  1. Using color rule in CSS (add a class selector in the CSS file then insert it into a className prop in the ExtGrid component)
  2. Using JSX (add color rule style to the style prop in the ExtGrid component)
  3. Using SASS
  4. Using Webpack

but none of the above codes are working.

So how to change the font color of all columns to gray color if there is a summary row?

Solution

  • I found the solution myself.

    Refer to this problem and the solution How to change the style (font color beside a clickable icon in cell) of Sencha Extreact Grid product

    The problem is pretty similar but the solution is the same.