PDA

View Full Version : Gridpanel row 'container' not rendering at all, how/what events to debug ?



drunkmoose
2 Jun 2014, 6:14 AM
So I am reengineering my application as per MVC architecture and previously when I was just fiddling around, I had a grid panel rendering to an HTML <div> which was working fine at that moment.

Now, I changed the (region) layout a bit (I have 3 panels in my viewport, a header, left menu, and in the center a panel using card layout. The left menu will switch the activePanel of the center panel.

But since I've done this, my grid renders in a way which I've never seen in previous versions.

The headers are there, but I don't see any data rows, neither any empty rows. The grid takes to whole of the center panel space, I see the horizontal scrollbar at the bottom, but I don't even see empty rows being rendered (you know you usually see cell borders even when there is no data in the grid, if I'm not mistaken)

My store loads fine (I add a debugger in the headerclick event and inspect the store, has 13 items).

But my column renderer method is never called.

Here's some code for the center panel:


var rawStore;
var contactStore;

Ext.define("Customer_Portal_UI.view.MainContent", {
extend: 'Ext.form.Panel',
alias: 'widget.maincontent',
region: 'center',
layout: 'card',
activeItem: 1,
requires: ['Ext.grid.Panel'],
initComponent: function() {

this.items = [
{
xtype: 'panel',
title: 'AAAA'
},
{
xtype: 'grid',
id: 'contactlistgrid',
listeners: {
headerclick: function () {
debugger;
alert('ASDASDSA');
}
},
store: contactStore,
columns: [
{ text: 'Assigned exec. account', dataIndex: 'service_executive_account_Name' },
{ text: 'First name', dataIndex: 'firstname' },
{ text: 'Last name', dataIndex: 'lastname' },
{ text: 'Patient ID', dataIndex: 'patientid' },
{ text: 'Exec. Eligbility', dataIndex: 'service_executive_eligibility', renderer: columnRender },
{ text: 'DOB', dataIndex: 'birthdate', renderer: columnRender },
{ text: 'Position', dataIndex: 'jobtitle' },
{ text: 'Work phone', dataIndex: 'telephone1' },
{ text: 'Mobile phone', dataIndex: 'mobilephone' },
{ text: 'Email #1', dataIndex: 'emailaddress1' },
{ text: 'Address', dataIndex: 'address1_line1' },
{ text: 'City', dataIndex: 'address1_city' },
{ text: 'Postal code', dataIndex: 'address1_postalcode' },
{ text: 'Province', dataIndex: 'address1_stateorprovince' },
{ text: 'Exam. due date', dataIndex: 'service_executive_due_date_pha' },
{ text: 'Protocol', dataIndex: 'service_executive_protocol' }
]

}
]

rawStore = Ext.create('Customer_Portal_UI.store.ContactRaw', {
id: 'rawStore',
model: 'Customer_Portal_UI.model.ContactRaw',
autoLoad: true,
listeners: {
load: function (store, recs) {
contactStore = Ext.create('Customer_Portal_UI.store.ContactAttribute', {
});

contactStore = populateStore(contactStore, recs);

}
}
});

this.callParent(arguments);

}


});


function populateStore(store, recs) {

var allcontactAttributes = [];
var nbrElement = recs.length;

for (var i = 0; i <= nbrElement - 1; i++) {
var nbrRawElement = recs[i].raw.length;
var contactAttributes = [];
for (var x = 0; x <= nbrRawElement - 1; x++) {
var attributeObject = recs[i].raw[x];
if (Object.prototype.toString.call(attributeObject.Value) === '[object Object]') {


if (attributeObject.Value.hasOwnProperty("Value"))
contactAttributes[attributeObject.Key] = attributeObject.Value.Value;


if (attributeObject.Value.hasOwnProperty("Id"))
contactAttributes[attributeObject.Key + "_Id"] = attributeObject.Value.Id;



if (attributeObject.Value.hasOwnProperty("Name"))
contactAttributes[attributeObject.Key + "_Name"] = attributeObject.Value.Name;



}
else {
contactAttributes[attributeObject.Key] = attributeObject.Value;
}
}
allcontactAttributes.push(contactAttributes);
}
store.loadRawData(allcontactAttributes);
return store;
}


function columnRender(value, metaData, record, row, col, store, gridView) {


switch (metaData.column.dataIndex) {


case 'service_executive_eligibility':
if (value == 'true')
value = '<font color="green">Yes</font>';
else
value = '<font color="red">No</font>';
break;


case 'birthdate':
value = value.substring(0, 10);
}


return value;
}


Like I said, this the models/store grid binding used to work fine before I used it into a MVC structure OR...when I put it in a card layout ?

I know a grid panel should not be child of a panel because it is a panel in itself, but does that rule also count within a card layout ? Otherwise, I'm not sure where I could put that grid...

I know the way I load the data seems a bit convoluted, but the JSONP I'm getting back can be nested weirdly.

Any ideas ? Tell me if you need anything else to help me out on this one.

Thanks.

drunkmoose
2 Jun 2014, 1:08 PM
I switched populateStore for this method:



function returnStoreData(recs) {

var allcontactAttributes = [];
var nbrElement = recs.length;

for (var i = 0; i <= nbrElement - 1; i++) {
var nbrRawElement = recs[i].raw.length;
var contactAttributes = [];
for (var x = 0; x <= nbrRawElement - 1; x++) {
var attributeObject = recs[i].raw[x];
if (Object.prototype.toString.call(attributeObject.Value) === '[object Object]') {


if (attributeObject.Value.hasOwnProperty("Value"))
contactAttributes[attributeObject.Key] = attributeObject.Value.Value;


if (attributeObject.Value.hasOwnProperty("Id"))
contactAttributes[attributeObject.Key + "_Id"] = attributeObject.Value.Id;



if (attributeObject.Value.hasOwnProperty("Name"))
contactAttributes[attributeObject.Key + "_Name"] = attributeObject.Value.Name;



}
else {
contactAttributes[attributeObject.Key] = attributeObject.Value;
}
}
allcontactAttributes.push(contactAttributes);
}
return allcontactAttributes;
}


And modified the load listener of rawStore to:



contactStore = Ext.create('Customer_Portal_UI.store.ContactAttribute', {
});
contactStore.loadRawData(returnStoreData(recs));
Ext.getCmp('contactlistgrid').reconfigure(contactStore);


Apparently a call to reconfigure() was needed.