What's New?

Grid, Reader and XML data structure question

  1. #1
    Dec 31, 2011, 7:20 AM

    Grid, Reader and XML data structure question

    Hello super ext.net coders,

    I have a simple xml file (link elements grouped in categories):

    <links>
<category id="1" name="category A">
<link>
<url>...</url>
</link>
<link>
<url>...</url>
</link>
...
</category>
<category id="2" name="category B">
...
</category>
</links>
    How can I load the data into a gridpanel, edit the link data (including the category name and id) and then save the data back to the xml file?

    My main problem is that I don't know how to get the original xml data schema (links grouped in categories) back from the grid.

    Any ideas , suggestions, samples?

    Thank you very much in advance and a Happy New Year to you all,

    Mimisss
  2. #2
    Jan 01, 2012, 8:50 AM
    pls see the link below :
    https://examples1.ext.net/#/GridPane...XmlDataSource/
  3. #3
    Jan 01, 2012, 10:12 AM
    Quote Originally Posted by Nastaran View Post
    pls see the link below :
    https://examples1.ext.net/#/GridPane...XmlDataSource/
    I've already seen it. But does not answer my question, exactly.
  4. #4
    Jan 02, 2012, 9:01 AM
    Hi,

    Hope the following example helps you to start.

    Example Page
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Proxy>
                        <ext:HttpProxy Url="Categories.xml" />
                    </Proxy>
                    <Reader>
                        <ext:XmlReader Record="category">
                            <Fields>
                                <ext:RecordField Name="id">
                                    <Convert Handler="return record.attributes[0].text;" />
                                </ext:RecordField>
                                <ext:RecordField Name="name">
                                    <Convert Handler="return record.attributes[1].text;" />
                                </ext:RecordField>
                                <ext:RecordField Name="links">
                                    <Convert Handler="var linksNodes = record.childNodes,
                                                          links = [],
                                                          link;
                                                      while (link = linksNodes.nextNode()) {
                                                        links.push([link.text]);
                                                      } 
                                                      return links;" />
                                </ext:RecordField>
                            </Fields>
                        </ext:XmlReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="id" DataIndex="id" />
                    <ext:Column Header="name" DataIndex="name" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowExpander runat="server">
                    <Component>
                        <ext:GridPanel runat="server" AutoHeight="true">
                            <Store>
                                <ext:Store ID="StoreLinks" runat="server">
                                    <Reader>
                                        <ext:ArrayReader>
                                            <Fields>
                                                <ext:RecordField Name="link" />
                                            </Fields>
                                        </ext:ArrayReader>
                                    </Reader>
                                </ext:Store>
                            </Store>
                            <ColumnModel>
                                <Columns>
                                    <ext:Column Header="Link" DataIndex="link" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Component>
                    <Listeners>
                        <BeforeExpand Handler="StoreLinks.loadData(record.get('links'));" />
                    </Listeners>
                </ext:RowExpander>
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>
    Example XML
    <?xml version="1.0" encoding="utf-8"?>

<links>
  <category id="1" name="category A">
    <link>
      <url>link1</url>
    </link>
    <link>
      <url>link2</url>
    </link>
  </category>
  <category id="2" name="category B">
    <link>
      <url>link3</url>
    </link>
    <link>
      <url>link4</url>
    </link>
  </category>
</links>
    Last edited by Daniil; Jan 15, 2012 at 6:44 PM.
  5. #5
    Jan 02, 2012, 12:53 PM
    Daniil,

    Absolutely amazing!

    A wii fix to get the second category attribute: record.attributes[1].text.

    I can go a step further and write:

    <ext:RecordField Name="links">      
      <Convert Handler="var linksNodes = record.childNodes,
            links = [],              
            link;
            while (link = linksNodes.nextNode()) {
                links.push({ title: link.childNodes[0].text,
                    image: link.childNodes[1].text,
                    url: link.childNodes[2].text
                });                                        
            }                             
            return links;" />  
</ext:RecordField>
    and then:

    <ext:Store ID="StoreLinks" runat="server"> 
<Reader>                                        
<ext:ArrayReader>                        
<Fields>                                                
<ext:RecordField Name="title">
<Convert Handler="return record.title" />
</ext:RecordField>  
<ext:RecordField Name="image">
<Convert Handler="return record.image" />
</ext:RecordField> 
<ext:RecordField Name="url">
<Convert Handler="return record.url" />
</ext:RecordField>    
</Fields>    
</ext:ArrayReader> 
</Reader>                                
</ext:Store>
    to accommodate for a xml source like:

    <link>      
<title>title1</title>
<image>image1</image>
<url>link1</url>    
</link>
    Right? Thank you very much for your prompt reply.


    One last question: I am learning ext.net mainly from the demos. Is there documentation to read how things work? For example, the records model, what parameters are passed to the handlers etc? Do I need to study the extjs docs to really understand ext.net?
    Last edited by Dimitris; Jan 02, 2012 at 12:59 PM.
  6. #6
    Jan 02, 2012, 1:38 PM
    Quote Originally Posted by Mimisss View Post
    Right?
    Yes, looks correct.

    Quote Originally Posted by Mimisss View Post
    One last question: I am learning ext.net mainly from the demos. Is there documentation to read how things work? For example, the records model, what parameters are passed to the handlers etc? Do I need to study the extjs docs to really understand ext.net?
    Please read this post:
    http://forums.ext.net/showthread.php...ll=1#post52700

    And yes, the ExtJS API docs are very helpful to understand basics.

    Before using the class you can read the class basics at the beginning of each ExtJS docs item, for example:
    http://docs.sencha.com/ext-js/3-4/#!...data.XmlReader
  7. #7
    Jan 02, 2012, 1:53 PM
    I will buy the book asap.

    Thank you very much (where is the mark as solution button?)
  8. #8
    Jan 02, 2012, 2:00 PM
    Quote Originally Posted by Mimisss View Post
    where is the mark as solution button?
    There is no such button on the forums. You can specify a respective tags (-s) for the thread.
  9. #9
    Jan 15, 2012, 10:50 AM
    The example has been added to the Examples Explorer.
    https://examples1.ext.net/#/GridPane...oading_Custom/

    There were the changes in the example to get cross-browser.

Similar Threads

  1. [CLOSED] Dynamic Labels Grid/Reader/Store
    By macap in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 13, 2010, 5:19 PM
  2. [CLOSED] Icon folder structure
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 08, 2010, 2:13 PM
  3. Json reader not retrive all pages of data in grid panel
    By Satyanarayana murthy in forum 1.x Help
    Replies: 0
    Last Post: Dec 05, 2009, 4:58 AM
  4. Grid Listeners - Correct Listener/Event to capture current structure of grid
    By bsnezw in forum 1.x Help
    Replies: 1
    Last Post: Sep 11, 2009, 11:41 AM
  5. Store/Array Reader truncating data
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 08, 2009, 3:20 PM

Tags for this Thread

Posting Permissions