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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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 User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar