Phone API Reference - UI Classes (Widgets) - List - cellFunc
- Kelli Higdon
Owned by Kelli Higdon
Nov 29, 2023
2 min read
Loading data...
Phone API Reference - UI Classes (Widgets) - List - cellFunc
cellFunc
Description
Function that takes row and column numbers as parameters and returns the text for a cell. When this property is set, the function is immediately executed.
Basic Example:
list.cellFunc = function(r, c) {return ""; } |
Use the cellFunc property for functions that take a row and column as parameters and return the string or image to be displayed at that position. This is more efficient because the list doesn't need to build a large data structure. The cellfunc will be called only for items that are on the screen.
The cellFunc option is recommended for large lists.
Examples
List.cellFunc to create a list of employee data
//clear the window and add a header
window.clear();
window.add(new Text(0, 0, 100, 100, "Employees"));
//add the list object
var list = new List(0, 20, window.w, window.h-20);
window.add(list);
//column widths will be 70, 70, and rest of the visible object
list.setColumnWidths(70, 70, 0); //last column will take the up as much space as possible
/* This data structure was created to take advantage of the cellFunc function and make filling out our List very easy. Rows will go in order, and are the index of the 'content' array. Each item in the content array is then an array. Each node of the inner array is a set of values which will correspond to the columns. This combination will be used to fill out all of our cells. */
var content = [
['--Emp.--', '--ID--', '--Country--'],
['Tom', '1231451', 'USA'],
['Ralph', '7567567', 'China'],
['Sam', '890294', 'Canada'],
];
//set cols and rows (rows equal to length of array
list.rows = content.length;
list.cols = 3;
// run over the cellFunc function accessing our content array each row and column at a time.
list.cellFunc = function (r, c) { return content[r][c]; };
//focus and select the first item in the list (not the header)
list.takeFocus();
list.select(1); |
List.cellFunc to create a multiplication table
//Create and add our List object
var listObj = new List(0, 20, window.w, (window.h - 20));
window.add(listObj);
// we will use this variable in a couple places. It represents how large our grid will be.
var num = 10;
//programmatically create a widths array which will be passed to setColumnWidths();
var widths = [];
while (widths.length < num) {
//all the columns are even and will fill the whole screen
widths.push(window.w/num);
}
//set rows and columns
listObj.rows = num;
listObj.columns = num;
//setColumnWidths takes a variable amount of arguments, that is why apply is used here.
listObj.setColumnWidths.apply(listObj, widths);
//set the cellFunc to return the row multiplied by the column (e.g. row 3, column 4 = 12)
listObj.cellFunc = function(r, c) { return r*c; };
//focus on the list so we can scroll
listObj.takeFocus(); |