Assigning data types to a grid column with the web UI framework

You can use the Ext JS JavaScript framework to control the data type of a grid column, instead of using the Properties view of the Designer Workbench. You can program a column data type to depend on the data type of data in corresponding columns of the grid. The data type can be used to determine the column's alignment and sorting behavior.

About this task

To define a data type for a grid column, use one of the following config options for the column definition. Work through the order of the list when deciding which config option to use.
  1. scuiDataType

    The data type name. If this option is present, the other two config options (bindingData.sFieldConfig.mapping and bindingData.tAttrBinding) are not used.

  2. bindingData.sFieldConfig.mapping

    The source binding for the column. An attempt will be made by the application to determine the value of the config. If no data type is found for that value, bindingData.tAttrBinding is used to determine the data type.

  3. bindingData.tAttrBinding

    The target binding for the grid column. An attempt will be made by the application to determine the data type for the value of the config.

Once the data type is determined, the following column properties will be defaulted, based on the data type:
  • Alignment

    Numbers are right-justified, and dates are middle-justified.

  • Type
    The type for the store field. The sorting of grid columns is based on the type attribute of the store field config. The following list shows the default data types for different data types. For example, if you encounter a number with no decimal digits, it will be stored in the store field as an integer (int).
    • NUMBER (with no decimal digits) - int
    • NUMBER (with decimal digits) - float
    • DATE - date
    • TIME - date
    • DATETIME - date
  • renderer

    A renderer is a JavaScript function that can be used to change the text and the look and feel of the application.

  • DATE - sc.plat.DateFormatter.getDefaultRenderer('DATE')

    This JavaScript API returns the renderer which would display the date in the format specified for that user.

  • TIME - sc.plat.DateFormatter.getDefaultRenderer('TIME')

    This JavaScript API returns the renderer which would display the time in the format specified for that user.

  • DATETIME - sc.plat.DateFormatter.getDefaultRenderer('DATETIME')

    This JavaScript API returns the renderer which would display the timestamp in the format specified for that user.