Ext JS 4.0.7 Sencha Docs Contents 1. The Node Interface ... - Glarimy

bookmarkalikeInternet και Εφαρμογές Web

14 Δεκ 2013 (πριν από 3 χρόνια και 9 μήνες)

443 εμφανίσεις

4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
1/7
Ext JS 4.0.7
Sencha Docs
Contents
1
.
The Node Interface
2
.
Visually changing your tree
3
.
Multiple columns
4
.
Adding nodes to the tree
Trees
The
Tree Panel
Component is one of the most versatile
Components in Ext JS and is an excellent tool for
displaying heirarchical data in an application.
Tree Panel
extends from the same class as
Grid Panel
, so all of the
benefits of Grid Panels - features, extensions, and plugins
can also be used on Tree Panels. Things like columns,
column resizing, dragging and dropping, renderers,
sorting and filtering can be expected to work similarly for
both components.
Let's start by creating a very simple Tree.
Ext
.
cr eat e
(
'
Ext.t r ee.Panel
'
,

{
r ender To
:

Ext
.
get Body
( ),
t i t l e
:

'Si mpl e Tr ee'
,
wi dt h
:

150
,
hei ght
:

150
,
r oot
:

{
t ext
:

'Root'
,
expanded
:

t r ue
,
chi l dr en
:

[

{
t ext
:

'Chi l d 1'
,
l eaf
:

t r ue

},

{
t ext
:

'Chi l d 2'
,
l eaf
:

t r ue

},

{
t ext
:

'Chi l d 3'
,
expanded
:

t r ue
,
chi l dr en
:

[

{
t ext
:

'Gr andchi l d'
,
l eaf
:

t r ue

}

]

}

]

}
});
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
2/7
This Tree Panel renders itself to the document body.
We defined a root node that is expanded by
default. The root node has three children, the first two of which are leaf nodes which means they
cannot have any children.
The third node is not a leaf node and has has one child leaf node.
The
t ext
property is used as the node's text label. See
Simple Tree
for a live demo.
Internally a Tree Panel stores its data in a
TreeStore
. The above example uses the
root
config as a
shortcut for configuring a store.
If we were to configure the store separately, the code would look
something like this:
var
st or e
=

Ext
.
cr eat e
(
'
Ext.dat a.Tr eeSt or e
'
,

{
r oot
:

{
t ext
:

'Root'
,
expanded
:

t r ue
,
chi l dr en
:

[

{
t ext
:

'Chi l d 1'
,
l eaf
:

t r ue

},

{
t ext
:

'Chi l d 2'
,
l eaf
:

t r ue

},

...

]

}
});
Ext
.
cr eat e
(
'
Ext.t r ee.Panel
'
,

{
t i t l e
:

'Si mpl e Tr ee'
,
st or e
:
st or e
,

...
});
For more on
Store
s see the
Data Guide
.
The Node Interface
In the above examples we set a couple of different properties on tree nodes. But what are nodes
exactly? As mentioned before, the Tree Panel is bound to a
TreeStore
. A Store in Ext JS manages a
collection of
Model
instances. Tree nodes are simply Model instances that are decorated with a
NodeInterface
.
Decorating a Model with a NodeInterface gives the Model the fields, methods and
properties that are required for it to be used in a tree.
The following is a screenshot that shows the
structure of a node in the developer tools.
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
3/7
In order to see the full set of fields, methods and properties available on nodes, see the API
documentation for the
NodeInterface
class.
Visually changing your tree
Let's try something simple. When you set the
useArrows
configuration to true, the Tree Panel hides the
lines and uses arrows as expand and collapse icons.
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
4/7
Setting the
rootVisible
property to false visually removes the root node. By doing this, the root node will
automatically be expanded. The following image shows the same tree with
r oot Vi si bl e
set to false
and
lines
set to false.
Multiple columns
Since
Tree Panel
extends from the same base class as
Grid Panel
adding more columns is very easy to
do.
var
t r ee
=

Ext
.
cr eat e
(
'
Ext.t r ee.Panel
'
,

{
r ender To
:

Ext
.
get Body
( ),
t i t l e
:

'Tr eeGr i d'
,
wi dt h
:

300
,
hei ght
:

150
,
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
5/7
f i el ds
:

[
'name'
,

'descr i pt i on'
],
col umns
:

[ {
xt ype
:

't r eecol umn'
,
t ext
:

'Name'
,
dat aI ndex
:

'name'
,
wi dt h
:

150
,
sor t abl e
:

t r ue

},

{
t ext
:

'Descr i pt i on'
,
dat aI ndex
:

'descr i pt i on'
,
f l ex
:

1
,
sor t abl e
:

t r ue

}],
r oot
:

{
name
:

'Root'
,
descr i pt i on
:

'Root descr i pt i on'
,
expanded
:

t r ue
,
chi l dr en
:

[ {
name
:

'Chi l d 1'
,
descr i pt i on
:

'Descr i pt i on 1'
,
l eaf
:

t r ue

},

{
name
:

'Chi l d 2'
,
descr i pt i on
:

'Descr i pt i on 2'
,
l eaf
:

t r ue

}]

}
});
The
columns
configuration expects an array of
Ext.grid.column.Column
configurations just like a
Grid
Panel
would have.
The only difference is that a Tree Panel requires at least one column with an xtype
of 'treecolumn'.
This type of column has tree-specific visual effects like depth, lines and expand and
collapse icons. A typical Tree Panel would have only one 'treecolumn'.
The
f i el ds
configuration is passed on to the Model that the internally created Store uses (See the
Data Guide
for more information on
Model
s). Notice how the
dataIndex
configurations on the columns
map to the fields we specified - name and description.
It is also worth noting that when columns are not defined, the tree will automatically create one single
t r eecol umn
with a
dat aI ndex
set to 'text'. It also hides the headers on the tree. To show this header
when using only a single column set the
hi deHeader s
configuration to 'false'.
Adding nodes to the tree
The root node for the Tree Panel does not have to be specified in the initial configuration.
We can
always add it later:
var
t r ee
=

Ext
.
cr eat e
(
'
Ext.t r ee.Panel
'
);
t r ee
.
set Root Node
( {
t ext
:

'Root'
,
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
6/7
expanded
:

t r ue
,
chi l dr en
:

[ {
t ext
:

'Chi l d 1'
,
l eaf
:

t r ue

},

{
t ext
:

'Chi l d 2'
,
l eaf
:

t r ue

}]
});
Although this is useful for very small trees with only a few static nodes, most Tree Panels will contain
many more nodes. So let's take a look at how we can programmatically add new nodes to the tree.
var
r oot
=
t r ee
.
get Root Node
( );
var
par ent
=
r oot
.
appendChi l d
( {
t ext
:

'Par ent 1'
});
par ent
.
appendChi l d
( {
t ext
:

'Chi l d 3'
,
l eaf
:

t r ue
});
par ent
.
expand
( );
Every node that is not a leaf node has an
appendChild
method which accepts a Node, or a config
object for a Node as its first parameter, and returns the Node that was appended. The above example
also calls the
expand
method to expand the newly created parent.
Also useful is the ability to define children inline when creating the new parent nodes. The following
code gives us the same result.
var
par ent
=
r oot
.
appendChi l d
( {
t ext
:

'Par ent 1'
,
expanded
:

t r ue
,
chi l dr en
:

[ {
t ext
:

'Chi l d 3'
,
l eaf
:

t r ue

}]
4/5/13
Trees - Ext JS 4.0.7 - Sencha Docs
docs.sencha.com/ext-js/4-0/?print=/guide/tree
7/7
});
Sometimes we want to insert a node into a specific location in the tree instead of appending it. Besides
the
appendChi l d
method,
Ext.data.NodeInterface
also provides
insertBefore
and
insertChild
methods.
var
chi l d
=
par ent
.
i nser t Chi l d
(
0
,

{
t ext
:

'Chi l d 2.5'
,
l eaf
:

t r ue
});
par ent
.
i nser t Bef or e
( {
t ext
:

'Chi l d 2.75'
,
l eaf
:

t r ue
},
chi l d
.
next Si bl i ng
);
The
i nser t Chi l d
method expects an index at which the child will be inserted. The
i nser t Bef or e
method expects a reference node. The new node will be inserted before the reference node.
NodeInterface also provides several more properties on nodes that can be used to reference other
nodes.
nextSibling
previousSibling
parentNode
lastChild
firstChild
childNodes