View Full Version : [1.1.1] new Ext.form field type - TreeField

15 Oct 2007, 2:33 AM
Hi, i needed to let users select a node from a tree (inside a form), so I created this TreeField field type.
It simply shows any TreePanel inside a form so that the user can select a single node.
I think it can be improved/polished a lot (and I'm new to Ext so I may have done something wrong), please give feedback!

The actual value of the field is the path of the selected node, in the form "/nodeID/.../nodeID", and it is hidden, so i decided it was better to implement an HiddenField class and then extend it.


* @class Ext.form.HiddenField
* @extends Ext.form.Field
* Single hidden field.
* @author Gerosa Riccardo
* @constructor
* Creates a new HiddenField
* @param {Object} config Configuration options
Ext.form.HiddenField = function(){
Ext.form.HiddenField.superclass.constructor.apply(this, arguments);
Ext.extend(Ext.form.HiddenField, Ext.form.Field, {
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "hidden" })
defaultAutoCreate : { tag: "input", type: 'hidden' },
inputType: 'hidden'


* @class Ext.form.TreeField
* @extends Ext.form.HiddenField
* A tree node selection field.
* @author Gerosa Riccardo
* @constructor
* Creates a new TreeField
* @param {Object} config Configuration options
Ext.form.TreeField = function(){
Ext.form.TreeField.superclass.constructor.apply(this, arguments);
Ext.extend(Ext.form.TreeField, Ext.form.HiddenField, {
* @cfg {String} focusClass The CSS class to use when the tree receives focus (defaults to undefined)
focusClass : undefined,
* @cfg {String} fieldClass The default CSS class for the tree (defaults to "x-form-field")
fieldClass: "x-form-field",
* @cfg {String} fieldClass The default CSS class for the tree container (defaults to "x-form-tree")
containerClass: "x-form-tree",

height: null,

rootNode: null,

// private
onRender : function(ct, position){

Ext.form.TreeField.superclass.onRender.call(this, ct, position);

var innerContentPanelDivID = Ext.id();

var innerTreePanelDivID = Ext.id();

var innerContentPanelDiv = this.el.insertSibling({
tag: 'div',
id: innerContentPanelDivID
}, 'after');
tag: 'div',
id: innerTreePanelDivID});

var contentPanel = new Ext.ContentPanel(innerContentPanelDivID, {
background: true,
autoScroll: true});

if (this.height) {

tree = new Ext.tree.TreePanel(innerTreePanelDivID, {
animate: true,
enableDD: false,
containerScroll: true,
rootVisible: true

if(this.rootNode) {


function onTreeNodeSelect(selectionModel, node) {
Ext.form.TreeField.superclass.setValue.call(this, node.getPath());

tree.getSelectionModel().on('selectionchange', onTreeNodeSelect);

var selectedNodePath = Ext.form.TreeField.superclass.getValue.call(this);

function onTreeNodeSelectCompleted(success, node) {
if (!success) {
window.alert('Node path not found [' + selectedNodePath);

tree.selectPath(selectedNodePath, 'id', onTreeNodeSelectCompleted);


setValue: function(value){
this.value = value;

getValue: function(){
return this.value;



.x-form-tree {
background: #FFFFFF url(lib/ext/resources/images/default/form/text-bg.gif) repeat-x;
border: 1px solid #B5B8C8;
padding: 1px 3px;

Here is an example on how to use this field:

var myTreeField = new Ext.form.TreeField({
fieldLabel: 'Tree node',
name: 'tree',
rootNode: myRootNode,
height: 90,

15 Oct 2007, 10:00 AM
Very nice work. The field should probably be a scrollbar's width narrower though so there's room for a failed validation icon. Speaking of validation, I don't see anything in there, are you just relying on what little hiddenField offers? I suspect this will only allow single-selection. Do you have plans to support multi-selection?

16 Oct 2007, 4:53 AM
Thanks for the reply: yes, I should implement validation, I haven't looked yet how it's implemented in Ext fields...
At the moment I don't plan supporting multiple selection cause I don't need it, but if someone wants to contribute on this feature i would appreciate it :)

22 Oct 2007, 1:53 AM
see this thread: http://extjs.com/forum/showthread.php?p=76368#post76368
i think treefield should be like combo.
but it's just for ext1.0

22 Oct 2007, 1:55 AM
TreeField should be added to Ext standard version.
'cos it is a very common component.

22 Oct 2007, 1:59 AM
I agree: I think too that it should be a standard component and implemented as a dropdown combobox

I'm sorry I don't have time to implement it better