EXTJS 4 tree table component example

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.