PDA

View Full Version : HTML in grid collumn



JeroenR
9 Dec 2014, 2:23 AM
I have a grid panel(in a window) with different columns with data from the db. I want to append html in one of the collumns. How do you do that?

Gary Schlosberg
9 Dec 2014, 6:34 AM
If you want the HTML in the column header, you could use the 'html' config in the column.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-html

The 'renderer' config on the column will change it's cell content.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer

JeroenR
9 Dec 2014, 7:15 AM
I dont want to 'change' to content. I just want some html functionality to display content in the cell

aaugen
11 Dec 2014, 12:30 AM
Hi,

As Gary said, you can use renderer (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.grid.column.Column-cfg-renderer) method to return a customized value before it's rendered. For example:



Ext.create('Ext.grid.Panel', {
title: 'Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{text: 'First Name', dataIndex:'firstname'},
{text: 'Last Name', dataIndex:'lastname'},
{text: 'test', renderer: function(value, meta, record) {
return "<h1>" + value + "</h1>";
}}
],
width: 400,
forceFit: true,
renderTo: Ext.getBody()
});

JeroenR
11 Dec 2014, 12:56 AM
Maybe i ask the question wrong. I a column i want a part html,css and javascript. I want to make a tree out of json(please dont suggest extjs json treeview;) ). like this: https://www.alinous.org/web-developer/design-pattern/jquery-jqtree/3.png has to be in a grid column. Or i a window. Both unfortunatly don't work for me