Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: TreeCombo not displaying properly in extjs 3.1.0

  1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    102

    Default TreeCombo not displaying properly in extjs 3.1.0

    Very nice user extension posted by Animal about treeCombo in Ext 2.x: Help forum.

    Located at


    treeCombo is a feature we need our project.

    So early morning I downloaded Extjs 3.1.0 and tried to use the extension

    Code:
    TreeCombo.js
    Code:
      Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {
    
        triggerClass: 'x-form-tree-trigger',
    
        initComponent : function(){
            this.readOnly = true;
            Ext.ux.TreeCombo.superclass.initComponent.call(this);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTriggerClick();
                }
            }, this);
            this.getTree();
        },
    
        onTriggerClick: function() {
            this.getTree().show();
            this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
        },
    
        getTree: function() {
            if (!this.treePanel) {
                if (!this.treeWidth) {
                    this.treeWidth = Math.max(200, this.width || 200);
                }
                if (!this.treeHeight) {
                    this.treeHeight = 200;
                }
                this.treePanel = new Ext.tree.TreePanel({
                    renderTo: Ext.getBody(),
                    loader: this.loader || new Ext.tree.TreeLoader({
                        preloadChildren: (typeof this.root == 'undefined'),
                        url: this.dataUrl || this.url
                    }),
                    root: this.root || new Ext.tree.AsyncTreeNode({children: this.children}),
                    rootVisible: (typeof this.rootVisible != 'undefined') ? this.rootVisible : (this.root ? true : false),
                    floating: true,
                    autoScroll: true,
                    minWidth: 200,
                    minHeight: 200,
                    width: this.treeWidth,
                    height: this.treeHeight,
                    listeners: {
                        hide: this.onTreeHide,
                        show: this.onTreeShow,
                        click: this.onTreeNodeClick,
                        scope: this
                    }
                });
                this.treePanel.show();
                this.treePanel.hide();
                this.relayEvents(this.treePanel.loader, ['beforeload', 'load', 'loadexception']);
                if(this.resizable){
                    this.resizer = new Ext.Resizable(this.treePanel.getEl(),  {
                       pinned:true, handles:'se'
                    });
                    this.mon(this.resizer, 'resize', function(r, w, h){
                        this.treePanel.setSize(w, h);
                    }, this);
                }
            }
            return this.treePanel;
        },
    
        onTreeShow: function() {
            Ext.getDoc().on('mousewheel', this.collapseIf, this);
            Ext.getDoc().on('mousedown', this.collapseIf, this);
        },
    
        onTreeHide: function() {
            Ext.getDoc().un('mousewheel', this.collapseIf, this);
            Ext.getDoc().un('mousedown', this.collapseIf, this);
        },
    
        collapseIf : function(e){
            if(!e.within(this.wrap) && !e.within(this.getTree().getEl())){
                this.collapse();
            }
        },
    
        collapse: function() {
            this.getTree().hide();
            this.resizer.resizeTo(this.treeWidth, this.treeHeight);
        },
    
        // private
        validateBlur : function(){
            return !this.treePanel || !this.treePanel.isVisible();
        },
    
        setValue: function(v) {
            this.startValue = this.value = v;
            if (this.treePanel) {
                var n = this.treePanel.getNodeById(v);
                if (n) {
                    this.setRawValue(n.text);
                }
            }
        },
    
        getValue: function() {
            return this.value;
        },
    
        onTreeNodeClick: function(node, e) {
            this.setRawValue(node.text);
            this.value = node.id;
            this.fireEvent('select', this, node);
            this.collapse();
        }
    });
    TreeCombo.html
    Code:
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Test</title>
     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     <link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />
     <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../../ext-all.js"></script>
    <script type="text/javascript" src="TreeCombo.js"></script>
    
    <script type="text/javascript">
    		 Ext.onReady(function() {
    			var p3 = new Ext.Panel({
    				title: 'TreeCombo',
    				renderTo: 'div1',
    				width:500,
    				tbar:[
    				{xtype:'textfield'},'-',
    				new Ext.ux.TreeCombo({
    					width: 100,
    					listWidth:220,
    					hiddenName:'nodeId',
    					hiddenValue:'n2',
    					lazyInit:false,
    					readOnly: 'true',
    					treeConfig: {
    						rootVisible:false,
    						height: 210,
    						autoScroll:true,
    						root: new Ext.tree.AsyncTreeNode({
    							text: 'rt',
    							children: [
    								{id: 'n1', text: 'Node 1', leaf: true},
    								{id: 'n2', text: 'Node 2', leaf: true},
    								{id: 'n3', text: 'Node 3', leaf: true},
    								{id: 'n4', text: 'Node 4', leaf: true},
    								{id: 'n5', text: 'Node 5', leaf: true},
    								{id: 'n6', text: 'Node 6', leaf: true},
    								{id: 'n7', text: 'Node 7', leaf: true},
    								{id: 'n8', text: 'Node 8', leaf: true},
    								{id: 'n9', text: 'Node 9', leaf: true}
    							]
    					  }),
    					 loader: new Ext.tree.TreeLoader()
    				}
    				}),
    				'-',{xtype:'textfield'}
    				]
    			});
    		});
    </script>
    </head>
    <body>
    <div id="div1"></div>
    </body>
    </html>
    Now if I copy same files(TreeCombo.html and TreeCombo.js) in ext-2.3.0\examples\form then tree combo works properly.
    How can we migrate the same to extjs 3.1.0


    Thanks

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You would need to update that extension for Ext 3.1 (or you could ask Animal).

    ps. Ext 3.1 already contains a Ext.ux.TreeSelector component (it's included in the separate Ext.Air download).

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    102

    Default

    Is there anyone using compatable( for Ext 3.1) version of Animal's treeCombo extension?

    I believe Animal can help.


    Thanks a lot.

  4. #4
    Sencha User
    Join Date
    Dec 2009
    Posts
    2

    Default

    Remove the line "this.readOnly = true;" under initComponent function to get this to work in ExtJS 3.1.0

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    53

    Default

    Quote Originally Posted by vanchuck View Post
    Remove the line "this.readOnly = true;" under initComponent function to get this to work in ExtJS 3.1.0
    I did this:

    Code:
        if (Ext.version >= '3.0')
                this.editable = false;
            else
                this.readOnly = true;

  6. #6

    Default

    does the example above work, the list box appears empty

  7. #7

    Default JSON and Ext 3.1.1

    Code:
    /*
    * Sample json load code :
    * Ext.getCmp('<combotree>').loadTree(url,params) 
    * url : '../..../....Action.do?islem=giris '
    * params : {'itemId':Ext.getCmp('item').getValue()}
    *
     * Animal's TreeCombo modified by Wedgie to handle a maxHeight config setting.
     * This updated version fixes the following problems:
     *   1) Accounts for horizontal scrollbar when calculating required height
     *   2) Set height using correct method to fire resize and update the shadow
     *   3) Realigns the tree with the trigger field when the tree size changes
     */
    
    Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {
    
        triggerClass: 'x-form-tree-trigger',
    
        initComponent : function(){
            this.editable = false;
            Ext.ux.TreeCombo.superclass.initComponent.call(this);
            this.on('specialkey', function(f, e){
                if(e.getKey() == e.ENTER){
                    this.onTriggerClick();
                }
            }, this);
            this.getTree();
        },
    
        onTriggerClick: function() {
            this.getTree().show();
            this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
        },
    
        getTree: function() {
            if (!this.treePanel) {
                if (!this.treeWidth) {
                    this.treeWidth = Math.max(200, this.width || 200);
                }
                if (!this.treeHeight) {
                    this.treeHeight = 200;
                }
                this.treePanel = new Ext.tree.TreePanel({
                    renderTo: Ext.getBody(),
                    loader: this.loader || new Ext.tree.TreeLoader({
                        preloadChildren: (typeof this.root == 'undefined'),
                        url: this.dataUrl || this.url
                    }),
                    root: this.root || new Ext.tree.AsyncTreeNode({
                        text : 'tepe'
                        
                    }),
                    rootVisible: (typeof this.rootVisible != 'undefined') ? this.rootVisible : (this.root ? true : false),
                    floating: true,
                    autoScroll: true,
                    minWidth: 200,
                    minHeight: 200,
                    width: this.treeWidth,
                    height: this.treeHeight,
                    listeners: {
                        hide: this.onTreeHide,
                        show: this.onTreeShow,
                        click: this.onTreeNodeClick,
                        expandnode: this.onExpandOrCollapseNode,
                        collapsenode: this.onExpandOrCollapseNode,
                        resize: this.onTreeResize,
                        scope: this
                    }
                });
                this.treePanel.show();
                this.treePanel.hide();
                this.relayEvents(this.treePanel.loader, ['beforeload', 'load', 'loadexception']);
                if(this.resizable){
                    this.resizer = new Ext.Resizable(this.treePanel.getEl(),  {
                       pinned:true, handles:'se'
                    });
                    this.mon(this.resizer, 'resize', function(r, w, h){
                        this.treePanel.setSize(w, h);
                    }, this);
                }
            }
            return this.treePanel;
        },
    
        onExpandOrCollapseNode: function() {
            if (!this.maxHeight || this.resizable)
                return;  // -----------------------------> RETURN
            var treeEl = this.treePanel.getTreeEl();
            var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
            var ulEl = treeEl.child('ul');  // Get the underlying tree element
            var heightRequired = ulEl.getHeight() + heightPadding;
            if (heightRequired > this.maxHeight)
                heightRequired = this.maxHeight;
            this.treePanel.setHeight(heightRequired);
        },
    
        onTreeResize: function() {
            if (this.treePanel)
                this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
        },
    
        onTreeShow: function() {
            Ext.getDoc().on('mousewheel', this.collapseIf, this);
            Ext.getDoc().on('mousedown', this.collapseIf, this);
        },
    
        onTreeHide: function() {
            Ext.getDoc().un('mousewheel', this.collapseIf, this);
            Ext.getDoc().un('mousedown', this.collapseIf, this);
        },
    
        collapseIf : function(e){
            if(!e.within(this.wrap) && !e.within(this.getTree().getEl())){
                this.collapse();
            }
        },
    
        collapse: function() {
            this.getTree().hide();
            if (this.resizer)
                this.resizer.resizeTo(this.treeWidth, this.treeHeight);
        },
    
        // private
        validateBlur : function(){
            return !this.treePanel || !this.treePanel.isVisible();
        },
    
        setValue: function(v) {
            this.startValue = this.value = v;
            if (this.treePanel) {
                var n = this.treePanel.getNodeById(v);
                if (n) {
                    this.setRawValue(n.text);
                }
            }
        },
    
        getValue: function() {
            return this.value;
        },
    
        onTreeNodeClick: function(node, e) {
            this.setRawValue(node.text);
            this.value = node.id;
            this.fireEvent('select', this, node);
            this.collapse();
        },
        loadTree : function(url,pr) {
            var tp = this.treePanel;
            tp.getRootNode().removeAll();
            var conn = new Ext.data.Connection();
            conn.request({url: url || this.url,
                        params:pr||{}, 
                success: function(a){
                    var tb_items = Ext.util.JSON.decode(a.responseText);    
                    tp.getRootNode().appendChild(tb_items);
                }    
            });
        }
    });
    Ext.reg('treecombo', Ext.ux.TreeCombo);

  8. #8

    Default

    this is still showing an empty list box

  9. #9

    Default

    Use this code

    Ext.getCmp('<combotreeId>').loadTree(url,params)

    must retun JSON objects.

    Quote Originally Posted by wp.joju View Post
    this is still showing an empty list box

  10. #10

    Default

    will this work if the url just points to a text file with json text? since i'm trying to use this in a windows app


    as of now, this is the way i code it

    Code:
    var directorytreejson = window.external.GetDirectoryTree();
    
    var root = new Ext.tree.TreeNode({
            text: 'root',
            draggable:false,
            id:'source',
            children: Ext.decode(directorytreejson)
        });
    
    var comboxWithTree2 = new Ext.ux.TreeCombo({
                          region:'south',
                          showTrigger: true,
                        width: 100,
                        hiddenName:'nodeId',
                        hiddenValue:'n2',
                        lazyInit:false,
                        editable: false,
                        treeConfig: {
                            rootVisible:false,
                            height: 210,
                            autoScroll:true,
                            root: root,
                            loader: new Ext.tree.TreeLoader()
                        }
                    });

Page 1 of 2 12 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
  •