View Full Version : Create custom view and selection model

6 Mar 2012, 10:51 AM

I have written a Ext class which inherits form Ext.Component and renders a tree (a html table) within the initComponent function. A TreeStore is used as data provider. The created html is assigned to the html config property. This works fine, but I'm totally unsure what I have to do to get this tree editable, e.g.

to navigate through the tree via the cursor
select a single element and provide a node sensitive context menu
provide drag and drop support
select and scroll to a single node via a given id (selectNode(id))
expand and collapse the tree (no animations required)
rerendere a single node if only the content of the node has changed (replace the cell will a newly rendered cell).

The created html provides an id attribute for each node which corresponds to the id used in the store. It also provides a unique class for tree nodes. Also the expand/collapse icons provides an id of the node which should be expanded/collapsed (id of the record + a postfix).

I have seen that the default tree component as well as the table component uses a View and a Selection Model for this kind of work, but I have no idea how to realize them and especially how they work together. For example which component is responsible for the initial rendering, the TreeView or the TreePanel because the TreeView also provides such an html config property? When I click into a tree node cell or naviagte via the cursors to the cell how to update the selection model? How to determine which navigation via the cursor is possible, e.g pressing the up button navigates to the parent node (other column index).

Are there any tutorials, examples or something like this?

Any kind of help is welcome.

Kind regards

6 Mar 2012, 11:37 AM
Why not just use the TreePanel without so much customized code?

6 Mar 2012, 12:01 PM
Because it's just not a simple icon and text per node. Nodes must be rendered in a special structure and for example could contain own editable elements. I render it completly different like the first child node is rendered in the same row as the parent. Also each node type (actually there are 12 different node types) must be rendered differently, provide special menues and bahaviours. The rendering works fine but I have currently no idea how to realize the select and editing part.

Kind regards