Grid Component

Overview

The Grid Component is intended to be used whenever it is needed to display & manipulate data organized as a Grid.

Component Identification Chart

Name Grid Component

Identifier CMGR01

Version 1.0

Scope of Supply gridView.js implemented javascript component.

Component Technology Javascript.

Requirements ExtJS library.

Interface Specification

interface Grid{
    typedef string URL;
    
    struct ConfigurationReader{
        string id;
        string record;
    }

    struct Column{
        unsigned short ID;
        string dataIndex;
        string header;
        boolean hidden;
        any renderer;
        unsigned short width;
    }

    struct Record{
        string dateFormat;
        string mapping;
        string name;
        string type;
    }

    sequence <Column> Columns;
    sequence <Record> Records;

    void init(in string placeToBeRendered);
    void showColumn(in unsigned short columnId);
    void hideColumn(in unsigned short columnId);
    string getSelectedRowIdFromGrid(in Grid grid);

};
interface extern{
    /**
    * Sets the datastore from where to read data.
    * Example of usage:
    *           // Tells the Grid the URL to retrieve the data. In this case we are using a servlet.
    *           component.setDataStore('http:/localhost:8080/schedule/include/storeFlatListProvider.jsp?module=30');
    * @param URL the URL where the datastore is
    */
    void setDataStore(in URL url);
    
    /**
    * Sets the configuration to be used for the data reader. This information is used with the datastore in order to retrieve data.
    * Example of usage:
    *           // Set the identifier for each Grid record as that record field named 'id'.
    *           // Retrieves all records from the datastore having such 'id' value.
    *           component.setConfigurationReader('id', '*:has(id)');
    * @param id the element within the row that provides an ID for the record
    * @param record the repeated element which contains row information
    */
    void setConfigurationReader(in string id, in string record);
    
    /**
    * Adds a record definition to the Grid's data store. Basically, it tells the Grid how to map a record into the datastore with
    * a record into the Grid.
    * Example of usage:
    *           // Add a record to this grid named 'startDate', and map it to the record into the datastore named 'startDateTime'.
    *           // The data type for this record is 'date', and the format is 'Y-m-d\\TH:i:s'
    *           component.addRecord('Y-m-d\\TH:i:s', 'startDateTime', 'startDate', 'date');
    * @param dataFormat the format for date types. It doesn't make any effect in case data type is not date
    * @param mapping in case of record name into the datastore will be different from record name into the Grid, then use this
    *           attribute to map them
    * @param name name for the record into the grid. It's is related to the identifier 'dataIndex' from grid columns
    * @param type the grid record data type
    */
    void addRecord(in string dateFormat, in string mapping, in string name, in string type);
    
    /**
    * Adds a column to the Grid. This information is used along with the Grid records in order to render the grid.
    * Example of usage:
    *           // Put a column with a 'Start' header, which will be identified as 'startDate', and will be visible by default.
    *           // Then, render the value as 'm/d/Y', and let the grid to automatically handle the column width.
    *           component.addColumn('startDate', 'Start', false, Ext.util.Format.dateRenderer('m/d/Y'), null);
    * @param dataIndex it is the column identifier. Each time the grid is rendered, the component looks for this identifier into
    *           the grid records definition, filtering by 'name'
    * @param header the value to be put into the column header
    * @param hidden indicates whether the column will be hidden
    * @param renderer in case the value to be displayed needs to be formatted in run time, then this parameter may be used to
    *           pass the javascript function who will handle the custom rendering
    * @param widht a custom & fixed column width
    */
    void addColumn(in string dataIndex, in string header, in boolean hidden, in any renderer, in unsigned short width);
}