EXTJS 4 tree table component example

EXTJS 4 tree table component example

EXTJS 4 tree table component example I. Overall

Ii. Instructions and 2.1 program code and description:2.1.1. Table store Code Description

// Enable 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 });

Attribute	Description
Root	Ext. data. Model/Ext. data. NodeInterface/Object Root Node. This attribute is used to specify data when store is used for static data. If you need to Dynamically Retrieve data from the server, you can use the proxy attribute. For more information about proxy attributes, see extjs APIs.
FolderSort	Boolean is false by default. When set to true, leaf nodes are always behind non-leaf nodes.

For details about treeGridData, see http://download.csdn.net/detail/shui878412/7994009

2.1.2 Tree node MODEL description

In TreeStore, an Ext. data. nodeInterface indicates the number of nodes. In the setRootNode method of TreeStore, The decorate method of NodeInterface is called to add some attributes to the model of TreeStore. These attributes must be used when the tree is displayed. for details about these attributes, see:

Name	Type	Default Value	Description
ParentId	IdType	Null	Parent node ID. the type of the ID in the model is calculated.
Index	Int	Null	Can be used for sorting
Depth	Int	0
Expanded	Bool	False	Expand?
Expandable	Bool	False	Expand or not
Checked	Auto	Null
Leaf	Bool	False
Cls	String	Null	Style
IconCls	String	Null	Icon Style
Icon	String	Null	Icon path
Root	Boolean	False	Root Node or not
IsLast	Boolean	False
IsFirst	Boolean	False
AllowDrop	Boolean	True	Can be deleted?
AllowDrag	Boolean	True	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	Subnode, which is generally an array

You can set these attributes as needed to achieve the desired results. For example, you can set images in the tree node by specifying the icon/iconcls value in store.

2.1.3. Code Description for table display

Var tree = Ext. create ('ext. tree. panel ', {title: 'ext tree 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: 'partname', flex: 1, dataIndex: 'partname'}, {text: 'version', width: 70, dataIndex: 'partver '}]});

Attribute	Description
UseArrows	Boolean is false by default. If the value is true, the arrow () style is used. If the value is false, the plus sign () style is used.
RootVisible	Boolean is true by default. Show root node?
MultiSelect	Boolean is false by default. Can multiple rows be selected?

For detailed code, see

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