Phone API Reference - UI Classes (Widgets) - List - cellFunc

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

 

Return to Documentation Home I Return to Sangoma Support