MAF.element.Grid

The Grid object extends the Container object.

  • Each cell is fixed in size.
  • The grid is a container recieving info from its cells to have a single entry point to listen on.
  • All cells are based on descendants of MAF.element.GridCell
  • cellCreator() is a required method that returns a cell with no data.
  • cellUpdater() is a required method that will update a cell with data.

new MAF.element.Grid()

Example

new MAF.element.Grid({
  rows: 2,
  columns: 2,
  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 (cell, data) {
     cell.text.setText(data.label);
  }
}).appendTo(this);

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}

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}

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}

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}

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

id : {String} inherited

The unique id of this class

manageWaitIndicator : {Boolean}

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

orientation : {String}

Horizontal or verticale orientation of the grid.

render : {Boolean}

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

rows : {Number}

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)

Attach multiple accessory components to this component.

Parameters:

Name Type Description
arguments Array

Contains muliple accessory components.

Returns:

This component.

attachAccessory(accessory)

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()

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}

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)

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()

Give the grid focus.

focusCell(target)

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}

Returns:

With row, column, rows and columns

getCellCount() → {Number}

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}

Parameters:

Name Type Description
c Object | Number

Can be a Cell, index or a row.

Returns:

Dataset Index.

getCellDataItem(c) → {Mixed}

Parameters:

Name Type Description
c Mixed

Can be a cell, index, or row.

Returns:

Returns a dataset item.

getCellDimensions() → {Object}

Returns:

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

getCellIndex(a, b) → {Number}

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()

Returns:

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

getDataItem(index) → {object}

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}

Returns:

Row and column properties of the last focused cell.

getFocusIndex()

Returns:

Index of last focused cell.

getPageCount()

Returns:

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

getStartIndex()

Returns:

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

getState() → {Object}

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()

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}

Returns:

Starting index of the page containing the desired data item.

releaseFocus(direction, event) → {boolean}

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)

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)

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}

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.