Ext JS Basics (Panel layout viewport)

1Ext.onready (function () {2     //Create a Treestore,treestore responsible for providing data to the tree3     varstore = ext.create (' Ext.data.TreeStore ',4         {5 root:{6Expandedtrue,7 children:[8{text: "Classical", expanded:true, Children:9                         [Ten{id:1,text: "Journey to the Monkey", Leaf:true}, One{id:2,text: "Kingdoms", Leaf:true}, A{id:3,text: "Outlaws of the Marsh", Leaf:true}, -{id:4,text: "Red Mansions", Leaf:true}, -{id:5,text: "Seal god Kingdoms", leaf:true}, the{id:6,text: "Search God's Mind", Leaf:true} -                         ] -                     }, -                     { +Text: "Romance", expanded:true, Children: -                         [ +{id:7,text: "Acacia tree", Leaf:true}, A{id:8,text: "Ten Years in Love", Leaf:true} at                         ] -                     } -                 ] -             } -         }); -  in     //Create a layout container that holds the tree above -Ext.create (' Ext.container.Viewport ', to         { +Layout: ' Border ', - items:[ the                 //contents of the above area *                 { $Region: ' North ',Panax NotoginsengHTML: ' <div style= ' width:900px ' ><a href= ' www.cctv.com ' ></div> ' -                 }, the                 //put a tree on the left +                 { ARegion: ' West ', theXtype: ' Treepanel ',//this is Ext.tree.Panel . +Title: ' Collection of books ', - listeners:{ $                         //adding listeners to the ItemClick event $ItemClick:function(View,record,item) -                         { -                             //if it's a leaf node the                             if(record.data.leaf) { -                                 //gets the My_center component of the page, when the component Ext.tab.PanelWuyi                                 varTabPanel = ext.getcmp (' My_center ');//in the following ' My_center has been defined, it is decided that this is a tab container ' the                                 //If the page does not have the corresponding component for the book ID -                                 if(!ext.getcmp (record.data.id)) { Wu                                     //Insert a new tab page into the Ext.tab.Panel component -                                     vartab =Tabpanel.add ( About                                         { $                                             //set the properties of the New tab page - Id:record.data.id, - Title:record.data.text, - Html:record.data.text, AClosable:true +                                         } the                                     ); -                                 } $  the                                 //querying a book that is being activated the Tabpanel.setactivetab (record.data.id); the                                 //Insert content in the Ext.panel.Panel component of the down area theEXT.GETCMP (' info '). Add ({html: ' Operation of ' +record.data.text+ ' book!) ‘}); -                             } in  the                         } the                     }, About  thewidth:200, the Store:store, theRootvisible:false +                 }, -                 //the contents of the following area, using a common Ext.panel.Panel the                 //no Xtype specified, default is Ext.panel.PanelBayi                 { theID: ' Info ', theRegion: ' South ', -Title: ' Operation Information ', -Collapsible:true, theSplittrue, theheight:100, theminheight:100 the                 }, -  the                 //the contents of the right area, using a common Ext.panel.Panel the                 { theRegion: ' East ',94Title: ' Right column ', theCollapsible:true, theSplittrue, thewidth:15098                 }, About  -                 //contents of the middle panel: using Ext.tab.Panel101                 {102Region: ' Center ',103ID: ' My_center ',104Xtype: ' TabPanel ', theactivetab:0,106 items:{107Title: ' Home ',108HTML: ' An example of learning Ext.container.Viewport '109                     } the                 }]111         }); the});

Effect:

Ext JS Basics (Panel layout viewport)