PDA

View Full Version : Adding styling to dynamically created grid.Panel



halfstep
23 Oct 2013, 7:02 AM
I have a grid that I'm generating from a json string containing the metaData/column data inside the json. I got the table to display. The problem I'm having now is that I need to style a few of the columns. The name column needs to have the appearance of a hyperlink. I know I "should" be able to add a renderer to the column to either add a class or return a <a> tag surrounding the value. I tried passing this in the JSON metadata config, but nothing happened. I have an alert in there and the renderer seems to never be hit. Does anyone have any suggestions on how I can style this cell?

Here is my code:


Ext.define('DataGrid.view.DataGrid', {
extend: 'Ext.ux.LiveSearchGridPanel',
alias: 'widget.DataGrid',


id: 'dataGrid-view',
title: 'Domain',
emptyText: '',
store: 'DomainStore',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
viewConfig: {
stripeRows: true,
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
if(view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex == 'name'){
launchBaseballCard(record.get('name'));
}
}
}
},
columns: [
]
});
me.callParent(arguments);
}
});


JSON:


{
"msg": null,
"success": true,
"metaData": {
"root": "datas",
"domain": "SYSTEM",
"fields": [{
"name": "name"
},
{
"name": "type"
},
{
"name": "longName"
}],
"columns": [{
"dataIndex": "name",
"text": "Name",
"renderer": "function (value, metaData, record, row, col, store, gridView) {alert('hi'); return '<a href=\"#\">' + value + '</a>';}"
},
{
"dataIndex": "type",
"text": "Type",
"renderer": null
},
{
"dataIndex": "longName",
"text": "Long Name",
"renderer": null
}]
},
"datas": [{
"name": "CMMPV",
"type": "SYSTEM",
"longName": "CMMPV"
}]
}


Main Code:


store = Ext.create('DataGrid.store.DomainStore', {id: storeId});
var dataGrid = Ext.create('DataGrid.view.DataGrid', {
id: domain + '_view',
store: store,
title: domain,
emptyText: ''
});
store.load({
scope : this,
params:{domain: domain, filterTree: Ext.encode(filterTree)}
});

Scott-1
25 Oct 2013, 12:12 PM
I do not see anywhere you are calling to parse the column data from the JSON.

It also looks like you are doing a lot more dynamically then just styling, you are also determining what columns go to the grid correct?

slemmon
25 Oct 2013, 11:01 PM
You can't exactly pass back functions in JSON responses. Below is one way you might go about getting the first column rendered as a link:

Client Code


Ext.application({
name: 'Fiddle',


launch: function() {
Ext.define('DataGrid.view.DataGrid', {
//extend: 'Ext.ux.LiveSearchGridPanel',
extend: 'Ext.grid.Panel',
alias: 'widget.DataGrid',




id: 'dataGrid-view',
title: 'Domain',
emptyText: '',
store: 'DomainStore',




initComponent: function() {
var me = this;




Ext.applyIf(me, {
viewConfig: {
stripeRows: true,
listeners: {
cellclick: function(view, cell, cellIndex, record, row, rowIndex, e) {
if (view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex == 'name') {
launchBaseballCard(record.get('name'));
}
}
}
},
columns: []
});
me.callParent(arguments);
}
});


var store = Ext.create('Ext.data.Store', {
storeId: 'DomainStore',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
root: 'datas'
}
},
listeners: {
'metachange': function(store, meta) {
Ext.each(meta.columns, function(col) {
if (col.renderer === 'link') {
var newRenderer = function(value) {
return '<a href="#">' + value + '</a>';
};
col.renderer = newRenderer;
}
});
dataGrid.reconfigure(store, meta.columns);
}
}
});
var dataGrid = Ext.create('DataGrid.view.DataGrid', {
id: 'domain' + '_view',
store: store,
title: 'domain',
emptyText: '',
tbar: [{
text: 'Reconfigure',
handler: function() {
dataGrid.reconfigure(dataGrid.getStore(), [{
"dataIndex": "name",
"text": "Name",
"renderer": function(value, metaData, record, row, col, store, gridView) {
return 'TEST';
}
}, {
"dataIndex": "type",
"text": "Type",
"renderer": null
}, {
"dataIndex": "longName",
"text": "Long Name",
"renderer": null
}]);
}
}]
});


/*store.load({
scope: this,
params: {
domain: domain,
filterTree: Ext.encode(filterTree)
}
});*/


store.load();


Ext.widget('viewport', {
layout: 'fit',
items: [dataGrid]
});






}
});


Server response


{
"msg": null,
"success": true,
"metaData": {
"root": "datas",
"domain": "SYSTEM",
"fields": [{
"name": "name"
},
{
"name": "type"
},
{
"name": "longName"
}],
"columns": [{
"dataIndex": "name",
"text": "Name",
"renderer": "link"
},
{
"dataIndex": "type",
"text": "Type",
"renderer": null
},
{
"dataIndex": "longName",
"text": "Long Name",
"renderer": null
}]
},
"datas": [{
"name": "CMMPV",
"type": "SYSTEM",
"longName": "CMMPV"
}]
}


Here I'm just looking to see if the renderer from the column is returned as 'link' and if so set a renderer function on the column config that wraps the value in anchor tags.