Extjs4.0.7 tree structure reads JSON file (in frame viewport) __div

Test.json file

{children:[
{ID: ' A01 ', text: ' children:[',
{ID: ' 01-01 ', text: ' A01-01 ', leaf:true},
{ID: ' 01-02 ', text: ' a01-02 ', children:[
{ID: ' 01-02-01 ', text: ' B01-02-01 ', leaf:true},
{ID: ' 01-02-02 ', text: ' A01-02-02 ', leaf:true}
]},
{ID: ' 01-03 ', text: ' B01-03 ', leaf:true}
]},
{ID: ', Text: ' B02 ', leaf:true}
]}

CSS style: (note When passing parameters leaf: ' True ' red part must be lowercase, for some reason, no capitalization)

/* For the opening and closing state of the node and leaf node State respectively set the style *
/* If no. x-tree-icon-parent will not have the expanded icon, (expand and do not expand the icon) * *
. x-grid-tree-node-expanded. X-tree-icon-parent{width:16px;background-image:url (. /images/icons/v3_expanded.ico)!important;}

. X-tree-icon-parent{width:16px;background-image:url (. /images/icons/v3_collapsed.ico)!important;}
. X-tree-icon-leaf{width:16px;background-image:url (. /images/icons/edit.png)!important;}

Viewport_tree.js

--------------------------------------define the top form----------------------------

var north=new ext.panel ({
Title: ' North ',
Region: ' North ',
Split:true,
Border:true,
Collapsible:true,
HEIGHT:80,
MINSIZE:100,
maxsize:120
}); --------------------------------------define the right east form----------------------------

var east=new ext.panel ({
Title: ' East ',
Region: ' East ',
Split:true,
Border:true,
Collapsible:true,
WIDTH:100,
MINSIZE:100,
maxsize:120
});

--------------------------------------define the bottom south form----------------------------

var south=new ext.panel ({
Title: ' South ',
Region: ' South ',
Split:false,
Border:true,
HEIGHT:80,
Collapsible:true
});

--------------------------------------define the left West form----------------------------

var treeStore1 = ext.create (' Ext.data.TreeStore ', {
Autoload:true,
Proxy: {
Type: ' Ajax ',
URL: ' Test.json.json ',
Reader: {
Type: ' JSON ',
Root: ' Children '
Record: ' Node '
}
},
Sorters: [{
Property: ' Leaf ',
Direction: ' ASC '
}],
Root: {
NodeType: ' Async ',
Text: ' Ext JS ',
ID: ' 00 ',
Expanded:true
}
});

var treepanel1 = ext.create (' Ext.tree.TreePanel ', {
If out of range with automatic scroll bar
Autoscroll:true,
Animate:true,
Root:root,
Default root directory does not display
Rootvisible:true,
Border:false,
Animate:true,
Lines:true,
Enabledd:true,
height:600,
Store:treestore1
width:500
Containerscroll:true
});

var treepanel2 = ext.create (' Ext.tree.Panel ', {
Title: ' Simple tree-shaped component ',
Store:treestore1,
Animate:true,
Autoscroll:true,//If out of range with automatic scroll bar
WIDTH:500,
height:400,
Border:true,//show Tree side frame
Data containers
Loader:new Ext.tree.TreeLoader ({url: "Web/menutree.json"}),
Rootvisible:true,//whether to display the root node
RenderTo:Ext.getBody ()
Containerscroll:true,
Listeners: {
' ItemClick ': function (view, record) {
var leaf = record.get (' leaf ');
if (leaf) {
Alert (' is leaf! ');
var id = record.get (' id ');
var text = record.get (' text ');
var tabPanel = ext.getcmp (' Mainpanel ');
/*
var tab = tabpanel.getcomponent (ID);
if (!tab) {
Tabpanel.add (Ext.create (' Tesz.App.Panels. ' + ID)). Show ();
}
Tabpanel.setactivetab (tab);
*/
}
else {
Alert (' not leaf! ');
var expand = Record.get (' expanded ')
if (expand) {
View.collapse (record);
}
else {
View.expand (record);
}
}
}
}//listeners-------Funcation end----------
});

var west=new ext.panel ({
Collapsible:true,//Auto Shrink button
Split:true,
Border:false,
width:225,
Layout: "Accordion",
EXTRACLS: "Roomtypegridbbar",//Add animation effect
Layoutconfig: {
Animate:true
},
Region: "West",
Title: ' Wei Wei system ',
items:[{
Title: "<b> Production system Module </b>",
Autoscroll:true,
ITEMS:[TREEPANEL2],
ICONCLS: "Hotelmanageicon"
},{
Title: "<b> Personnel salary System module </b>",
Autoscroll:true,
ICONCLS: "Hotelmanageicon"
Items:[treenode]
},{
Title: "<b>oa System Module </b>",
Autoscroll:true,
ICONCLS: "Hotelmanageicon"
Items:[treenode]
},{
ICONCLS: "Gonggao",
Title: "<b><span style= ' color:red '; >hotel notice</span></b>"
Items:[publishinfosgrid]
}]
});

------------------------------------------program starts-------------------------------------
Ext.onready (function () {
Defining a Tree Component
Ext.Msg.alert (' Cue message ', ' learn ExtJS ');

var vp=new ext.viewport ({
Layout: "Border",
Items:[north, east, West, center, south]
});
});