Loading Advanced XML Schema into TreePanel

Page 1 of 2 12 LastLast
  1. #1

    Loading Advanced XML Schema into TreePanel

    I am extracting a large piece of XML from database and would like to create my TreePanel in most efficient way possible based on this XML. The current method returns an XmlDocument object, which I can process node for node and build up in code-behind the TreePanel, however this would be highly inefficient and process intensive.

    1. Taking your XML example, "http://examples2.ext.net/#/TreePanel/Loaders/Xml_File_Loading/" which loads from XmlDataSource and binds the XML file directly, would this same approach be possible?

    2. If so, the above "authors.xml" example is a very simple XML Schema and does not contain any attributes for each node. Can you confirm that including attributes would simply bind as per above example assuming attributes are same list of properties defined in Node Constructor documentation? "http://docs.ext.net/index.html#topic_00000000000018E1_members--.html"

    3. If so, could you provide an example of such with some attributes that could be included in the XML Schema with accompanying binding info.

    4. How would custom attributes be handled?

    5. Finally, I cannot make out how to deal with click (execute function) and right click (load context menu) events. Are these attributes or child nodes of some other description?

    I can redefine my XML Schema exactly to meet required schema

    Thank you
  2. #2
    Hello,

    We don't have a sample or built in functionality that builds something completely based on a pre-defined xml schema.

    however this would be highly inefficient and process intensive.
    At some point something has to do the processing. I wouldn't say what you want to do is particularly inefficient nor process intensive nor difficult. Whether it is your code doing the processing, or server-side code within Ext.NET, or client-side code within Ext JS, something has to do the work.

    How about deserializing your .xml file into a Collection of object. That would make it very simple to iterate over the collection and build up the nodes of the TreePanel.

    If you have many nodes to load (100's or 1000's), then you should probably investigate dynamic loading the nodes. The following sample demonstrates using a TreeStore and returning only the required nodes for an HttpHandler.

    http://examples2.ext.net/#/TreePanel...Using_Handler/

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hi,

    Thanks for feedback. Was hoping to follow the same method, I referred to previously, which appears very is a very straightforward, but with added bells and whistles.

    Understand need to process, and had looked at the deserialising option, given your suggestion, will investigate again.
  4. #4
    As far as I know, in version 1.x one could extend the XmlTreeLoader component so as to cater both for standard and custom node attributes (by overriding the processAttributes function). For example, you could set the icon of nodes depending on an xml property value, etc. Actually, I've found a very nice example:

    http://www.epa.gov/region10/map/EXT_...ee-loader.html

    In version 2.x, the XmlTreeLoader is not supported anymore and has been replaced by the TreeStore component. If the above example is what you are talking about then maybe we can further investigate how to extend the new component.
    Last edited by geoffrey.mcgill; Feb 01, 2015 at 7:23 PM.
  5. #5
    Hi Dimitris,

    Yes, your example and exactly what I was looking for. Thanks also for mentioning that XmlTreeLoader is not supported in v2 anymore. I guess the question is around what can you do with TreeStore?
  6. #6
    The TreeStore offers the BeforeAppend event, which fires before a new child is appended and can be combined with CustomAttributeBindings.

    So, given the following data source:

    <?xml version="1.0" encoding="utf-8" ?>
    <authors>
      <author text="Fyodor Dostoevsky" gender="User">
          <book title="Crime and Punishment" published="1866" url="http://ext.net/blogs/author1/book1"/>
          <book title="The Brothers Karamazov" published="1879" url="http://ext.net/blogs/author1/book2" />
      </author>
      <author text="Stephen King" gender="User">
          <book title="The Shining" published="1977" url="http://ext.net/blogs/author2/book1"/>
          <book title="Cujo" published="1981" url="http://ext.net/blogs/author2/book2"/>
      </author>
      <author text="J.K. Rowling" gender="UserFemale">
          <book title="Harry Potter and the Sorcerer's Stone" published="1997" url="http://ext.net/blogs/author3/book1" />
          <book title="Harry Potter and the Chamber of Secrets" published="1998" url="http://ext.net/blogs/author3/book2" />
          <book title="Harry Potter and the Prisoner of Azkaban" published="1999" url="http://ext.net/blogs/author3/book3" />
      </author>
    </authors>
    an option is to bind the published property and use it in the BeforeAppend event handler to distinguish between nodes. In this example, only leaf nodes have their text changed. Also note, that the icon is being taken care of by using the IconField property. Most of the standard config items defined in NodeInterface can be accessed by their corresponding properties in markup or code (e.g. IconField, HrefField, Expanded etc). You can access these properties inside your handler, too.

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var processAttributes = function (node, childNode) {
                if (childNode.isLeaf()) {
                    childNode.set('text', childNode.get('text') + ' (' + childNode.raw.published + ')');
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" 
                DataFile="authors.xml">
            </asp:XmlDataSource>
    
            <ext:TreePanel ID="TreePanel1" runat="server" Height="300" Width="250">
                <Store>
                    <ext:TreeStore ID="TreeStore1" runat="server" DataSourceID="XmlDataSource1">
                        <DataBindings>
                            <ext:NodeBinding DataMember="Authors" Text="Authors List"  />
                            <ext:NodeBinding DataMember="author" TextField="text" IconField="gender" />
                            <ext:NodeBinding DataMember="book" HrefField="url" TextField="title" Leaf="true">
                                <CustomAttributeBindings>
                                    <ext:CustomAttributeBinding AttributeField="published" />
                                </CustomAttributeBindings>
                            </ext:NodeBinding>
                        </DataBindings>
                        <Listeners>
                            <BeforeAppend Fn="processAttributes" />
                        </Listeners>
                    </ext:TreeStore>
                </Store>
            </ext:TreePanel>        
    
        </form>
    </body>
    </html>
    Hope it helps.
    Last edited by geoffrey.mcgill; Feb 03, 2015 at 7:04 PM.
  7. #7
    Hi Dimitris

    This is the direction I am keen to go, however, hopefully last question. Given I need to approach this from code-behind, have you got example illustrating how this could be done in that way?

    thank you so much
  8. #8
    At this point, I would very much appreciate it if you could post a simplified sample which demonstrates the problem. When it comes to code behind, you can build the whole tree in code and not use XmlDataSource at all, for example: http://examples2.ext.net/#/TreePanel...in_CodeBehind/
    Last edited by geoffrey.mcgill; Feb 11, 2015 at 1:06 AM.
  9. #9
    Hi Dimitris,

    I have reverted to code behind for now, however have further issue. A snippet of my helper method used for creating each node is below, however I realise I have a problem with the Listener piece in that I actually have to handle click, dblclick, and contextMenu (right click) and not sure how to bring that into the code behind building of my tree.

    return new Ext.Net.Node
    {
    	Text = "textvalue",
    	NodeID = "nodeIDvalue",
    	Qtip = "tooltipvalue",
    	CustomAttributes = 
    	{ 
    		new ConfigItem("pID", "pIDvalue"), 
    	},                
    	Listeners = { 
    		BeforeLoad = { Handler = "onClickvalue" } 
    	},                  
    }
    Last edited by Dimitris; Apr 06, 2015 at 2:46 PM. Reason: code block format
  10. #10
    All the events you've mentioned are handled by the TreePanel and not by the nodes. If you take a look at the Multi Node TreePanel Built From Code-Behind example you will find code such as:

    tree.Listeners.ItemClick.Handler = 
            statusBar.ClientID + ".setStatus({text: record.data.text, clear: false});";
    Likewise, you can use the following events:

    • tree.Listeners.ItemDblClick
    • tree.Listeners.ItemContextMenu


    Hope it helps.
Page 1 of 2 12 LastLast

Similar Threads

  1. XML Extnet Schema to avoid Information Error in web.config
    By equiman in forum Examples and Extras
    Replies: 4
    Last Post: Mar 19, 2015, 4:25 PM
  2. [CLOSED] DB Schema for Calendar
    By rthiney in forum 2.x Premium Help
    Replies: 1
    Last Post: Oct 30, 2014, 9:41 PM
  3. [CLOSED] pre-loading a TreePanel BUT only for 1 or 2 levels?
    By adrianot in forum 2.x Premium Help
    Replies: 1
    Last Post: May 07, 2014, 3:54 PM
  4. Advanced Treepanel checkboxes
    By jchau in forum Feature Requests
    Replies: 4
    Last Post: Jan 28, 2009, 10:45 AM
  5. [CLOSED] GridPanel / Store schema
    By methode in forum 1.x Premium Help
    Replies: 8
    Last Post: Jan 13, 2009, 4:43 PM

Tags for this Thread

Posting Permissions