RowExpander

Feature

The plugin/feature disabled state.

For a feature that is off by default that you want to enable later during runtime, configure it with disabled : true.

const grid = new Grid({
     features : {
         featureName : {
             disabled : true // on and disabled, can be enabled later
         }
     }
});

// enable the feature
grid.features.featureName.disabled = false;

If the feature is disabled by default, and you want to include and enable the feature, configure it as true:

const grid = new Grid({
     features : {
         featureName : true // on and enabled, can be disabled later
     }
});

// disable the feature
grid.features.featureName.disabled = true;

If the feature is on by default, but you want to turn it off, configure it as false:

const grid = new Grid({
     features : {
         featureName : false // turned off, not included at all
     }
});

If the feature is enabled by default and you have no need of reconfiguring it, you can omit the feature configuration.

Has a corresponding runtime disabled property.

The listener set for this object.

An object whose property names are the names of events to handle, or options which modifiy how the handlers are called.

See addListener for details about the options.

Listeners can be specified in target class config and they will be merged with any listeners specified in the instantiation config. Class listeners will be fired first:

class MyStore extends Store({
    static configurable = {
        listeners : {
            myCustomEvent() {
            },
            load : {
                prio : 10000,
                fn() { // this load listener handles things first }
            }
        }
    };
});

let store = new MyStore({
  listeners: {
    load: () => { // This load listener runs after the class's },
    ...
  }
});

Handlers as function name

Object event handlers may be specified as a function name. If a string is specified, it is the name of the function in the thisObj object.

If the string begins with up., this object's ownership hierarchy (if present) is scanned for an object which implements that function name:

new Popup({
    tbar : {
        items : {
            myCombo : {
                type      : 'combo',
                editable  : false,
                label     : 'Type',
                listeners : {
                    // Look in owner chain for this function name
                    change : 'up.onFilterChange'
                },
                items     : [
                    'Event',
                    'Task',
                    'Appointment'
                ]
            }
        }
    },
    items : {
        ...
    },
    onFilterChange({ value }) {
        // Handle event type selection here
    }
});

Provide a column config object to display a button with expand/collapse functionality. Shown by default, set to null to not include.

new Grid({
   features : {
       rowExpander : {
           column: {
               // Use column config options here
               region: 'last'
           }
       }
   }
});

The name of the Grid event that will toggle expander. Defaults to null but can be set to any event such as cellDblClick or cellClick.

features : {
    rowExpander : {
        triggerEvent : 'cellclick'
    }
}

A widget configuration object that will be used to create a widget to render into the row expander body. Can be used instead of providing a renderer.

If the widget needs a store, it can be populated by use of the dataField config. This will create a store from the expanded record's corresponding dataField value, which needs to be an array of objects or a store itself.

new Grid({
   features : {
       rowExpander : {
           widget : {
               type : 'detailGrid',
           },
           dataField : 'orderDetails'
       }
   }
});

If there is multiple regions, you can configure each region like so:

new Grid({
    features : {
        rowExpander : {
            widget : {
                // The region name is the property, and its widget config the value
                left : {
                   type : 'detailGrid',
                   // If your widgets uses different data sources, put the dataField
                   //  property in the widget configuration object
                   dataField : 'orderDetails'
               },
               middle : {
                   type : 'summaryGrid',
                   dataField : 'sumDetails
               },
               // No expander here
               right : null
            }
        }
    }
})

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding runtime catchEventHandlerExceptions property.

An object where property names with a truthy value indicate which events should bubble up the ownership hierarchy when triggered.

const container = new Container({
    items : [
       { type : 'text', bubbleEvents : { change : true }}
    ],

    listeners : {
        change() {
            // Will catch change event from the text field
        }
    }
});

Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.

const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});

Has a corresponding runtime callOnFunctions property.

A class translations of which are used for translating this entity. This is often used when translations of an item are defined on its container class. For example:

// Toolbar class that has some predefined items
class MyToolbar extends Toolbar {

    static $name = 'MyToolbar';

    static configurable = {
        // this specifies default configs for the items
        defaults : {
            // will tell items to use the toolbar locale
            localeClass : this
        },

        items : {
            // The toolbar has 2 buttons and translation for their texts will be searched in
            // the toolbar locales
            agree :{ text : 'Agree' },
            disagree :{ text : 'Disagree' }
        }
    };

   ...
}

So if one makes a locale for the MyToolbar class that will include Agree and Disagree string translations:

    ...
    MyToolbar : {
        Agree    : 'Yes, I agree',
        Disagree : 'No, I do not agree'
    }

They will be used for the toolbar buttons and the button captions will say Yes, I agree and No, I do not agree.

List of properties which values should be translated automatically upon a locale applying. In case there is a need to localize not typical value (not a String value or a field with re-defined setter/getter), you could use 'localeKey' meta configuration. Example:

 static configurable = {
      localizableProperties : ['width'],

      width : {
          value   : '54em', // default value here
          $config : {
              localeKey : 'L{editorWidth}' // name of the property that will be used in localization file
          }
      }
  };

The implementation of this function is called each time the body of an expanded row is rendered. Either return an HTML string, a DomConfig object describing the markup or any Widget configuration object, like a Grid configuration object for example.

new Grid({
   features : {
       rowExpander : {
           renderer({record, region, expanderElement}){
               return htmlToBeExpanded;
           }
       }
   }
});

Or return a DomConfig object.

new Grid({
   features : {
       rowExpander : {
           renderer({record, region, expanderElement}){
               return {
                  tag       : 'form',
                  className : 'expanded-row-form',
                  children  : [
                      {
                          tag        : 'textarea',
                          name       : 'description',
                          className  : 'expanded-textarea'
                      },
                      {
                          tag        : 'button',
                          text       : 'Save',
                          className  : 'expanded-save-button',
                      }
                  ]
               };
           }
       }
   }
});

Or return a Widget configuration object. What differs a Widget configuration object from a DomConfig object is the presence of the type property and the absence of a tag property.

new Grid({
   features : {
       rowExpander : {
           async renderer({record, region, expanderElement}){
               const myData = await fetch('myURL');
               return {
                  type : 'grid',
                  autoHeight : true,
                  columns : [
                      ...
                  ],
                  data : myData
               };
           }
       }
   }
});

It is also possible to add markup directly to the expanderElement.

new Grid({
   features : {
       rowExpander : {
           renderer({record, region, expanderElement}){
               new UIComponent({
                   appendTo: expanderElement,
                   ...
               });
           }
       }
   }
});

The renderer function can also be asynchronous.

new Grid({
   features : {
       rowExpander : {
           async renderer({record, region, expanderElement}){
               return await awaitAsynchronousOperation();
           }
       }
   }
});