does Nokia WRTkit have any class like GridView?

[GoOnDeveloper]

i just find ListView in the nokia WRTkit, but it just displays the contents in the form of list while i want to them to show in form of grid, does anyone happen to this or find some solutions to solve this question?? think you !!!

[GoOnDeveloper]

any body could help me ?

[jappit]

Hello GoOnDeveloper,

and welcome to Forum Nokia Discussion Boards!

There is no GridView (or similar) component in WRTKit, as you can check in its documentation:

http://www.forum.nokia.com/document/...Documentation/

As it is a library no more officially supported by Nokia, what you can do is try to implement this new component by looking at the library source code.

Pit

[GoOnDeveloper]

Hello GoOnDeveloper,

and welcome to Forum Nokia Discussion Boards!

There is no GridView (or similar) component in WRTKit, as you can check in its documentation:

http://www.forum.nokia.com/document/...Documentation/

As it is a library no more officially supported by Nokia, what you can do is try to implement this new component by looking at the library source code.

Pit

thank you for your tips.
so i have spent several hours to write this GridView, i named it GridPanel.
i put this GridPanel.js under WRTKit/UI, and it works.
my test code here:

	uiManager = new UIManager();
	var list = new ListView(null, "List");
	var ga = new GridPanel(null, null, 3, 3);//divide into 3 rows and 3 cols 
                                                 //and it is a control as well
	var s = new Separator(null); // an separator
	var gb = new GridPanel(null, null, 1, 2); // divide into 1 rows and cols
	for (var i = 0; i < 11; i++) {
		var b = new FormButton(null, "OK");//
		if (i < 9)
			ga.addControl(b); // add 9 OK button to ga
		else
			gb.addControl(b);// add 2 OK button to gb
	}
	list.addControl(ga); // add it(9 button) to list
	list.addControl(s); // add a separator 
	list.addControl(gb); // add it(2 button) to list 
	

	uiManager.setView(list);// display it

/**
 * GridPanel.js
 * @author GoOnDeveloper
 * chen-hongqin@163.com
 */

// Constructor.
function GridPanel(id, caption, rows, cols) {
    if (id != UI_NO_INIT_ID) {
        this.init(id, caption, rows, cols);
    }
}

// GridPanel inherits from View.
GridPanel.prototype = new View(UI_NO_INIT_ID);



// controls in the view.
GridPanel.prototype.controls = null;



// Initializer for GridPanel.
GridPanel.prototype.init = function(id, caption, rows, cols) {
   // uiLogger.debug("GridPanel.init(" + id + ", "+ caption + ", " + rows + ", "+ cols + ")");
    this.control = new Control(id, caption);
	this.rows = rows;
	this.cols = cols;
	this.cnt = 0;
    // call superclass initializer
    View.prototype.init.call(this, id);
    
    // init control array
    this.controls = [];
    
    // set style class name for root element
    this.rootElement.className = "ListView";
    
	
	
    // create caption and caption text elements
    this.captionElement = document.createElement("div");
    this.captionElement.className = "ListViewCaption";
    this.captionTextElement = document.createElement("div");
    this.captionTextElement.className = "ListViewCaptionText";
    this.captionElement.appendChild(this.captionTextElement);
    this.rootElement.appendChild(this.captionElement);
    
    // create root element for controls and add to the view root element
    this.gridElement = document.createElement("table");
    this.gridElement.className = "GridPanelControlGrid";
	
	this.create(this.gridElement, rows, cols);
	
	
    this.rootElement.appendChild(this.gridElement);
    
    // set the caption
    this.setCaption(caption);
}


//create gridBody(tbody)
GridPanel.prototype.create = function(grid, rows, cols) {
	for (var i = 0; i < rows; i++) {
		grid.insertRow(i);
		for (var j = 0; j < cols; j++) {
			grid.rows[i].insertCell(j);
			grid.rows[i].cells[j].className = "GridCell";
			grid.rows[i].cells[j].width = (95 / cols).toString() + "%";
		}	
	}
}

GridPanel.prototype.addControl = function(control) {
	this.controls.push(control);
	var r = parseInt(this.cnt/this.cols);
	var c = parseInt(this.cnt%this.cols);
	//alert(control.rootElement);
	this.gridElement.rows[r].cells[c].appendChild(control.rootElement);
	this.cnt++;
}

GridPanel.prototype.removeControl = function(control) {
	//not implement
}

// Sets the caption; null if none.
GridPanel.prototype.setCaption = function(caption) {
    uiLogger.debug("GridPanel.setCaption(" + caption + ")");
    
    // set the display style
    this.captionElement.style.display = (caption == null) ? "none" : "block";
    
    // set the caption
    this.caption = caption;
    this.captionTextElement.innerHTML = (caption == null) ? "" : caption;
}

GridPanel.prototype.resetFocusState = function() {
	this.control.resetFocusState();
}

GridPanel.prototype.isFocusable = function(){
	this.control.isFocusable();
}

[jappit]

Hi GoOnDeveloper,

thank you for sharing your GridPanel component, it'll be definitely useful to other developers as well

Pit

[henry.huang]

GoOnDeveloper's GridPanel is great, but I have a simple way to implement a GridView.

The root reason that Controls in ListView displays in a form of list is the rootElement of Controls is a div which width is default as 100%.
So we can write a new style-sheet for rootElement as below:

.Control30{
    width:30%;
    float:left;
}

and then modify your Control's rootElement className in function updateStyleFromState to:

// set root element class name
    this.setClassName(this.rootElement, "Control30");

Well, the controls in ListView will display in a Grid...