MAF.control.Grid

Basically the same as MAF.element.Grid, with the exception that this has default styling.

new MAF.control.Grid()

Configs

Defines if the grid needs to behave like a carousel. True will show the first page again after the last page has passed. Default false.

cellCreator : {function} inherited

Is a required method in which you create and prepare your cell's content.

Example
cellCreator: function () {
   var cell = new MAF.element.GridCell({
      events: {
         onSelect: function(event) {
            log('Selected', this.getDataItem());
         } 
      }
   });

   cell.text = new MAF.element.Text({
      styles: {
         color: 'white'
      }
   }).appendTo(cell);
   return cell;
}

cellUpdater : {function} inherited

Is a required method in which you update your cell's content with an item from the dataset. When this method is called the cell is not visible yet.

Properties:
Name Type Description
cell MAF.element.GridCell | MAF.control.GridCell

The cell as configured in cellCreator.

dataItem Mixed

The dataset for the current page of the grid.

Example
cellUpdater: function (cell, dataItem) {
   cell.text.setText(dataItem.label);
}

columns : {Number} inherited

Number of columns in the grid.

events : {Object} inherited

A object containing one or more event handlers to be added to this object during initialization.

The possible events are defined on each component.

Example
MAF.element.Core({
  events: {
     onAppend: function () {
     	// do something
     }
  }
}).appendTo(this);

focus : {Boolean} inherited

Defines if the grid is allowed to get focus. Default true.

id : {String} inherited

The unique id of this class

manageWaitIndicator : {Boolean} inherited

Show the framework waitindicator while grid is loading or changing pages. Default true.

orientation : {String} inherited

Horizontal or verticale orientation of the grid.

render : {Boolean} inherited

Defines if the grid should be rendered automatically. Default true.

rows : {Number} inherited

Number of rows in the grid.

styles : {Object} inherited

CSS styles for the component:

Name Type Argument Default Description
width Number

The width of this component in pixels.

height Number

The height of this component in pixels.

hAlign String optional  left

Horizontal alignment of this component. (left, center, right)

vAlign String optional  top

Vertical alignment of this component. (top, center, bottom)

hOffset Number optional 

Horizontal offset of this component in pixels.

vOffset Number optional 

Vertical offset of this component.

Methods

adopt(child) inherited mixin

Append a child or several children to this Class.

Parameters:

Name Type Argument Description
child MAF.Class repeatable 

Component or element you want to add.

animate(config) inherited

Parameters:

Name Type Description
config Object

A config object

Fires:

appendChild(child) → {MAF.Class} inherited mixin

This method appends a element as the last child of this Class.

Parameters:

Name Type Description
child ELement | MAF.Class

Component or element you want to add.

Fires:

  • event:onChildAppended
  • event:onAppend

Returns:

Returns this.

appendTo(parent) inherited mixin

Add this class element as a child to the specified class.

Parameters:

Name Type Description
parent MAF.Class

Which class to append to.

attachAccessories(arguments) inherited

Attach multiple accessory components to this component.

Parameters:

Name Type Description
arguments Array

Contains muliple accessory components.

Returns:

This component.

attachAccessory(accessory) inherited

Attach a accessory component to this component so it can update on grid events.

Parameters:

Name Type Description
accessory Class

The accessory component.

Returns:

This component.

blurCell() inherited

Blur focus of the given parameter target, which can be a cell, an index, or coordinates of where to blur focus.

Returns:

This component.

changeDataset(data, reset, dataLength) → {MAF.element.Grid} inherited

Parameters:

Name Type Argument Default Description
data Array

Data objects that will change the content content of the grid.

reset Boolean optional  false

This will reset the page the grid will display to 0 when true.

dataLength Number optional 

When the data set will be larger then the passed in array in data.

Fires:

Returns:

changePage(pagenum, options) inherited

Change page of the grid.

Parameters:

Name Type Description
pagenum Number

Number of the page to change to.

options Object

Options to change the state of the grid.

detachChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Returns:

The detached child element.

eliminate(key) inherited mixin

Removes a key from the storage.

Parameters:

Name Type Description
key String

Deletes the value if key exists.

empty() → {MAF.Class} inherited mixin

Remove all Children from this Class

Returns:

Returns this.

focus() inherited

Give the grid focus.

focusCell(target) inherited

Change focus to the given parameter target.

Parameters:

Name Type Description
target Mixed

Can be a cell, an index, or coordinates of where to set focus

Returns:

This component.

freeze() → {Class} inherited

Freezes this component. Screen renders no longer trigger until thawed.

Returns:

This component.

getAbsolutePosition() → {Object} inherited

Give back the position relative to its first positioned ancestor element

Returns:

{hOffset:Number, vOffset: Number}

getCellCoordinates() → {Object} inherited

Returns:

With row, column, rows and columns

getCellCount() → {Number} inherited

Returns the cell count of a fully populated grid page. Returns this.config.rows * this.config.columns.

Returns:

The total number of cells on a grid page.

getCellDataIndex(c) → {Number} inherited

Parameters:

Name Type Description
c Object | Number

Can be a Cell, index or a row.

Returns:

Dataset Index.

getCellDataItem(c) → {Mixed} inherited

Parameters:

Name Type Description
c Mixed

Can be a cell, index, or row.

Returns:

Returns a dataset item.

getCellDimensions() → {Object} inherited

Returns:

With the width and height of the cells for the grid.

getCellIndex(a, b) → {Number} inherited

Parameters:

Name Type Description
a Object | Number

Can be a Cell, index or a row.

b Number

Row

Returns:

Index of the cell if found. Otherwise it returns -1.

getCurrentPage() inherited

Returns:

The zero-based index of the current page of data.

getDataItem(index) → {object} inherited

Get the data item with the specified index.

Parameters:

Name Type Description
index index

The index of the data item to find.

Returns:

The data item with the passed index.

getFocusCoordinates() → {Object} inherited

Returns:

Row and column properties of the last focused cell.

getFocusIndex() inherited

Returns:

Index of last focused cell.

getPageCount() inherited

Returns:

this.pager.getNumPages(). The number of pages in the dataset.

getStartIndex() inherited

Returns:

The dataset index of the first cell on the current page.

getState() → {Object} inherited

Returns:

State object of the grid.

getStyle(key) → {Object} inherited mixin

This method returns the given CSS property value of element.

Parameters:

Name Type Description
key String

CSS property to fetch.

Returns:

CSS style requested.

getStylesCopy() → {Object} inherited mixin

Returns:

Cloned object with all the styles applied on this component.

getView() → {Class} inherited

Returns:

Returns the view this class is appended on.

getVisibleCellCount() inherited

Returns the cell count of currently visible cells.

hide() → {Class} inherited

Hides this component.

Returns:

This component.

initialize() inherited

Initialize the class

moveTo(parent) inherited mixin

Move the Class element to a different class.

Parameters:

Name Type Description
parent MAF.Class

Which class to move to.

normalizeIndex() → {Number} inherited

Returns:

Starting index of the page containing the desired data item.

releaseFocus(direction, event) → {boolean} inherited

Deprecated This will probably be removed in the next major MAF release.

Parameters:

Name Type Argument Description
direction string

The direction to release the focus too.

event event optional 

Returns:

Always will return true now.

removeChild(child) → {Element} inherited mixin

Remove a child.

Parameters:

Name Type Description
child String | Number | Element

String can be first or last, Number is position of the child. Element is the child itself.

Fires:

  • event:onChildRemoved

Returns:

The removed child element.

removeChildren() inherited mixin

Remove all children.

removeSkin() → {MAF.Class} inherited mixin

Remove all skins from the Class

Returns:

This

renderSkin(name, state, agrs) inherited mixin

If a renderskin method is defined in the Theme of the class, that methods result gets injected onto the component.

Parameters:

Name Type Argument Description
name String

Skin name to render

state String optional 

State of the skin.

agrs Object optional 

Optional arguments

retrieve(key) inherited mixin

Retrieves a value from the storage.

Parameters:

Name Type Description
key String

Retrieves the value if key exists.

setFilter(fn) inherited

Parameters:

Name Type Description
fn function

A function used as a test for each element in the data set.

Example

grid.setFilter(function (value) {
  if (value.type === 'demo')
     return value;
});

setStyle(key, value) → {MAF.Class} inherited mixin

Parameters:

Name Type Description
key String

CSS property to apply to on this element.

value Object

CSS value

Returns:

This

setStyles(styles) → {MAF.Class} inherited mixin

This method modifies element's CSS style properties. Styles are passed as a hash of property-value pairs in which the properties are specified in their camelized form.

Parameters:

Name Type Description
styles Object

Object with CSS styles to apply to the element.

Returns:

This

Example

.setStyles({
   backgroundColor: '#900',
   fontSize: '12px'
});

shift(type, options) inherited

Shifts the grid to the page based on the parameter type.

Parameters:

Name Type Description
type String

You can use:

  • first - Shift grid to the first page.
  • last - Shift grid to the last page.
  • up - Shift grid to the previous page.
  • down - Shift grid to the next page.
  • left - Shift grid to the previous page.
  • right - Shift grid to the next page.
options Object

Options to change the state of the grid.

show() → {Class} inherited

Shows this component.

Returns:

This component.

store(key, value) inherited mixin

Saves a value to be availeble on the instance this Library is placed.

Parameters:

Name Type Description
key String

Key needs to be string.

value Mixed

Supports the storing of Strings, Numbers, Objects, Arrays. basically any JSONeable value.

suicide() inherited mixin

Destroy and cleanup this Class and all its children.

thaw() → {Class} inherited

Thawes this component. Screen renders can trigger again.

Returns:

This component.

updateState(state) → {Object} inherited

Parameters:

Name Type Description
state Object

Object to update the states of the grid with.

Returns:

The updated state.

Events

onAnimationEnded

Fired when a animation on this component has ended.

onAppend

Fired when component has appended to a parent. Update visual appearances by applying a Theme style and rendering the skin.

onBlur

Fired when the component is blurred.

onChangeDisabled

Fired when this component changes it enabled or disabled state.

onChangePage

Fired before a page on the grid will be changed.

onDatasetChanged

Fired when the data set of the grid has changed.

onDisable

Fired when this component changes it state to disabled.

onEnable

Fired when this component changes it state to enabled.

onFocus

Fired when the component recieves focus.

onNavigate

Fired when a navigation happens when the component has focus.

onPageChanged

Fired after a page on the grid has changed.

onSelect

Fired when the component is selected.

onStateUpdated

Fired when state of the grid is updated/changed.