v7.3.0
SupportExamplesFree Trial

Upgrade guide for Grid v7.3.0

Removed content: var(--fa) convenience rule from .b-icon / .b-fw-icon

The CSS convenience rule content: var(--fa) has been removed from the .b-icon::before and .b-fw-icon::before selectors. This rule previously allowed using Font Awesome icon classes like fa-book without also specifying the fa base class, but it interfered with using custom icon fonts alongside Bryntum products.

If you use Font Awesome icons with b-icon or b-fw-icon classes, you now need to include the fa base class.

Old code

// Button icon (still works - Button auto-adds `fa` class)
new Button({ icon : 'fa-book' });

// Direct HTML (BROKEN - needs `fa` class)
'<i class="fa-book"></i>'

// DomClassList (BROKEN - needs `fa` class)
domConfig.className['fa-book'] = 1;

New code

// Button icon (still works, but recommended to include `fa`)
new Button({ icon : 'fa fa-book' });

// Direct HTML (fixed)
'<i class="fa-book"></i>'

// DomClassList (fixed)
domConfig.className['fa'] = domConfig.className['fa-book'] = 1;
The `Button` and `MenuItem` widgets automatically add the `fa` base class when the icon starts with `fa-`, so existing code using these widgets will continue to work. However, we recommend updating to include `fa` explicitly for clarity and consistency.
If you set `iconCls` on event, resource, or timeRange records (e.g., `iconCls: 'fa-cog'`), you must now include the `fa` base class: `iconCls: 'fa fa-cog'`. Calendar, Scheduler, and other products that render these icons with the `b-icon` class will no longer display them correctly without the `fa` base class.

relayAll now propagates return false

The relayAll method now propagates return false from the relay target back to the original event trigger. Previously, return false from relayed listeners was silently ignored because forEach was used internally, which cannot propagate return values.

This means that if a listener on the relay target returns false to cancel an event, the original trigger() call will now also return false, potentially aborting further event processing (such as preventing a default action). It will also prevent any further listeners registered for the same event from being called, matching the behavior of direct event listeners.

If your code relies on relayAll listeners returning false without affecting the source object, you need to adjust your listeners to not return false, or handle the cancellation in the source object.

**Watch out for implicit returns in arrow functions.** Arrow functions without curly braces return their expression result. If the expression evaluates to `false`, it will now abort further listeners: 
// DANGEROUS: implicit return of `false` will abort further listeners
target.on('sourceaction', () => this.value = false);

// SAFE: wrap in curly braces to avoid implicit return
target.on('sourceaction', () => { this.value = false; });

// SAFE: assignment results that are truthy won't cause issues
target.on('sourceaction', () => this.clicked = true);

// DANGEROUS: implicit return of `0` is falsy, will abort further listeners
target.on('sourceaction', () => this.count = 0);

// SAFE: wrap in curly braces
target.on('sourceaction', () => { this.count = 0; });
Review your `relayAll` listeners for arrow functions that may implicitly return a falsy value.

Old behavior

source.relayAll(target, 'source');

// This return false was silently ignored — source.trigger() still returned undefined
target.on('sourceaction', () => false);

// trigger() returned undefined, action was NOT cancelled
const result = source.trigger('action');

New behavior

source.relayAll(target, 'source');

// This return false now propagates back to the source
target.on('sourceaction', () => false);

// trigger() now returns false, action IS cancelled and no further listeners are called
const result = source.trigger('action'); // result === false

enableSticky config deprecated

The enableSticky grid config has been deprecated. Use the StickyCells feature instead:

Old code

new Grid({
    enableSticky : true
});

New code

new Grid({
    features : {
        stickyCells : true
    }
});

The old enableSticky config will continue to work until 8.0.0, but will log a deprecation warning.

StickyCells contentSelector config deprecated

The feature-level contentSelector config has been replaced by the per-column stickyContent config, which gives finer control over which columns participate in stickiness.

Old code

new Grid({
    features : {
        stickyCells : {
            contentSelector : '.my-header'
        }
    }
});

New code

new Grid({
    features : {
        stickyCells : true
    },
    columns : [
        { field : 'name', text : 'Name', stickyContent : '.my-header' },
        { field : 'other', text : 'Other', stickyContent : false } // Opt out
    ]
});

The old contentSelector config will continue to work until 8.0.0 as a fallback for columns that do not specify their own stickyContent value.

Contents