PDA

View Full Version : [SOLVED] Embedding Ext widgets in XTemplate



ctp
10 Nov 2010, 6:48 AM
Hi all,

is there a way to embed e.g. xtype: 'displayfield' within XTemplate?


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>OID: {oid}</div>',
'</tpl>
)In my case I wanna embed 'OID: {oid}' in a DisplayField.

Condor
10 Nov 2010, 6:58 AM
You could postprocess the generated HTML and applyToMarkup some DisplayFields, or you could simply create displayfields, e.g.

var fields = [];
for (var i = 0; i < data.length; i++) {
fields.push({
xtype: 'displayfield',
fieldLabel: 'OID',
value: data[i].oid
});
}
var ct = new Ext.Container({
layout: 'form',
items: fields
});

ps. If your data is in a store, then you could use my ComponentDataView.

ctp
10 Nov 2010, 7:18 AM
Hi Condor,

thanks for the hint but I'm not sure if I understand you right. This is my XTemplate (all data come from JsonStore):


var propertyDetailsTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div>IS24-ID: {is24_id}</div>',
'<div>IS24 search status: {is24_search_status}</div>',
'<div>IS24 alliance status: {is24_alliance_status}</div>',
'</tpl>'
);Depending on which row is selected in a Grid I wanna render this data in another panel 'propertyListDetailsPanel' and wanna embed each of them in a DisplayField. Recently it simply renders all in HTML:


listeners: {
rowselect: {
fn: function(sm, rowIdx, r) {
propertyDetailsTpl.overwrite(Ext.getCmp('propertyListDetailsPanel').body, r.data);
}
}
}

Condor
10 Nov 2010, 7:22 AM
Do you actually want DisplayField instances, or do you just want it to look like a DisplayField?

ctp
10 Nov 2010, 7:25 AM
I wanna look it like DisplayField. Same font etc.

Condor
10 Nov 2010, 7:33 AM
Add the default DisplayField markup to your template, e.g.

var propertyDetailsTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-form-item"><label class="x-form-item-label" style="width: 100px;">IS24-ID:</label><div style="padding-left: 105px;" class="x-form-element"><div class="x-form-display-field">{is24_id}</div></div><div class="x-form-clear-left"></div></div>',
'<div class="x-form-item"><label class="x-form-item-label" style="width: 100px;">IS24 search status:</label><div style="padding-left: 105px;" class="x-form-element"><div class="x-form-display-field">{is24_search_status}</div></div><div class="x-form-clear-left"></div></div>',
'<div class="x-form-item"><label class="x-form-item-label" style="width: 100px;">IS24 alliance status:</label><div style="padding-left: 105px;" class="x-form-element"><div class="x-form-display-field">{is24_alliance_status}</div></div><div class="x-form-clear-left"></div></div>'
'</tpl>'
);

ctp
10 Nov 2010, 7:40 AM
Wow, cool. Many, many thanks again ;-) All works fine now.