Results 1 to 6 of 6

Thread: Cannot get subtemplates working within expander

  1. #1

    Default Cannot get subtemplates working within expander

    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.
    Last edited by FreeBaseBuzz; 19 Nov 2009 at 4:09 PM. Reason: Made a standalone example in post 3

  2. #2

    Default

    nothing here
    Last edited by FreeBaseBuzz; 22 Nov 2009 at 2:18 PM. Reason: post removed

  3. #3

    Question

    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?

    Code:
    <!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>

  4. #4

    Default

    Hi All, the code above is standalone and can be plugged into a file and run directly.

    Does anyone know how sub templates work?

  5. #5

    Default

    Oh, one other question.. is it possible to get the ProgressColumn grid plugin working with the ColumnTree extension? or are they completely different?

  6. #6

    Default [SOLVED] SubTemplates in XTemplates

    Code:
    <!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>

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •