PDA

View Full Version : [Closed] XTemplate does not show data



cog
8 Apr 2010, 2:42 AM
(The Json was wrong. Data added through PHP should have been a multidimensional array with numeric keys, instead of an array containing the respective items.)


I am trying to get the data returned from a jsonstore into an XTemplate. The data is loaded, but does not show. Instead I get an error 'el is null'. I can see the data being returned in Fiddler. Firebug displays the data in the console, but the templatestays empty. So, what's (not) happening ...

The store:


var dspassword = new Ext.data.JsonStore({
url: 'module/page/userdata.php'
, baseParams: {cmd: 'customerpwd' }
, root: 'customer'
, autoLoad: true
, successProperty: 'success'
, fields: [ { name: 'customer_id' }
, { name: 'customer_login' }
, { name: 'customer_emailaddress' } ]
, listeners: {
load: {
fn: function(store, records, options) {
console.info('store load, arguments:', arguments);
}
, scope: this
}
}
});
The data returned from the server (wrong):

{"customer":{"customer_id":"1","customer_login":"cage","customer_emailaddress":"[email protected]"},"success":true}The data returned from the server (right):

{"customer":[{"customer_id":"1","customer_login":"cage","customer_emailaddress":"[email protected]"}],"success":true}The XTemplate:

var userpasswdtpl = new Ext.XTemplate(
'<tpl for="."><div class="userdetail">',
'<table cellspacing="0" cellpadding="2">',
'<tr>',
'<td class="pageHeading" colspan="2">',
'<span class="pagetitle">Wachtwoord wijzigen</span>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="2">&nbsp;</td>',
'</tr>',
'<tr>',
'<td class="plainBox" colspan="2">',
'<table width="100%" cellspacing="2" cellpadding="2">',
'<tr>',
'<td class="lableentry"><label>Gebruikersnaam</label></td>',
'<td colspan=2 class="inputentry">{customer_login}<input type="hidden" name="customer_id" id="customer_id" value="{customer_id}" /></td>',
'</tr>',
'<tr>',
'<td class="lableentry"><label>Huidige wachtwoord</label></td>',
'<td class="inputentry"><input type="password" name="password_current" id="password_current" />&nbsp;<span class="inputRequirement">*</span></td>',
'<td rowspan="3" class="supporttext"><br /><br />Gebruik minimaal vijf tekens</td>',
'</tr>',
'<tr>',
'<td class="lableentry"><label>Nieuw wachtwoord</label></td>',
'<td class="inputentry"><input type="password" name="password_new" id="password_new" /><span class="inputRequirement">&nbsp;*</span></td>',
'</tr>',
'<tr>',
'<td class="lableentry"><label>Bevestig wachtwoord</label></td>',
'<td class="inputentry"><input type="password" name="password_confirmation" id="password_confirmation" /><span class="inputRequirement">&nbsp;*</span></td>',
'</tr>',
'<tr>',
'<td colspan="3"><span style="font-weight: bold;">Tip: </span>Schrijf je gebruikersnaam en wachtwoord <span style="font-weight: bold;">nu</span> in je agenda.</td>',
'</tr>',
'</table>',
'<hr>',
'</td>',
'</tr>',
'<tr>',
'<td class="plainBox" colspan="2">',
'<table style="width: 100%;" cellspacing="2" cellpadding="2">',
'<tr>',
'<td colspan="2">Je nieuwe wachtwoord wordt op onderstaand e-mailadres bevestigd. Controleer je e-mailadres zorgvuldig.</td>',
'</tr>',
'<tr>',
'<td class="lableentry"><label>E-mailadres</label></td>',
'<td class="inputentry"><input type="text" name="emailaddress" id="emailaddress" value="{customer_emailaddress}" style="width: 240px;" /><span class="inputRequirement">&nbsp;*</span></td>',
'</tr>',
'</table>',
'</td>',
'</tr>',
'<tr>',
'<td colspan="2"><hr /></td>',
'</tr>',
'</table>'
, '</div></tpl>'
);
The panel:

var passwdpanel = new Ext.DataView ({
store: dspassword
, tpl: userpasswdtpl
, width: 800
, autoHeight: true
, multiSelect: false
, emptyText: 'Geen gegevens'
, renderTo: 'fcontent'
});
Get the data and show the template (forget about this, as Animal so elloquently said: what on earth do you need ...):


dspassword.on({load: { fn: function( store, data, options){
console.info('store load, arguments:', arguments);
userpasswdtpl.overwrite(passwdpanel.body, data);
},
scope: this
}
});

dspassword.load();

Animal
8 Apr 2010, 4:10 AM
"Get the data and show the template:"????

Why on earth are you doing that? You are using a DataView!

cog
8 Apr 2010, 10:33 AM
Why on earth I did that ... Well when I did not, it didn't show the template at all. I have been trying out every possible option I could think of, i.e. for the last eleven hours I have been at it, and have been looking at the API, been browsing through the Forum, googling, changing and re-changing my code .. No answers, no results.

The only result I got was after I did the store.load() and tpl.overwrite(panel.body, data);

I had fiddler on and it showed the json, in firebug it showed in the window object >reader>jsonData>customer, however, it did not show in the >data.

I removed the load, changed the store's autoLoad to true (I presume that would be required to obtain data). However, that made no difference either. So Next step: change the DataView into a FormPanel and added:

, afterRender:function() {
Ext.FormPanel.prototype.afterRender.apply(this, arguments);
this.tpl.overwrite(this.body, this);
}
Still no result. I do not know what I am doing wrong, I'm at a total loss