The Extjs4.0.7 tree structure reads the json file (in the frame viewport)

The Extjs4.0.7 tree structure reads the json file (in the framework viewport). Source:: exp time-

-

Test. json File
{Children :[
{Id: '01', text: 'a01', 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: '02', text: 'b02', leaf: true}
]}

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 east form on the right ----------------------------
Var east = new Ext. Panel ({
Title: 'east ',
Region: 'east ',
Split: true,
Border: true,
Collapsible: true,
Width: 100,
MinSize: 100,
MaxSize: 120
});

// ---------------------------------------- Define the following 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 an automatic scroll bar exceeded the range
AutoScroll: true,
// Animate: true,
// Root: root,
// The default root directory is not displayed.
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 components ',
Store: treeStore1,
Animate: true,
AutoScroll: true, // if the range is exceeded, an automatic scroll bar is displayed.
Width: 500,
Height: 400,
Border: true, // display tree side frame
// Data container
// 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 button
Split: true,
Border: false,
Width: 225,
Layout: "accordion ",
// ExtraCls: "roomtypegridbbar", // Add an animation effect
LayoutConfig :{
Animate: true
},
Region: "west ",
Title: 'warwick system ',
Items :[{
Title: "<B> production system module </B> ",
AutoScroll: true,
Items: [treepanel2],
IconCls: "Managing manageicon"
},{
Title: "<B> personnel and salary system module </B> ",
AutoScroll: true,
IconCls: "Managing manageicon"
// Items: [treenode]
},{
Title: "<B> OA system module </B> ",
AutoScroll: true,
IconCls: "Managing manageicon"
// Items: [treenode]
},{
IconCls: "gonggao ",
Title: "<B> <span style = 'color: red';> Hotel Notice </span> </B>"
// Items: [publishinfosgrid]
}]
});

// -------------------------------------------- Program start -------------------------------------
Ext. onReady (function (){
// Define the tree component
// Ext. Msg. alert ('prompt information', 'learn extjs ');

Var vp = new Ext. Viewport ({
Layout: "border ",
Items: [north, east, west, center, south]
});
});