Results 1 to 4 of 4

Thread: How to load a Template with a Xml File ?

  1. #1

    Question How to load a Template with a Xml File ?

    Please, I need your help.

    I studied a lot example and when I try with my xml file it doesn't work...

    And yet, my test is very easy...

    Here is my xml file :
    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <elements>
           <element>
              <name>Jack Slocum</name>
              <company>Ext JS, LLC</company>
              <city>Cleveland</city>
              <state>Ohio</state>          
           </element>
        </elements>
    </Root>
    Here is my javascript :
    Code:
    Ext.onReady(function() {
        var store = new Ext.data.Store({
          url: 'tst.xml',
          reader: new Ext.data.XmlReader({
            record: 'element',
            fields: ['name', 'company','city','state']
          })
        });
        store.load();
    
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {header: "name", width: 120, dataIndex: 'name', sortable: true},
                {header: "company", width: 180, dataIndex: 'company', sortable: true},
                {header: "city", width: 115, dataIndex: 'city', sortable: true},
                {header: "state", width: 100, dataIndex: 'state', sortable: true}
            ],
            renderTo:document.body,
            width:540,
            height:200
        });
        
        //
        var tpl = new Ext.Template(
            '<p>Name: {name}</p>',
            '<p>Company: {company}</p>',
            '<p>Location: {city}, {state}</p>'
        );
        tpl.compile();
        tpl.append(document.body, store.getRange());
    });
    And here is my basic html
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Template Test 05</title>
    <link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../extJS/ext-all.js"></script>
        
    <script type="text/javascript" src="tst.js"></script>
    <link rel="stylesheet" type="text/css" href="globalStyle.css" />
    </head>
    <body>
    <!--<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    <h1>Template Test 05</h1>
    
    <!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
    
    </body>
    </html>
    My grid works, but my tpl is empty... I don't understand.

    Many thanks for your help,

  2. #2

    Default

    Nobody knows ?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    There 2 things wrong with your code:
    1. You are not waiting for the store to load.
    2. store.getRange() returns an array of records, but your template expects a simple object.

    Use:
    Code:
    store.on('load', function(){
        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<p>Name: {values.data.name}</p>',
            '<p>Company: {values.data.company}</p>',
            '<p>Location: {values.data.city}, {values.data.state}</p>',
            '</tpl>'
        ).compile();
        tpl.append(Ext.getBody(), store.getRange());
    });

  4. #4

    Default

    Great! Many thanks Condor!

    Here are all files :

    My xml file (tst.xml) :
    Code:
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <Root xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
        <elements>
           <element>
              <name>Jack Slocum</name>
              <company>Ext JS, LLC</company>
              <city>Cleveland</city>
              <state>Ohio</state>          
           </element>
                  <element>
              <name>Boby Fischer</name>
              <company>Chess, LLC</company>
              <city>Reykjavik</city>
              <state>Islande</state>          
           </element>
        </elements>
    </Root>
    my html file (index.html) :
    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Template Test 05</title>
    <link rel="stylesheet" type="text/css" href="../extJS/resources/css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="../extJS/adapter/ext/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../extJS/ext-all.js"></script>
        
    <script type="text/javascript" src="tst.js"></script>
    <link rel="stylesheet" type="text/css" href="globalStyle.css" />
    </head>
    <body>
    <!--<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
    <h1>Template Test 05</h1>
    
    <!-- a place holder for the grid. requires the unique id to be passed in the javascript function, and width and height ! -->
    
    </body>
    </html>
    And my javascript file (tst.js) :
    Code:
    /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * [email protected]
     * http://www.extjs.com/license
     */
    Ext.onReady(function() {
        var store = new Ext.data.Store({
          url: 'tst.xml',
          reader: new Ext.data.XmlReader({
            record: 'element',
            fields: ['name', 'company','city','state']
          })
        });
        store.load();
    
        store.on('load', function(){
            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: [
                    {header: "name", width: 120, dataIndex: 'name', sortable: true},
                    {header: "company", width: 180, dataIndex: 'company', sortable: true},
                    {header: "city", width: 115, dataIndex: 'city', sortable: true},
                    {header: "state", width: 100, dataIndex: 'state', sortable: true}
                ],
                renderTo:document.body,
                width:540,
                height:200
            });
    
            var tpl = new Ext.XTemplate(
                '<tpl for=".">',
                '<p>Name: {values.data.name}</p>',
                '<p>Company: {values.data.company}</p>',
                '<p>Location: {values.data.city}, {values.data.state}</p>',
                '</tpl>'
            ).compile();
            tpl.append(Ext.getBody(), store.getRange());
        });
    });

Similar Threads

  1. How to load image in a combostore from XML file
    By saravanan.sbm in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 12 May 2009, 6:30 AM
  2. Need API to load xml content instead of xml file in ETX.Panel
    By sankarkumar in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 May 2009, 10:32 AM
  3. Help Load data from xml file for XTemplate
    By il Sergio in forum Ext 2.x: Help & Discussion
    Replies: 18
    Last Post: 31 Oct 2008, 9:03 AM
  4. New to load XML file in Ext 2.0
    By daffinovich in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 18 Mar 2008, 3:36 PM
  5. how to load data from xml file
    By rajeshcn in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 6 Nov 2007, 9:25 AM

Posting Permissions

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