[2.2] Tri-state tree/Tree with themed checkbox [NEW v1.2]

**jwignall** · 11 Feb 2009, 2:41 AM

Just FYI, you left a console line(212) in TreeCheckbox.js

console.log(this.getNodeTarget(e));

**jwignall** · 12 Feb 2009, 2:13 AM

I was just wondering why the AsynchTriStateNodeUI isn't the default behaviour in all cases?

I was puzzling for a while about why child checkboxes weren't checked when the parent is checked unless the parent had been expanded at least once. Is there a case where you would not want the child nodes to be toggled when a parent is toggled?

**Juel** · 16 Feb 2009, 4:17 AM

Hi,

I just detected a bug using the TriStateTree version 1.2..
By including the TreeCheckbox.js into a index.html - the on('click') and some other events don't fire anymore - even when using just a normal tree without TriState checkboxes.

This is related with my Post here:
Here's some example code:

applayout.js:

Code:

Ext.onReady(function(){

var data = [{ 
    //id:'a', 
    text:'A', 
    leaf:true 
    },{ 
    //id:'b', 
    text:'B', 
    leaf:true 
    }]; 
    
    var tree = new Ext.tree.TreePanel({
        width: 550,
        height: 300,
        rootVisible:false,
        autoScroll:true,
        title: 'TreeClickExample',
        renderTo: Ext.getBody(),

        loader: new Ext.tree.TreeLoader({
        }),

        root: new Ext.tree.AsyncTreeNode({
            children:data
        })
    });

    tree.on('click', function(n){
        alert('click');
    });
    //tree.on('dblclick', function(n){
    //    alert('dblclick');
    //});

});

index.html:

Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" media="screen">
    <link rel="stylesheet" type="text/css" href="stylesheets/TreeCheckbox.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="stylesheets/TriStateNodeUI.css" media="screen"  />
    <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-2.2/ext-all-debug.js"></script>
    <script type="text/javascript" src="javascripts/TreeCheckbox.js"></script>
    <script type="text/javascript" src="javascripts/TriStateNodeUI.js"></script>
    <script type="text/javascript" src="applayout.js"></script>
    <title>TreeExample</title>
</head>
<body>

</body>
</html>

By removing the line:

Code:

<script type="text/javascript" src="javascripts/TreeCheckbox.js"></script>

from index.html - the onclick event fires, but this is also browser specific:

With TreeCheckbox.js included, the on('click') seems to work in Firefox 2.0.0.18
but not in Opera 9.62 Konqueror 3.5.5, IE 6.0.3790.3959 and Firefox 3.
The on('dblclick') event seems to work in all five of them.

I attached a full example of my code including the latest ext - version here:

**NaveenMinchu** · 4 Mar 2009, 10:30 PM

We could see console.log() which is debuging script at line 212 of TreeCheckbox.js which is causing some problem in IE when we use listeners for TriStateCheckbox sampple page.

Do we require console.log() in TreeCheckbox.js ?

**Condor** · 4 Mar 2009, 10:37 PM

No, sorry, I left that line in by mistake. You can safely remove it.

**NaveenMinchu** · 8 Mar 2009, 3:43 AM

Hi,

Can we please know what can we expect from the widget in terms of pros (working) and cons(non-working) stuff of the current Tri-state widgets.

Between the this.emptyIcon in the renderElements function (At line 78) in the TreeCheckbox.js is pointing to "http://www.extjs.com/s.gif" which will obviously cause problems when the end-user using the widget is offline.

Excpeting your reply on pros and cons.

Appreciate your response.

Regards,
Naveen

**Condor** · 8 Mar 2009, 1:12 PM

Originally Posted by NaveenMinchu

Between the this.emptyIcon in the renderElements function (At line 78) in the TreeCheckbox.js is pointing to "http://www.extjs.com/s.gif" which will obviously cause problems when the end-user using the widget is offline.

Did you read the first item of the Ext JS FAQ?

**Raz0r** · 16 Mar 2009, 12:30 PM

Hi!
I've extended this plugin to display columns like in sample ColumnTree.
Everything is the same except the names: ColumnCheckboxTree for TreePanel, ColumnCheckboxNodeUI for TriStateNodeUI and AsynchColumnCheckboxNodeUI for AsynchTriStateNodeUI.
Greets!

**NaveenMinchu** · 24 Mar 2009, 10:01 PM

Hi,

Can you please let us know why even we are setting rootVisible:'false' is showing root on UI,
when we are using Tri-stateCheckBox tree with TreeLoader

It is important for us, please let us know.

Appreciate your help

Thanks & Regards,
Naveen

**aj3423** · 12 May 2009, 12:38 AM

Agree with starmage, in FireFox, drag a node then release mouse, it freezes the drag, I commented some code to fix that, it works.

Code:

 delegateUp : function(e, t) {
//  if(!this.beforeEvent(e)) {   // comment these 3 line
//   return;
//  }
  if(e.getTarget('.x-tree-checkbox', 1)) {
   this.onCheckboxUp(e, this.getNode(e));
  }
 },

Thread: [2.2] Tri-state tree/Tree with themed checkbox [NEW v1.2]

Thread Tools

Search Thread

Display

console.log()

Waht are expected pros and cons of the widget

ColumnCheckboxTree

rootVisible:'false'

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News