Page 1 of 6 123 ... LastLast
Results 1 to 10 of 59

Thread: Tree in a Combo.

  1. #1
    Sencha User
    Join Date
    Feb 2008
    Location
    Curitiba - PR - Brasil
    Posts
    114

    Default Tree in a Combo.

    Please, is there a way of creating a combo which shows a tree of options?

    Thanks in advance.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Yes, you will create a subclass of TriggerField, and your onTriggerClick will display a TreePanel configured with float:true aligned to the input.

  3. #3

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Quick and easy:

    Code:
    Ext.TreeCombo = Ext.extend(Ext.form.ComboBox, {
    	initList: function() {
    		this.list = new Ext.tree.TreePanel({
    			root: new Ext.tree.AsyncTreeNode({
    				text: 'root',
    				children: [{text: 'Child 1', leaf: true}, {text: 'Child 2', leaf: true}]
    			}),
    			loader: new Ext.tree.TreeLoader(),
    			floating: true,
    			autoHeight: true,
    			listeners: {
    				click: this.onNodeClick,
    				scope: this
    			},
    			alignTo: function(el, pos) {
    				this.setPagePosition(this.el.getAlignToXY(el, pos));
    			}
    		});
    	},
    
    	expand: function() {
    		if (!this.list.rendered) {
    			this.list.render(document.body);
    			this.list.setWidth(this.el.getWidth());
    			this.innerList = this.list.body;
    			this.list.hide();
    		}
    		this.el.focus();
    		Ext.TreeCombo.superclass.expand.apply(this, arguments);
    	},
    
    	doQuery: function(q, forceAll) {
    		this.expand();
    	},
    
        collapseIf : function(e){
            if(!e.within(this.wrap) && !e.within(this.list.el)){
                this.collapse();
            }
        },
    
    	onNodeClick: function(node, e) {
    		this.setRawValue(node.attributes.text);
    		if (this.hiddenField) {
    			this.hiddenField.value = node.id;
    		}
    		this.collapse();
    	}
    });
    Ext.reg('treecombo', Ext.TreeCombo);

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Location
    Curitiba - PR - Brasil
    Posts
    114

    Default

    Thank you Animal.

    It works well.

    So, I

  6. #6

    Default just what i needed

    He Animal,

    Your solution was just what I needed to get going with a widget for selecting multiple items from different categories, which I needed badly. Thank you very much for your quick and easy code example.

    I hacked together a simple example of what I'm aiming at, and this example is online at:

    http://edwin.headspingames.com/extsh...treecombo.html

    The only thing I would like to have is a way to do 'select all / unselect all' at the nodes that are not leaf nodes. For now I only have some ideas on how to achieve that:
    a) render the 'checkbox' for non-leaf nodes in a custom way
    b) a right click menu for non-leaf nodes
    b) something akin to Saki's rowactions (although then the TreePanel may need to be a columnTree)

    Right now I am passing an icon with the data, which is just a hack to remove the default labels for TreeNodeUI. I'd be happy to have no images at all there, but I saw no quick and easy way to do that. I gather I have to write a 'CheckboxTreeNodeUI' that by default displayes checkboxes and no further icons, somewhat like:
    http://extjs.com/forum/archive/index.php/t-6607.html

    Maybe other people find the LovTreeCombo I am creating on top of Animals code snippet of interest, and hopefully they have suggestions on how to improve it (so that it becomes less of a hack).

    All the best

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    [QUOTE=joao_candido;182607]Thank you Animal.

    It works well.

    So, I

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Quote Originally Posted by ecommand View Post
    He Animal,

    Your solution was just what I needed to get going with a widget for selecting multiple items from different categories, which I needed badly. Thank you very much for your quick and easy code example.

    I hacked together a simple example of what I'm aiming at, and this example is online at:

    http://edwin.headspingames.com/extsh...treecombo.html
    Nice one! Well done on getting stuck into hacking a new widget!

    Just a hint: If you are having the TreePanel autoHeight:true as opposed to a fixed height with autoScroll:true, then you need to call syncShadow on the TreePanel when it expands or contracts.

  9. #9

    Default thanks for the hint

    Hi Animal,

    I already noticed the shadow trails when the bottom node is expanded and collapsed, and in the back of my mind I was thinking about trying a call to doLayout(), but syncShadow sounds like a better option.

    Thanks for the hint and I for the encouraging words. I will do my best at improving the LovTreeCombo and will try to update my online example soon.

    By the way, thumbs up for all the fantastic work you're doing, coding and helping out.

  10. #10
    Sencha User
    Join Date
    Feb 2008
    Location
    Curitiba - PR - Brasil
    Posts
    114

    Default Another question.

    Animal, I

Page 1 of 6 123 ... LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •