Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: XML Grid Problem

  1. #1

    Default XML Grid Problem

    Hello,
    I am trying to build a simple grid. But I am encountering a null exception.

    Code:
    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * [email protected]
     * http://www.extjs.com/license
     */
    
    Ext.onReady(function(){    
        
        var reader = new Ext.data.XmlReader({
        record: "State"},    
        [{name: "Id", mapping: "@Id"},
        {name:"Name", mapping: "@Name"}, 
        {name:"email", mapping: "@email"}    
        ]
    
    
        /*record:"District"}, [{
        name: "cId", mapping: "@Id"},
        {name:"CustomerName", mapping: "@CustomerName"} 
        
        ]
    
        */
        );
        
        var store = new Ext.data.Store({
        // Load data at once
        autoLoad: true,
        reader:reader,
        url: "test.xml"               
            
        });
            
        var colModel = new Ext.grid.ColumnModel([
    		{header: "Id", width: 120, dataIndex: "Id", sortable: true},
            {header: "Name", width: 180, dataIndex: "Name", sortable: true},
            {header: "email", width: 115, dataIndex: "email", sortable: true},
            
            /*{header: "cId", width: 120, dataIndex: "cId", sortable: true},
            {header: "CustomerName", width: 180, dataIndex: "CustomerName", sortable: true}
            */
    	]); // end of colmodel
    
        //alert(store.value);
        alert(colModel.value);
    
        var grid = new Ext.grid.GridPanel("mygrid", {
            ds: store,
            cm: colModel    
        }); // end of grid
        
        grid.render();
        dataStore.load();   
        
    }); // End of Ext.onReady()
    Sample XML
    Code:
    <State Id="1" Name="John" email="[email protected]" >
        <City Id="501" CustomerName="Darryl" />
        <City Id="502" CustomerName="Kai" />
    </State>
    <State Id="1" Name="John" email="[email protected]" >
        <City Id="501" CustomerName="Darryl" />
        <City Id="502" CustomerName="Kai" />
    </State>
    Observations: I have similar multiple child nodes for each parent element and also multiple attributes for each element.
    Browser was throwing me off at the red colored code. I am trying to figure out where I am going wrong in this.
    Any help is appreciated.

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

    Default

    Your XML is invalid. An XML document can only have ONE element as the root (you could wrap your <State> elements inside a single <States> element).

    Are you loading the XML file from a server or from your local filesystem (which isn't supported!).

  3. #3

    Default

    Quote Originally Posted by Condor View Post
    Your XML is invalid. An XML document can only have ONE element as the root (you could wrap your <State> elements inside a single <States> element).

    Are you loading the XML file from a server or from your local filesystem (which isn't supported!).
    Condor

    Yes, <State> Element is inside <States> element in the xml document. I haven't posted the whole document.
    XML document is coming from a server, But I am initially testing with a sample from local machine. Once I get this too work,
    I can add a Httpproxy and change the url.

    Howcome the XML file from local system is not supported, when the grid examples being shown are from local machine, and they worked for me.

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

    Default

    XmlHttpRequest to the local filesystem isn't supported (there are patches to make Ext support it on current browsers, but upcoming browsers actually don't allow it anymore due to security reasons).

    If you are using XmlHttpRequests then you need to host your application on a HTTP server.

  5. #5

    Default

    Hi,

    I am still encountering problems in rendering a grid I am trying to render the xml elements into the grid. I tried putting in another xmlreader for child elements but could'nt get to work. Right now I am trying to atleast display the parent elements. Any help is appreciated.
    HTML Code:
    Code:
    <html>
    <head>
    	<title> Getting started with ExtJS </title>
    	<link rel="stylesheet" type="text/css"
    		href="http://localhost/lib/ext-3.2.1/resources/css/ext-all.css"/>
    	<script src="http://localhost/lib/ext-3.2.1/adapter/ext/ext-base.js"></script>
    	<script src="http://localhost/lib/ext-3.2.1/ext-all-debug.js"></script>
    	
    	
    	<script type="text/javascript" src="http://localhost/grid.js"></script> 
    	<link rel="stylesheet" type="text/css" href="http://localhost/lib/ext-3.2.1/examples/grid/grid-examples.css" /> 
    </head>
    
    <body>
    Testing extjs
    
    <div id="example-grid"></div> 
    
    </body>
    </html>
    XML File
    Code:
    <?xml version="1.0" encoding="utf-8" ?> 
    <States>
    <State Id="1" Name="John" email="[email protected]" Zipcode="12345">
        <City Id="501" CustomerName="Darryl" Zipcode="12345" />
        <City Id="502" CustomerName="Kai" Zipcode="12345" />
    </State>
    <State Id="1" Name="John" email="[email protected]" Zipcode="67890" >
        <City Id="501" CustomerName="Darryl" Zipcode="67890" />
        <City Id="502" CustomerName="Kai" Zipcode="67890" />
    </State>
    </States>
    Javascript Code:
    Code:
    Ext.onReady(function(){
    
        
    	
    	// create the Data Store
        
    	var store = new Ext.data.Store({
            
    	// load using HTTP
            
    	url: 'test.xml',
    
            
    	// the return will be XML, so lets set up a reader
            
    	
    	reader: new Ext.data.XmlReader({
                   
    	
    	record: 'State',
                   
    	
    	fields: [
                   // set up the fields mapping into the xml doc
                   
    	// The first needs mapping, the others are very basic
                   
    	{name: 'Id', mapping: '@Id'},
                   
    	{name:"Name", mapping: "@Name"}, 
            {name:"email", mapping: "@email"}
    ,
    	{name:"zipcode", mapping: "@zipcode"}
    	           
    	])
        
         });
    
        
    
    	// create the grid
        
    	var grid = new Ext.grid.GridPanel({
            
    	store: store,
            
    	columns: [
            
    	{header: "Id", width: 120, dataIndex: "Id", sortable: true},
            {header: "Name", width: 180, dataIndex: "Name", sortable: true},
            {header: "email", width: 115, dataIndex: "email", sortable: true},
            {header: "zipcode", width: 120, dataIndex: "zipcode", sortable: true}    
            
    	],
            
    	
    	renderTo:'example-grid',
            
    	width:540,
            
    	height:200
        
    	
         });
    
        
    	
         store.load();
    
    });

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

    Default

    1. The mapping for zipcode is wrong.
    2. Did you check with Firebug (or Fiddler2 etc.) that the request is made and the server sends the correct response?

  7. #7

    Default

    Quote Originally Posted by Condor View Post
    1. The mapping for zipcode is wrong.
    2. Did you check with Firebug (or Fiddler2 etc.) that the request is made and the server sends the correct response?
    Condor,

    Thanks for your help. I got the basic grid to be rendered with the State element. Yes I figured that my zipcode mapping is wrong. I am trying to as well display the child element (City) in the same grid. I tried adding a new store with another xmlreader and then added the store into the grid panel. I couldn't get that to work. I commented that part in the below code. Can you please tell me how do I this, or where I am going wrong in my code.

    Code:
    Ext.onReady(function(){
    
        // create the Data Store
        
    	var store = new Ext.data.Store({
            
    	// load using HTTP        
    	url: 'test.xml',        
    	// the return will be XML, so lets set up a reader	
    	reader: new Ext.data.XmlReader({    
    		record: 'State'
        },
    	
    	[
        
    	// set up the fields mapping into the xml doc               
    	// The first needs mapping, the others are very basic
                   
    	{name: 'Id', mapping: '@Id'},               
    	{name:"Name", mapping: "@Name"}, 
        {name:"email", mapping: "@email"},
    	{name:"zipcode", mapping: "@Zipcode"}	           
    	])    
        });
    	
    	/*var store2 = new Ext.data.Store({
            
    	// load using HTTP        
    	url: 'test.xml',        
    	// the return will be XML, so lets set up a reader	
    	reader: new Ext.data.XmlReader({    
    		record: 'City'
        },
    	
    	[
        
    	// set up the fields mapping into the xml doc               
    	// The first needs mapping, the others are very basic
                   
    	{name: 'cId', mapping: '@Id'},               
    	{name:"CustomerName", mapping: "@CustomerName"}, 
        {name:"cityzip", mapping: "@Zipcode"}	           
    	])    
        });
    	
    	*/
    	
    	// create the grid    
    	var grid = new Ext.grid.GridPanel({        
    	store: store, 
    	//store2,
    		
    	columns: [      
    		{header: "Id", width: 120, dataIndex: "Id", sortable: true},
            {header: "Name", width: 180, dataIndex: "Name", sortable: true},
            {header: "email", width: 115, dataIndex: "email", sortable: true},
            {header: "zipcode", width: 120, dataIndex: "zipcode", sortable: true}
    		/*{header: "cId", width: 120, dataIndex: "cId", sortable: true}
    		{header: "CustomerName", width: 120, dataIndex: "CustomerName", sortable: true}
    		{header: "cityzip", width: 120, dataIndex: "cityzip", sortable: true}*/
    		
    	],
    	
    	renderTo:'example-grid',        
    	width:540,        
    	height:200  	
        });
        
    	store.load();
    	//store2.load();
    });

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

    Default

    How exactly are you planning on displaying this data?

    Flattened (one record for every city extended with the user details) or hierarchical (grids can't do that - you would need a tree for that).

  9. #9

    Default

    Quote Originally Posted by Condor View Post
    How exactly are you planning on displaying this data?

    Flattened (one record for every city extended with the user details) or hierarchical (grids can't do that - you would need a tree for that).
    Yes Flattened. For each row displaying the City row, I would display the State elements. So the State elements would pretty much be repeating.
    I can use a tree, but I am not sure, how do I display a tree with all the elements like a grid embedded.

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

    Default

    In that case I recommend using:
    Code:
    reader: new Ext.data.JsonReader({
        root: 'City',
        fields: [
            {name: 'CityId', mapping: '@Id'},
            {name: 'CustomerName', mapping: '@CustomerName'},
            {name: 'CityZipcode', mapping: '@Zipcode'},
            {name: 'StateId', convert: function(v, n){
                return Ext.DomQuery.selectValue('@Id', n.parentNode);
            }},
            {name: 'Name', convert: function(v, n){
                return Ext.DomQuery.selectValue('@Name', n.parentNode);
            }},
            {name: 'email', convert: function(v, n){
                return Ext.DomQuery.selectValue('@email', n.parentNode);
            }},
            {name: 'StateZipcode', convert: function(v, n){
                return Ext.DomQuery.selectValue('@Zipcode', n.parentNode);
            }}
        ]
    })
    Disclaimer: Completely untested code!

Page 1 of 2 12 LastLast

Similar Threads

  1. Paging Problem in XML Grid
    By rajeshin in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 8 Aug 2008, 6:59 AM
  2. XML Reader / Grid Problem
    By Tony Mariella in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 25 Jul 2008, 9:39 AM
  3. XML grid tooltip problem
    By dreamed in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Mar 2008, 2:36 PM
  4. [xml-grid] Problem to display grid content
    By cocholatine in forum Ext 1.x: Help & Discussion
    Replies: 21
    Last Post: 31 Aug 2007, 11:17 AM
  5. Simple problem: Grid does not load an XML
    By amon in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 15 Apr 2007, 9:51 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
  •