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
    Vote Rating
    0
      0  

    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,246
    Vote Rating
    133
      0  

    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
    Vote Rating
    0
      0  

    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
    Vote Rating
    0
      0  

    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
    Vote Rating
    0
      0  

    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
    Ext User
    Join Date
    Oct 2008
    Posts
    127
    Vote Rating
    2
      0  

    Default

    does the example above work, the list box appears empty

  7. #7
    Sencha User
    Join Date
    Jul 2008
    Posts
    34
    Vote Rating
    0
      0  

    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
    Ext User
    Join Date
    Oct 2008
    Posts
    127
    Vote Rating
    2
      0  

    Default

    this is still showing an empty list box

  9. #9
    Sencha User
    Join Date
    Jul 2008
    Posts
    34
    Vote Rating
    0
      0  

    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
    Ext User
    Join Date
    Oct 2008
    Posts
    127
    Vote Rating
    2
      0  

    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
  •