1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    raiwinashu is on a distinguished road

      0  

    Default Answered: Implementing treeview using xml data

    Answered: Implementing treeview using xml data


    Hi All,

    I am new to Ext Js ,I am trying to implement tree view using Xml Data generated using Generic Handler. I was able to do using JSON data but i want to do using Xml data.Please someone tell me how to use Ext.data.TreeStore for Xml data.

    This is my code
    Code:
    var tstore = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'xmldata.ashx' // location of Data
                
            },
            root:{
                type:'xml',
                text: 'Book Details',
                id: 'Book',
                expanded: true
            },
            folderSort: true,
            sorters: [{
                property: 'text',
                direction: 'ASC'
            }]
        });
    
        var tree = Ext.create('Ext.tree.Panel', {
            store: tstore,
            viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop'
                }
            },
            renderTo: Ext.getBody(),
            height: 300,
            width: 250,
            title: 'Books',
            useArrows: true,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                        text: 'Expand All',
                        handler: function(){
                            tree.expandAll();
                        }
                    },
                    {
                        text: 'Collapse All',
                        handler: function(){
                            tree.collapseAll();
                        }
                    }]
            
               }]
         });
    Xml data generated Using Generic Handler
    Code:
    <Books>
             <Book>
                       <Sno>A001      </Sno>
                      <Bname>Plots</Bname>
                      <bauthor>Arthur</bauthor>
                     <Price>234       </Price>
                     <Country>India</Country>
                     <ISBN>12-34-5876-90</ISBN>
           </Book>
           <Book>
                      <Sno>A002      </Sno>
                      <Bname>Think And Grow Rich</Bname>
                      <bauthor>Napolean Hill</bauthor>
                      <Price>100       </Price>
                      <Country>India</Country>
                      <ISBN>23-12-1234-09</ISBN>
          </Book>
    </Books>
    Thanks
    Ashwin

  2. The default field for a TreeStore is called text. The default first column for a TreePanel is also called text. However, there is no reason you can't rename them to fit your data.

    Add this to your store:

    Code:
    fields: ['Sno', 'Bname']
    Then add this to your tree;

    Code:
    columns: [
        {dataIndex: 'Sno', text: 'Sno', xtype: 'treecolumn'},
        {dataIndex: 'Bname', text: 'Bname'}
    ]

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,630
    Vote Rating
    332
    Answers
    552
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    There's a standard example that covers this:

    http://dev.sencha.com/deploy/ext-4.0.../xml-tree.html

    From a quick look at your code, my first observations are that you don't have a reader configured, nor do you have any fields configured. You need to add an XML reader to your proxy. By default a treestore has a field called text but it seems that your data does not so you'll need to specify custom fields.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    raiwinashu is on a distinguished road

      0  

    Default


    Thanks for the reply

    I have configured reader this time,still i am not getting tree.Please tell me where i am going wrong or what i am missing.

    This is my edited code
    Code:
    var tstore = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'xmldata.ashx',
                extraParams: {
                    isXml: true
                },
                reader: {
                    type: 'xml',
                    root: 'Books',
                    record: 'Book'
                }
            },
            sorters: [{
                property: 'leaf',
                direction: 'ASC'
            }, {
                property: 'text',
                direction: 'ASC'
            }],
            root: {
                text:'text',
                id: 'id',
                expanded: true
            }
            
        });
    
        var tree = Ext.create('Ext.tree.Panel', {
            store: tstore,
            renderTo: Ext.getBody(),
            height: 300,
            width: 250,
            title: 'Books',
            useArrows: true,
                dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Expand All',
                    handler: function () {
                        tree.expandAll();
                    }
                },
                    {
                        text: 'Collapse All',
                        handler: function () {
                            tree.collapseAll();
                        }
                    }]
    
            }]
        });
    Xml generated using Generic Handler
    Code:
    <Books text="Has Children" id="1" leaf="false">
                <Book text="Has Children" id="2" leaf="false">
                           <Sno text="No Children" id="3" leaf="true">A001      </Sno>
                           <Bname text="No Children" id="4" leaf="true">Plots</Bname>
                           <bauthor text="No Children" id="5" leaf="true">Arthur</bauthor>
                           <Price text="No Children" id="6" leaf="true">234       </Price>
                           <Country text="No Children" id="7" leaf="true">India</Country>
                           <ISBN text="No Children" id="8" leaf="true">12-34-5876-90</ISBN>
                </Book>
                <Book text="Has Children" id="9" leaf="false">
                           <Sno text="No Children" id="10" leaf="true">A002      </Sno>
                           <Bname text="No Children" id="11" leaf="true">Think And Grow Rich</Bname>
                           <bauthor text="No Children" id="12" leaf="true">Napolean Hill</bauthor>
                           <Price text="No Children" id="13" leaf="true">100       </Price>
                           <Country text="No Children" id="14" leaf="true">India</Country>
                           <ISBN text="No Children" id="15" leaf="true">23-12-1234-09</ISBN>
                 </Book>
    </Books>
    Thanks
    Ashwin

  5. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,630
    Vote Rating
    332
    Answers
    552
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    The default field for a TreeStore is called text. The default first column for a TreePanel is also called text. However, there is no reason you can't rename them to fit your data.

    Add this to your store:

    Code:
    fields: ['Sno', 'Bname']
    Then add this to your tree;

    Code:
    columns: [
        {dataIndex: 'Sno', text: 'Sno', xtype: 'treecolumn'},
        {dataIndex: 'Bname', text: 'Bname'}
    ]

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    raiwinashu is on a distinguished road

      0  

    Default


    @Skirtle Thanks alot

    Its working...This is my screenshot
    sshot.jpg


    I dont want Sno(i.e A001 & A002) to be expanded further.What should i do?


    Regrds
    Ashwin

  7. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,630
    Vote Rating
    332
    Answers
    552
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Not sure it'll work, but you could try this:

    Code:
    fields: [
        ...
        {name: 'leaf', type: 'bool', defaultValue: false, persist: false, mapping: 'Sno/@leaf'}
    ]
    This assumes that your leaf attribute can be used in this way. If not, you may be able to achieve what you want using an alternative mapping or a convert function instead.

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    18
    Vote Rating
    0
    raiwinashu is on a distinguished road

      0  

    Default


    @Skirtle
    Its working fine.Thanks alot


    Regards,
    Ashwin

Thread Participants: 1