PDA

View Full Version : Cannot get subtemplates working within expander



FreeBaseBuzz
16 Nov 2009, 5:40 PM
Hi, I'm having troubles getting a template within a Ext.ux.Expander displaying sub-templates the way it should.

Please see the 3rd post below for example code

The intended output is for the <b>Training Partnerships</b> to display if there are groups within grouppartnerships. and display each group within the sub template.

I'm sure I'm doing something wrong that's quite obvious, but have been working on this for 2 days now and have finally given up and am begging for help.

Oh, one other question, the dates in DOB and ARCHIVEDATE aren't coming in correctly, although I haven't had time to look at it yet, am I passing the dates correctly from the database or do I need to change their format first?

Thanks in advance
Nigel.

FreeBaseBuzz
18 Nov 2009, 4:35 PM
nothing here :)

FreeBaseBuzz
19 Nov 2009, 4:08 PM
Hi All,

I've created a standalone example to show what the issue is..
You should be able to cut and paste into an editor to run this example

In the expanded section within the grid, I am unable to get the "training partnerships" showing correctly

can someone please give me a clue as to where I am going wrong?




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Standalone example </TITLE>
<META NAME="Author" CONTENT="Nigel Joyce">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="Standalone Ext example with issues">
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all-debug.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/RowExpander.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css" />

<SCRIPT LANGUAGE="JavaScript">
Ext.onReady(function(){

var myData ={
"ROLE": "administrator",
"PARENTID": 1,
"TOTALCOUNT": 18259,
"PARTICIPANTS": [
{
"POSTCODE": 4677,
"GROUPPARTNERSHIPS": "",
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "07 7777 7777",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Craig ",
"CITY": "Agnes Water",
"EMAIL": "",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "lot 12 Captain Cook Dr",
"LASTNAME": "Norton",
"PHONE": "07 7777 7777",
"USERNAME": "02atari",
"STATESHORTNAME": "QLD",
"USERID": "4ebcba05-7df0-4c33-b23b-76ee1c1c1dc9",
"MOBILE": "07 7777 7777",
"ARCHIVEDATE": "",
"DOB": "1976-02-02 00:00:00.0"
},
{
"POSTCODE": 4821,
"GROUPPARTNERSHIPS": {
"group": {
"ID": 976,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Cowboys Leagues Club"
},
"group": {
"ID": 1507,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Russell Island RSL Services and Citizens Club Inc"
}
},
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Kimberley",
"CITY": "Townsville",
"EMAIL": "[email protected]",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "45 bayswater tce",
"LASTNAME": "Whitchurch",
"PHONE": "07 7777 7777",
"USERNAME": "03whikim",
"STATESHORTNAME": "QLD",
"USERID": "7d6a5aaf-7a8d-4501-8714-e6d452e7e4d2",
"MOBILE": "07 7777 7777",
"ARCHIVEDATE": "",
"DOB": "1990-04-25 00:00:00.0"
},
{
"POSTCODE": 4184,
"GROUPPARTNERSHIPS": {
"group": {
"ID": 1507,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Russell Island RSL Services and Citizens Club Inc"
}
},
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "0734091301",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Linda",
"CITY": "Russell Island",
"EMAIL": "",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "114 Canaipa Rd",
"LASTNAME": "Klapproth",
"PHONE": "07 7777 7777",
"USERNAME": "07 7777 7777",
"STATESHORTNAME": "QLD",
"USERID": "51a6b8c3-8d8d-4822-9eb3-fed38a66f629",
"MOBILE": "",
"ARCHIVEDATE": "",
"DOB": "1967-12-23 00:00:00.0"
}
]
};

var store = new Ext.data.JsonStore({
autoDestroy: true,
sortInfo: {field:'USERNAME', direction:'DESC'},
root: 'PARTICIPANTS',
totalProperty: 'TOTALCOUNT',
idProperty: 'USERID',
fields: [
'USERNAME',
'FIRSTNAME',
'LASTNAME',
'USERID',
{name: 'ARCHIVEDATE', mapping: 'ARCHIVEDATE', type: 'date', dateFormat: 'c'},
{name: 'DOB', mapping: 'DOB', type: 'date', dateFormat: 'c'},
'EMAIL',
'MOBILE',
'PHONE',
'FAX',
'STREET',
'SUBURB',
'POSTCODE',
'STATESHORTNAME',
'COUNTRYNAME',
'GROUPPARTNERSHIPS'
]
});

store.loadData(myData);

var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<table border="0" cellpadding="5" cellspacing="5">',
'<tbody><tr>',
'<td>Email:</td><td width="250">{EMAIL}</td>',
'<td>mobile:</td><td width="250">{MOBILE}</td>',
'<td rowspan="3" width="100">',
'<tpl for="GROUPPARTNERSHIPS">',
'<tpl for="group">',
'<tpl if="primaryGroupID &gt; 1">',
'<b>Training Partnerships</b><br>',
'</tpl>',
'<p>{primaryGroupName} / {middleGroupName} / {Name}</p>',
'</tpl>',
'</tpl>',
'</td>',
'</tr><tr>',
'<td>Date of birth:</td><td>{DOB}</td>',
'<td>phone:</td><td>{PHONE}</td>',
'</tr><tr>',
'<td>Address:</td><td>{STREET}<br>{SUBURB} {POSTCODE} {STATESHORTNAME} {COUNTRYNAME}</td>',
'<td>Fax:</td><td>{FAX}</td>',
'</tr></tbody></table>'
)
});

var cm = new Ext.grid.ColumnModel({
defaults: {
width: 150,
sortable: true
},
columns: [
expander,
{
header: "UserName",
dataIndex: 'USERNAME',
width: 120
},{
header: "FirstName",
dataIndex: 'FIRSTNAME',
width: 220
},{
header: "LastName",
dataIndex: 'LASTNAME',
width: 220
},{
header: "ID",
dataIndex: 'USERID',
width: 235
}]
});

var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:800,
height:400,
store: store,
cm: cm,
viewConfig: {forceFit:true},
plugins: expander
});

});

//-->
</SCRIPT>
</HEAD>

<BODY>
<div id="grid"></div>
</BODY>
</HTML>

FreeBaseBuzz
22 Nov 2009, 2:19 PM
Hi All, the code above is standalone and can be plugged into a file and run directly.

Does anyone know how sub templates work?

FreeBaseBuzz
22 Nov 2009, 10:49 PM
Oh, one other question.. is it possible to get the ProgressColumn grid plugin working with the ColumnTree extension? or are they completely different?

FreeBaseBuzz
23 Nov 2009, 5:30 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Standalone example </TITLE>
<META NAME="Author" CONTENT="Nigel Joyce">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="Standalone Ext example with issues">
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/ext-all-debug.js"></script>
<script type="text/javascript" src="http://www.extjs.com/deploy/dev/examples/ux/RowExpander.js"></script>

<link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev/resources/css/ext-all.css" />

<SCRIPT LANGUAGE="JavaScript">
Ext.onReady(function(){

var myData ={
"ROLE": "administrator",
"PARENTID": 1,
"TOTALCOUNT": 18259,
"PARTICIPANTS": [
{
"POSTCODE": 4677,
"GROUPPARTNERSHIPS": "",
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "07 7777 7777",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Craig ",
"CITY": "Agnes Water",
"EMAIL": "",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "lot 12 Captain Cook Dr",
"LASTNAME": "Norton",
"PHONE": "07 7777 7777",
"USERNAME": "02atari",
"STATESHORTNAME": "QLD",
"USERID": "4ebcba05-7df0-4c33-b23b-76ee1c1c1dc9",
"MOBILE": "07 7777 7777",
"ARCHIVEDATE": "",
"DOB": "1976-02-02 00:00:00.0"
},
{
"POSTCODE": 4821,
"GROUPPARTNERSHIPS": {
"group": {
"ID": 976,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Cowboys Leagues Club"
},
"group": {
"ID": 1507,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Russell Island RSL Services and Citizens Club Inc"
}
},
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Kimberley",
"CITY": "Townsville",
"EMAIL": "[email protected]",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "45 bayswater tce",
"LASTNAME": "Whitchurch",
"PHONE": "07 7777 7777",
"USERNAME": "03whikim",
"STATESHORTNAME": "QLD",
"USERID": "7d6a5aaf-7a8d-4501-8714-e6d452e7e4d2",
"MOBILE": "07 7777 7777",
"ARCHIVEDATE": "",
"DOB": "1990-04-25 00:00:00.0"
},
{
"POSTCODE": 4184,
"GROUPPARTNERSHIPS": {
"group": {
"ID": 1507,
"primaryGroupName": "Queensland ",
"middleGroupName": "Queensland ",
"MiddleGroupID": 6919,
"PrimaryGroupID": 7650,
"Name": "Russell Island RSL Services and Citizens Club Inc"
}
},
"RELATIONSHIPTYPE": "ADMINISTRATOR",
"COUNTRYCODE": "au",
"FAX": "0734091301",
"COUNTRYNAME": "Australia",
"FIRSTNAME": "Linda",
"CITY": "Russell Island",
"EMAIL": "",
"PARTICIPANTSYNCHRONIZE": 1,
"STREET": "114 Canaipa Rd",
"LASTNAME": "Klapproth",
"PHONE": "07 7777 7777",
"USERNAME": "07 7777 7777",
"STATESHORTNAME": "QLD",
"USERID": "51a6b8c3-8d8d-4822-9eb3-fed38a66f629",
"MOBILE": "",
"ARCHIVEDATE": "",
"DOB": "1967-12-23 00:00:00.0"
}
]
};

var store = new Ext.data.JsonStore({
autoDestroy: true,
sortInfo: {field:'USERNAME', direction:'DESC'},
root: 'PARTICIPANTS',
totalProperty: 'TOTALCOUNT',
idProperty: 'USERID',
fields: [
'USERNAME',
'FIRSTNAME',
'LASTNAME',
'USERID',
{name: 'ARCHIVEDATE', mapping: 'ARCHIVEDATE', type: 'date', dateFormat: 'c'},
{name: 'DOB', mapping: 'DOB', type: 'date', dateFormat: 'c'},
'EMAIL',
'MOBILE',
'PHONE',
'FAX',
'STREET',
'SUBURB',
'POSTCODE',
'STATESHORTNAME',
'COUNTRYNAME',
'GROUPPARTNERSHIPS'
]
});

store.loadData(myData);
Ext.XTemplate.override({
exists: function(o){
return typeof o != 'undefined' && o != null && o!='';
}
});

var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.XTemplate(
'<table border="0" cellpadding="5" cellspacing="5">',
'<tbody><tr>',
'<td width="16"><img class="icon-email" src="/assets/images/_.gif"></td><td width="250">{EMAIL}</td>',
'<td width="16"><img class="icon-mobile" src="/assets/images/_.gif"></td><td width="250">{MOBILE}</td>',
'</tr><tr>',
'<td width="16"><img class="icon-dob" src="/assets/images/_.gif"></td><td>{DOB:date("d-m-Y")}</td>',
'<td width="16"><img class="icon-phone" src="/assets/images/_.gif"></td><td>{PHONE}</td>',
'</tr><tr>',
'<td width="16"><img class="icon-address" src="/assets/images/_.gif""></td><td>{STREET}<br>{SUBURB} {POSTCODE} {STATESHORTNAME} {COUNTRYNAME}</td>',
'<td width="16"><img class="icon-fax" src="/assets/images/_.gif"></td><td>{FAX}</td>',
'</tr><tr>',
'<td colspan="4" width="100">',
'<tpl if="this.exists(GROUPPARTNERSHIPS)">',
'<b>Training Partnerships</b><br>',
'<tpl for="GROUPPARTNERSHIPS">',
'<tpl for="group">',
'<p>{primaryGroupName} / {middleGroupName} / {Name}</p>',
'</tpl>',
'</tpl>',
'</tpl>',
'</td>',
'</td></tr>',
'</tbody></table>'
)
});

var cm = new Ext.grid.ColumnModel({
defaults: {
width: 150,
sortable: true
},
columns: [
expander,
{
header: "UserName",
dataIndex: 'USERNAME',
width: 120
},{
header: "FirstName",
dataIndex: 'FIRSTNAME',
width: 220
},{
header: "LastName",
dataIndex: 'LASTNAME',
width: 220
},{
header: "ID",
dataIndex: 'USERID',
width: 235
}]
});

var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width:800,
height:400,
store: store,
cm: cm,
viewConfig: {forceFit:true},
plugins: expander
});

});

//-->
</SCRIPT>
</HEAD>

<BODY>
<div id="grid"></div>
</BODY>
</HTML>