View Full Version : add data to grid

9 May 2012, 7:32 AM
In ext-4.0.7, I want to use the basic standard grid but instead of using an array to add the data in the columns, I want to use a calculated value.

// register model
Ext.define('Calendar', {
extend: 'Ext.data.Model',
idProperty: 'calendar',
fields: [
{name: 'year', type: 'int'}

// create the data store
var store = Ext.create('Ext.data.Store', {
model: 'Calendar',
remoteSort: true,
pageSize: 10,
proxy: {
type: 'pagingmemory',
//data: myData,
reader: {
//type: 'array'
//type: 'json',
model: 'Calendar'

// create the Grid
var grid = Ext.createWidget('gridpanel', {
store: store,
columns: [{
text: 'Calendar',
sortable: true,
dataIndex: 'year',
flex: 1,
renderer:function(value, metaData, record, row, col, store, gridView){
//metaData.tdAttr= 'data-qtip="'+record.get('calendar');
for (var x = 1;x<=30;x++)
value = x;
return value;

The only thing that gets populated in the Calendar column is 1 when I have an array for the data type.
I have commented out the data and type in the model as I think that is the issue here. What should the type and data be so that I can populate the grid using the renderer.

10 May 2012, 11:46 PM
Hi Teddy,

What you are trying to do is to fill all the columns with 1 to 30 or any other thing , i don't know.

it is quite obvious that column is filled with '1' if you are returning any value from renderer in the first try, means if you return something and execute loop again in a new column then value of x will be always start with 1.

Your code needs to be more flexible.

By the way, if you only want to fill your all calender columns from 1-30, instead of looping, you can return your rowindex as a string.

renderer:function(value, metaData, record, rowIndex){
return rowIndex.toString();

Have a nice day!!!

11 May 2012, 6:56 AM
Thank you sword.
I have seven columns where I need to add the data by
using the renderer function. The question is How do I add my data at
the next rowIndex. rowindex++ doesn't move the pointer to the next row.
and I am not able to find any examples where you can move the "row pointer"
to the row where you want to add the data.
Here is my code.

renderer:function(value, metaData, record, rowIndex){
for (var x = 1;x<=30;x++)
value = (x + (8*PI));
return (value);
//return rowIndex.toString();

11 May 2012, 7:14 AM
renderer:function(value, metaData, record, rowIndex){
var value = (rowIndex + (8*PI));
return value.toString();

Sword-IT Sencha Developer

11 May 2012, 7:45 AM
Thank you my friend. that works.