// Implementation class for created the tree powered form field
ListSelector = Ext.extend(Ext.ux.TreeSelector, {
        maxHeight:200,
        listenForLoad: false,
    initComponent : function(){
                
                this.tree = new Ext.tree.TreePanel({
                        animate:false,
                        border:false,
                        width: this.treeWidth || 180,
                        autoScroll:true,
                        useArrows:true,
                        selModel: new Ext.tree.ActivationModel(),
                        loader : new ListLoader({store: this.store})            
                });
                
                var root = new Ext.tree.AsyncTreeNode({
                text: 'All Lists',
                        id: 'root',
                        leaf: false,
                        iconCls: 'icon-folder',
                        expanded: true,
                        isFolder: true
            });
            this.tree.setRootNode(root);

        this.tree.on('render', function(){
            this.store.bindTree(this.tree);
        }, this);
                
        ListSelector.superclass.initComponent.call(this);
                
                // selecting folders is not allowed, so filter them
                this.tree.getSelectionModel().on('beforeselect', this.beforeSelection, this);
                
                // if being rendered before the store is loaded, reload when it is loaded
                if(this.listenForLoad) {
                        this.store.on('load', function(){
                                root.reload();
                        }, this, {
                                single: true
                        });
                }
    },
        
        beforeSelection : function(tree, node){
                if(node && node.attributes.isFolder){
                        node.toggle();
                        return false;
                }
        }
});