ExtJS 4 Tree Table component Use example

ExtJS 4 Tree Table component Use example first, the whole

second, the use of instructions and 2.1. Program code and Description:Code description for 2.1.1, table storage section

Turn on the ToolTip tool    Ext.QuickTips.init ();    Define Model    ext.define (' Partmodel ', {        extend: ' Ext.data.Model ', fields        : [            {name: ' PartNo ',   type: ' String '},            {name: ' PartName ', type: ' String '},            {name: ' Partver ',  type: ' String '}        ]    });    Create a treestore    var store = ext.create (' Ext.data.TreeStore ', {        model: ' Partmodel ',        root:treegriddata ,//static tree data defined in other files         foldersort:true    });

Properties	Description
Root	Ext.data.model/ext.data.nodeinterface/object The root node that is used to specify data when using store is static data. If you need to get from the server dynamically, you can use the Proxy property Use of the proxy attribute can be found in the ExtJS official API
Foldersort	Boolean defaults to False When set to true, leaf nodes are always behind non-leaf nodes.

Treegriddata for details, see http://download.csdn.net/detail/shui878412/7994009

2.1.2, tree node model description

A Ext.data.NodeInterface is used in Treestore to represent the nodes of a number; In the Setrootnode method of Treestore, Nodeinterface's decorate method is called to add properties to the Treestore model that must be used when the tree is displayed. These properties are described below:

name	type	Default Value	Description
ParentID	Idtype	Null	Parent Node ID, calculated type of ID in model
Index	Int	Null	can be used for sorting
Depth	Int	0
Expanded	bool	False	Whether to expand
Expandable	bool	False	Whether you can expand
Checked	Auto	Null
Leaf	bool	False
Cls	String	Null	Style
Iconcls	String	Null	Icon Style
Icon	String	Null	Icon Path
Root	Boolean	False	is the root node
Islast	Boolean	False
IsFirst	Boolean	False
AllowDrop	Boolean	True	Whether it can be deleted
Allowdrag	Boolean	True	Whether it can be dragged
Loaded	Boolean	False
Loading	Boolean	False
Href	String	Null
Hreftarget	String	Null
Qtip	String	Null	tooltip content
Qtitle	String	Null	ToolTip title
Children	Auto	Null	A child node, typically an array

You can set these properties when you need them to achieve the results we want. You can set the picture in the tree node by specifying the value of ICON/ICONCLS in the store.

Code description for 2.1.3, table display section

var tree = ext.create (' Ext.tree.Panel ', {    title: ' Ext ' table use example ',    width:400,    height:300,    renderto: ' Treegriddiv ',    usearrows:true,    rootvisible:false,    store:store,    multiselect:true,    defaults:{        Sortable:true    },    columns: [{        xtype: ' Treecolumn ',        text: ' Part number ',        flex:2,        dataindex: ' PartNo '    },{        text: ' Part name ',        flex:1,        dataindex: ' partname '    },{        text: ' Version ',        width: (        dataindex: ' Partver '    }]});

Properties	Description
Usearrows	Boolean defaults to False True when using the arrow () style, false is using the plus () style
Rootvisible	Boolean default is True Whether to display the root node
MultiSelect	Boolean defaults to False Whether multiple rows can be selected

Detailed code See

http://download.csdn.net/detail/shui878412/7994009

ExtJS 4 Tree Table component Use example