Extjs4 manual-page control (tree control)

1. Simple tree:

Example:

<SCRIPT type = "text/JavaScript"> Ext. onready (  Function  (){  //  Define tree components Ext. Create ('ext. Tree. Panel' , {Title: 'Simple tree components' , Width: 200 ,  //  Data container Store: Ext. Create ('ext. Data. treestore' ,{ //  Root Node  Root :{  //  Expand? Expanded: True  , Children :[  //  The leaf attribute indicates whether the node is the root node. If yes, you must specify {Text: "My tree 1", leaf: True  },  //  The child attribute indicates that there are subnodes under this node. {Text: "My tree 2", expanded: True  , Children: [{text: "My tree 2.1", leaf: True  }, {Text: "My tree 2.2", leaf: True  }]}, {Text: "My tree 3", leaf: True  }]}),  //  Show root node? Rootvisible: False  , Renderto: 'Mytree' });}); </SCRIPT>

Execution result:

2. Tree control with selection box:

Note: you only need to add the checked attribute to the node.

Example:

<SCRIPT type = "text/JavaScript"> Ext. onready (  Function  (){  //  Define tree components Ext. Create ('ext. Tree. Panel' , {Title: 'Simple tree components', Width: 200 ,  //  Data container Store: Ext. Create ('ext. Data. treestore' ,{  //  Root Node  Root :{  //  Expand? Expanded: True  , Children :[  // The leaf attribute indicates whether the node is the root node. If yes, you must specify                          //  Add the checked attribute to the node to implement the node with a selection box. {Text: "My tree 1", leaf: True , Checked: False  },  //  The child attribute indicates that there are subnodes under this node.                          //  Add the checked attribute to the node to implement the node with a selection box. {Text: "My tree 2", checked: False , Expanded: True , Children :[  //  Add the checked attribute to the node to implement the node with a selection box. {Text: "My tree 2.1", checked: False , Leaf: True  },  //  Add the checked attribute to the node to implement the node with a selection box. {Text: "My tree 2.2", checked: False , Leaf: True  }]}, //  Add the checked attribute to the node to implement the node with a selection box. {Text: "My tree 3", checked: True , Leaf: True  }]}), Listeners :{  //  When you click the root node, select all or no child nodes Checkchange: Function  (N, checked) {n. Cascade (  Function  (C) {C. Set ( "Checked", Checked )})}},  //  Show root node? Rootvisible: False  , Renderto: 'Mytree' });}); </SCRIPT>

Execution result: