Ext.ux.TouchGridPanel v2.0b1

[Nicodemuz]

Hi,

It seems like the renderer() function does not work with the new release. Is there some other way to achieve the same result?

Cheers!

Bump! I noticed that the renderer() function has been removed from the new version. Is there any way I can preformat the data from my store? This would be a very useful addition to the plugin.

Thanks!

[irocker]

Bump! I noticed that the renderer() function has been removed from the new version. Is there any way I can preformat the data from my store? This would be a very useful addition to the plugin.

Yes, you can use style: instead, and use standard CSS to format the data. Check out the source to Mitchell's demo.

[irocker]

I am having problems getting the store loaded into my grid, however. I can see the column headings but no data rows. I am attempting to include a TouchGridPanel in a TabPanel. Here is what I have for my TouchGridPanel . Am I missing something?

Yes, your JSON isn't valid when you define your store. Try this instead:

data: [{
        "restaurant" : "Wal-Mart Stores Inc.",
        "power" : "23" 
    }]

[Nicodemuz]

Yes, you can use style: instead, and use standard CSS to format the data. Check out the source to Mitchell's demo.

Sorry, by formatting, I didn't mean visually formatting the data. For example, I'm having some type codes in my store, and would like to preformat these to something more readable. For example:
ACT -> Active

[Nicodemuz]

Sorry, by formatting, I didn't mean visually formatting the data. For example, I'm having some type codes in my store, and would like to preformat these to something more readable. For example:
ACT -> Active

I made a small workaround by extending the Ext.DataView. I added the following lines of code after line 135 (version 2.0b1):

			prepareData:function(recordData, ri, record) {
				
				for (var i = 0; i < colModel.length; i++) {
					var col   = colModel[i];
					
					if(typeof col.renderer == 'function') {
						recordData[col.mapping] = col.renderer.apply(this, [recordData[col.mapping]]);
					}
					
				}
				
				return recordData;
			}

Seems to work quite okay!

[Nicodemuz]

I made a small workaround by extending the Ext.DataView. I added the following lines of code after line 135 (version 2.0b1):

			prepareData:function(recordData, ri, record) {
				
				for (var i = 0; i < colModel.length; i++) {
					var col   = colModel[i];
					
					if(typeof col.renderer == 'function') {
						recordData[col.mapping] = col.renderer.apply(this, [recordData[col.mapping]]);
					}
					
				}
				
				return recordData;
			}

Seems to work quite okay!

Nevermind, this killed sorting!! Anyone able to give a hand?

[Nicodemuz]

This seems to work better! 8)

prepareData:function(recordData, ri, record) {
	
	if(recordData.rendered) return recordData;
	
	for (var i = 0; i < colModel.length; i++) {
		var col   = colModel[i];
		
		if(typeof col.renderer == 'function') {
			recordData[col.mapping] = col.renderer.apply(this, [recordData[col.mapping]]);
		}
		
	}
	
	recordData.rendered = true;
	
	return recordData;
}

[Nicodemuz]

Is there a way to "scrollTo" to a specific table row?

[mitchellsimoens]

Is there a way to "scrollTo" to a specific table row?

Check out GitHub... I added a 'scrollToRow' method that accepts the row index. Example:

grid.scrollToRow(5)

Also a surprise in last build

[Nicodemuz]

Hi Mitch!

The renderer function seems to break when you apply sorting on the columns. Each time the user clicks on the columns to perform a sort, the cell is rendered.

For example, my price column becomes $$$$1 after sorting a few times.

The same seems to happen on your demo, but it's not so visible. After sorting a few times, the "Change" column values get some additional code:
<span style="color: #FF0000;"><span style="color: #FF0000;"> ... </span></span>

Cheers!