PDA

View Full Version : EXT Store/Grid not Populating Certain Columns



roosevelt
1 Aug 2013, 1:45 PM
Hi,

I ran into something very strange today. The problem is EXT Store for some reason is not populating certains data columns. You will notice the JSON result does have data. But upon render I see that some of the columns are blank.

I did Ext.getCmp().getStore().data.items and indeed there are no data set for some of the columns, even though the AJAX data clearly is returning data for all the rows and columns.

Any ideas why it is happening?

Here is what the HTML shows for a column that shows data:


<td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1053 x-unselectable "><div style="text-align:left;" class="x-grid-cell-inner" unselectable="on"><div style="text-align:center"><a title="Electronics&lt;br /&gt;Dec 11, 2011 to Dec 17, 2011" data-lightbox="group" href="images/test_T_ACCUM_d20111211_d20111217_ave_Electronics.png"><img alt="thumbnail" src="images/thumbnails/test_T_ACCUM_d20111211_d20111217_ave_Electronics.png"></a></div></div></td>

And here is what I see in firebug for the columns where EXT Grid is not showing any data:


<td class="x-grid-cell x-grid-td x-grid-cell-gridcolumn-1056 x-unselectable "><div style="text-align:left;" class="x-grid-cell-inner" unselectable="on">&nbsp;</div></td>

Here is my setup:

// Store


Ext.define("MyApp.store.Images", {
extend: "Ext.data.Store",
model: "MyApp.model.Image",
pageSize: 25,
proxy: {
type: "ajax",
url: "WeeklyImages/index.json",
reader: {
type: "json",
root: "data",
totalProperty: 'total'
}
},
autoLoad: false,
groupField: "coverage"
});

// Model


Ext.define("MyApp.model.Image",{
extend: "Ext.data.Model",
fields: [
'id',
'year',
'month',
'day_from',
'day_to',
'weekly_image_type_id',
'image_file',
'image_type',
'coverage',
'BB',
'BlackbodyShield',
'Cavity',
'Electronics',
'FocalPlane_Hi_RSL_LWIR SMWIR',
'FocalPlane_Lo_RSL_LWIR SMWIR',
'FocalPlane_VisNIR_DNB',
'HAM',
'OMM'
]
});

// Grid


xtype: 'gridpanel',
margins: '5',
region: 'center',
title: 'Results',
store: "Images",
id: "ResultsGrid",
features: [{ftype:'grouping'}],
columns: [
{
xtype: "gridcolumn",
width: 200,
text: "Coverage",
dataIndex: "Coverage"
},
{
xtype: "gridcolumn",
width: 200,
text: "BB",
dataIndex: "BB"
},
{
xtype: "gridcolumn",
width: 200,
text: "BlackbodyShield",
dataIndex: "BlackbodyShield"
},
{
xtype: "gridcolumn",
width: 200,
text: "Cavity",
dataIndex: "Cavity"
},
{
xtype: "gridcolumn",
width: 200,
text: "Electronics",
dataIndex: "Electronics"
},
{
xtype: "gridcolumn",
width: 200,
text: "FocalPlane_Hi_RSL_LWIR SMWIR",
dataIndex: "FocalPlane_Hi_RSL_LWIR SMWIR"
},
{
xtype: "gridcolumn",
width: 200,
text: "FocalPlane_Lo_RSL_LWIR SMWIR",
dataIndex: "FocalPlane_Lo_RSL_LWIR SMWIR"
},
{
xtype: "gridcolumn",
width: 200,
text: "FocalPlane_VisNIR_DNB",
dataIndex: "FocalPlane_VisNIR_DNB"
},
{
xtype: "gridcolumn",
width: 200,
text: "HAM",
dataIndex: "HAM"
},
{
xtype: "gridcolumn",
width: 200,
text: "OMM",
dataIndex: "OMM"
}
],
dockedItems: [
{
xtype: 'pagingtoolbar',
dock: 'bottom',
id: 'Results_Paging',
width: 360,
displayInfo: true,
store: "Images"
}
]

// Sample JSON Data




{"data":[{"coverage":"Dec 4, 2011 to Dec 10, 2011","BB":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_BB.png' data-lightbox='group' title='BB<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_BB.png' alt='thumbnail'\/><\/a><\/div>","Cavity":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_Cavity.png' data-lightbox='group' title='Cavity<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_Cavity.png' alt='thumbnail'\/><\/a><\/div>","BlackbodyShield":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_BlackbodyShield.png' data-lightbox='group' title='BlackbodyShield<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_BlackbodyShield.png' alt='thumbnail'\/><\/a><\/div>","Electronics":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_Electronics.png' data-lightbox='group' title='Electronics<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_Electronics.png' alt='thumbnail'\/><\/a><\/div>","OMM":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_OMM.png' data-lightbox='group' title='OMM<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_OMM.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Hi_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Hi_RSL_LWIR SMWIR<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Lo_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Lo_RSL_LWIR SMWIR<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_VisNIR_DNB":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_VisNIR_DNB.png' data-lightbox='group' title='FocalPlane_VisNIR_DNB<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_FocalPlane_VisNIR_DNB.png' alt='thumbnail'\/><\/a><\/div>","HAM":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111204_d20111210_ave_HAM.png' data-lightbox='group' title='HAM<br \/>Dec 4, 2011 to Dec 10, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111204_d20111210_ave_HAM.png' alt='thumbnail'\/><\/a><\/div>"},{"coverage":"Dec 11, 2011 to Dec 17, 2011","BB":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_BB.png' data-lightbox='group' title='BB<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_BB.png' alt='thumbnail'\/><\/a><\/div>","Cavity":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_Cavity.png' data-lightbox='group' title='Cavity<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_Cavity.png' alt='thumbnail'\/><\/a><\/div>","BlackbodyShield":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_BlackbodyShield.png' data-lightbox='group' title='BlackbodyShield<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_BlackbodyShield.png' alt='thumbnail'\/><\/a><\/div>","Electronics":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_Electronics.png' data-lightbox='group' title='Electronics<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_Electronics.png' alt='thumbnail'\/><\/a><\/div>","OMM":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_OMM.png' data-lightbox='group' title='OMM<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_OMM.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Hi_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Hi_RSL_LWIR SMWIR<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Lo_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Lo_RSL_LWIR SMWIR<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_VisNIR_DNB":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_VisNIR_DNB.png' data-lightbox='group' title='FocalPlane_VisNIR_DNB<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_FocalPlane_VisNIR_DNB.png' alt='thumbnail'\/><\/a><\/div>","HAM":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111211_d20111217_ave_HAM.png' data-lightbox='group' title='HAM<br \/>Dec 11, 2011 to Dec 17, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111211_d20111217_ave_HAM.png' alt='thumbnail'\/><\/a><\/div>"},{"coverage":"Dec 18, 2011 to Dec 24, 2011","BB":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_BB.png' data-lightbox='group' title='BB<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_BB.png' alt='thumbnail'\/><\/a><\/div>","Cavity":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_Cavity.png' data-lightbox='group' title='Cavity<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_Cavity.png' alt='thumbnail'\/><\/a><\/div>","BlackbodyShield":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_BlackbodyShield.png' data-lightbox='group' title='BlackbodyShield<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_BlackbodyShield.png' alt='thumbnail'\/><\/a><\/div>","Electronics":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_Electronics.png' data-lightbox='group' title='Electronics<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_Electronics.png' alt='thumbnail'\/><\/a><\/div>","OMM":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_OMM.png' data-lightbox='group' title='OMM<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_OMM.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Hi_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Hi_RSL_LWIR SMWIR<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_FocalPlane_Hi_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>","FocalPlane_Lo_RSL_LWIR SMWIR":"<div style='text-align:center'><a href='images\/test_T_ACCUM_d20111218_d20111224_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' data-lightbox='group' title='FocalPlane_Lo_RSL_LWIR SMWIR<br \/>Dec 18, 2011 to Dec 24, 2011'><img src='images\/thumbnails\/test_T_ACCUM_d20111218_d20111224_ave_FocalPlane_Lo_RSL_LWIR,SMWIR.png' alt='thumbnail'\/><\/a><\/div>"}],"total":36}

aaugen
2 Aug 2013, 12:11 AM
Hi,

I think your problem is on "Coverage"column because in the dataIndex property you put the value with capital letter but not in fields property on associated Model.

Be careful, the dataIndex property is case-sensitive.

I hope this has helped...

Alex.

roosevelt
2 Aug 2013, 9:23 AM
Hi Alex,

I tried changing the dataIndex to all lowercase as defined in the model and the JSON data, but the problem still persist.

I am currently stepping through the issue in firebug but cannot find the part of the code where EXTJS is actually populating the store. That might be the only way to figure out why EXT is not populating certain columns in the store.

roosevelt
2 Aug 2013, 11:26 AM
Hi,

I am still struggling with this error. And I found that when EXTJS calls "me.convertRecordData(convertedValues, node, record)" under extractData, the convertRecordData function does something which causes it to lose the value for some of the fields.

Before that the records have all the data just fine but as soon as that line is called, the data gets weird.

I tried to step into the convertRecordData function but the debugger gets weiry afterwards. It's as if convertRecordData is not a valid or real function.

FYI, I also removed any special characters from all the column names, trimmed them and also set them to lowercase for the model, the result set and the dataindex. But still it loses data for some of the column when that converRecordData function is called by EXT.

Any ideas?

aaugen
4 Aug 2013, 11:40 PM
Hi,

Can you post a screenshot of your grid to see columns where problem persist?

You can also try to specify type on your field's model like date, int, float and associate the right column in your grid like datecolumn, numbercolumn...