PDA

View Full Version : Implementing treeview using xml data



raiwinashu
20 Dec 2011, 9:54 PM
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


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


<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

skirtle
21 Dec 2011, 12:46 AM
There's a standard example that covers this:

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/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.

raiwinashu
21 Dec 2011, 5:38 AM
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


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


<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

skirtle
21 Dec 2011, 1:21 PM
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:


fields: ['Sno', 'Bname']

Then add this to your tree;


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

raiwinashu
21 Dec 2011, 9:23 PM
@Skirtle Thanks alot

Its working...This is my screenshot
30225


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


Regrds
Ashwin

skirtle
21 Dec 2011, 9:31 PM
Not sure it'll work, but you could try this:


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.

raiwinashu
21 Dec 2011, 10:11 PM
@Skirtle
Its working fine.Thanks alot


Regards,
Ashwin