xplain.ux.attribute.Tree

A xplain.ux.attribute.Tree (or by it’s xtype xtree) is a specialized grid that basically takes an instance of Xplain.Db.Query as input, and depicts the result of this query as a table. In contrast to an instance of xplain.ux.attribute.Window this xtree has the following pros and cons: 1) you cannot switch to a chart, 2) you cannot enable the user to freely move it on the screen, but 3) it can be easily integrated into the layout of a page just as you can integrate any other ExtJS component (panel, button, …). Moreover, as an xtree waits until the corresponding Xplain Data query has been executed, you can integrate it for instance as follows:
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    items   : [{
           xtype: 'xtree',
           width: 400,
           height: 300,
           waitForRequest: new Xplain.Db.Query({
                 groupBy:  {
                    attribute: "Patient.Gender.Gender"
                 },
                 aggregation: {
                    type: 'AVG',
                    measure: 'Patient.Age'
                 }
           })
    }]
});
In this example, an instance of Xplain.Db.Query is being defined and automatically executed. The xtree waits until the backend returns the result of this query and then depicts these results. You may also pass the ID of a query to an xtree. For instace, you may use something like this:
Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    items   : [{
           xtype: 'xtree',
           width: 400,
           height: 300,
           request: 'myQueryID'
    }]
});
xtree extends Ext.tree.Panel. Thus, an xtree can have a width, height, margin, etc.

Config Parameters

hideZeroColumns = null

An array of column names, i.e. IDs of Xplain.Db.Aggregation, for which you want to hide all rows where the corresponding aggregation value equals 0. For instance, [”# Patients”] would hide all rows where the value in the “# Patients” column equals zero.

ajaxUrl = '/xplainsession'

The URL used for all Ajax requests executed by this window.

ajaxTimeout = 0

The timeout in milliseconds used for all Ajax requests executed by this window. Defaults to 0 where 0 means that no timeout is being set.

columnsWidth = []

An array that defines the width of all columns. The width itself may be defined as string or as numeric value. Thus, the following would define that the first column has a width of 20% and the second column has a width of 200 pixels: [“20%”, 200]

requestId = ''

If you want to depict the results of an Xplain.Db.Query instance, you should use the request or waitForRequest config parameter. Otherwise, you may use the requestId parameter which is the ID / name of the query as returned by the backend.

This parameter can only be used in combination with the request config parameter.

request = null

The request parameter represents the query you would like to depict in this xtree. It may the ID of a query or an instance of Xplain.Db.Query.

waitForRequest = ''

Basically the same as the request parameter. However, this one will check if the corresponding query has already been executed. If not, it will start to execute the query and wait until the backend has finished computing this query. After that, it will depict the query results.

NOTE: This parameter is marked as “deprecated”, because in the near future, the “request” parameter will take over this functionality.

tableMode = 'separate'

Mode of the table. Either separate or overlay. If set to separate, you manually have to adapt your CSS files.

colorBar = '#D9D9D9'

The color used to depict a bar. Color has to be given as a string value which will be treated as a CSS value.

columnsWidth = []

An array that defines the width of all columns. The width itself may be defined as string or as numeric value. Thus, the following would define that the first column has a width of 20% and the second column has a width of 200 pixels: [“20%”, 200]

disableErrorMessages = false

An instance of xplain.ux.attribute.Tree will (per default) show error messages using Ext.toast messages. Set disableErrorMessages to true to disable all error messages. Instead of using an Ext.toast message, an xplainUXErrorMsg event will be triggered. The first parameter of this event will consist of the corresponding error message.

checkboxSelections = false

if true an additional column with checkboxes will be shown. The user may use these checkboxes to select / unselect rows.

NOTE: this feature currently only works if the underlying query consists of exactly one groupBy and one aggregation.

width = 400

The width of this panel. A numeric value will be interpreted as the number of pixels; a string value will be treated as a CSS value with units.

height = 300

The height of this panel. A numeric value will be interpreted as the number of pixels; a string value will be treated as a CSS value with units.

showRefRed = true

If true reference values tagged as red will be shown. The color used is defined using the colorRefRed parameter. Please note that reference values are currently in beta and might not work.

colorRefRed = "#E3405C"

The color used to depict reference values tagged as red. Will only be used if showRefRed is set to true.

showRefBlue = true

If true reference values tagged as blue will be shown. The color used is defined using the colorRefBlue parameter. Please note that reference values are currently in beta and might not work.

colorRefBlue = "#57a7ff"

The color used to depict reference values tagged as blue. Will only be used if showRefBlue is set to true.

showRefGreen = true

If true reference values tagged as green will be shown. The color used is defined using the colorRefGreen parameter. Please note that reference values are currently in beta and might not work.

colorRefGreen = "#589999"

The color used to depict reference values tagged as green. Will only be used if showRefGreen is set to true.

colorSelected = "#FFC65B"

The color used to depict selected states. Color has to be given as a string value which will be treated as a CSS value.

colorSemiSelected = "#FFE8BC"

The color used to depict semi-selected states (states that are not selected but where at least one child-state is selected). Color has to be given as a string value which will be treated as a CSS value.

showValuesAs = 'abs'

Show values as absolute or relative values. May be set to abs or rel.

isInteractive = true

If set to true this window will respond to clicks to trigger a selection or start a drill-down.

expandableTillLevel = 0

You may use this parameter to define a max level till which the user may expand the attribute hierarchy. 1 is the topmost level (root level), 2 the level below the root level, etc. A value of 0 means there will be no limitation.

filterStates = []

An array of states (state names) you would like to filter out from the result. These states will NOT be shown in the xgrid. Note: currently, this will only filter top level states.

disableTotal = false

If set to true, the total will NOT be shown.