1. #31
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I created a new version 1.1 that contains all the previous fixes and updates:

    - Removed CSS margin
    - Added getChecked method to return correct checked state, even with AsynchTriStateNodeUI.
    - Changed TriStateNodeUI to do a real check cascade and moved the original virtual cascading code to AsynchTriStateNodeUI, to be used when a real cascade is to slow (large tree) or impossible (asynchronous node loading).

  2. #32
    Sencha User
    Join Date
    Aug 2008
    Location
    Gothenburg
    Posts
    157
    Vote Rating
    2
    Dr. Flink is on a distinguished road

      0  

    Default


    I'm having some problems loading tree from server, but when I'm using the example data object, everything is working as it is supposed.

    Code:
    Ewa.Statistics = function() {
        // Test data from example.html
        var data = [{
            text:'ColumnTree Example',
            checked:null,
            expanded:true,
            children:[{
                ...
                ...
            }]
        }];
    
        var heatDs = new Ext.tree.TreeLoader({
            url: '/member/statistics/heatTree',
            preloadChildren:true,
            baseAttrs:{
                uiProvider: Ext.tree.TriStateNodeUI
            },
            listeners: {
                beforeload: function(store, node, callback) {
                    this.baseParams.depth = node.getDepth();
                }
            }
        });
    
        var heatRoot = new Ext.tree.TreeNode({
            text: 'Fastigheter',
            id: '0'
            //children: data
        });
    
        var heatPanel = new Ext.Panel({
            title: 'Statistik',
            iconCls: 'iconStatistics',
            layout:'border',
            items: [
                {
                    title: 'Fastigheter',
                    region:'west',
                    border: false,
                    width: 300,
                    layout: 'fit',
                    items: {
                        xtype: 'treepanel',
                        useArrows:true,
                        border: false,
                        rootVisible: false,
                        autoScroll: true,
                        root: heatRoot
                    }
                },
                {
                    ...
                }
            ]
        });
    
        return {
            activate: function() {
                heatDs.load(heatRoot);
            }
        }
    }();
    If I uncomment the "children: data" -line the example data object is loaded instead and the check/uncheck is acting as it should. But, when commented and the server data is loaded, the check/uncheck is messed up. Hope someone understands my problem and knows what I'm missing.

    // Rickard

    Update:
    Am I supposed to use the children-attribute somehow?

  3. #33
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Your treepanel is missing the loader config option (loader: heatDs).

  4. #34
    Sencha User
    Join Date
    Aug 2008
    Location
    Gothenburg
    Posts
    157
    Vote Rating
    2
    Dr. Flink is on a distinguished road

      0  

    Default


    Thanks for answering!

    I added loader: heatDs, but the problem stays the same...

    Some of the problems I have:
    Checking a parent checkbox selects the children but the parent it self is not checked.
    Unchecking one of the children unchecks all.
    Cant check a single child if it has siblings.

    Code:
        var heatPanel = new Ext.Panel({
            title: 'Statistik',
            iconCls: 'iconStatistics',
            layout:'border',
            items: [
                {
                    title: 'Fastigheter',
                    region:'west',
                    border: false,
                    width: 300,
                    layout: 'fit',
                    items: {
                        xtype: 'treepanel',
                        useArrows:true,
                        border: false,
                        rootVisible: false,
                        autoScroll: true,
                        root: heatRoot,
                        loader: heatDs
                    }
                },
                {
                    ...
                }
            ]
        });

  5. #35
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I don't have any problems using the example with:
    Code:
    Ext.onReady(function(){
    	new Ext.Viewport({
    		layout:'fit',
    		items:[{
    			xtype: 'treepanel',
    			title: 'Tree checkbox test',
    			rootVisible: false,
    			autoScroll: true,
    			root: new Ext.tree.AsyncTreeNode(),
    			loader: new Ext.tree.TreeLoader({
    				url: 'tree.json',
    				preloadChildren:true,
    				baseAttrs:{
    					uiProvider: Ext.tree.TriStateNodeUI
    				}
    			})
    		}]
    	});
    });
    (where tree.json contains the content of the data variable)

  6. #36
    Sencha User
    Join Date
    Aug 2008
    Location
    Gothenburg
    Posts
    157
    Vote Rating
    2
    Dr. Flink is on a distinguished road

      0  

    Default


    Yes, when I return this from the server:
    Code:
    $nodes[0]['text'] = 'Foo';
    $nodes[0]['checked'] = null;
    $nodes[0]['expanded'] = true;
    $nodes[0]['children'][0] = array(
        'text'=>'Child of foo 1',
        'checked'=>true,
        'leaf'=>true
    );
    $nodes[0]['children'][1] = array(
        'text'=>'Child of foo 2',
        'checked'=>true,
        'leaf'=>true
    );
    
    $json = Zend_Json::encode($nodes);
    $this->getResponse()->setBody($json);
    ...it works fine. I think it's the "children"-option that makes it work.

    Do I have to return all the nodes from start? I only want to load the children when necessary.
    Now I return the following from the server:
    Code:
    [
        {"id":"category_7","text":"Category 7","leaf":false,"expanded":false},
        {"id":"category_8","text":"Category 8":false,"expanded":false}
    ]
    Expanding Category 8 makes the server return all that categorys customers:
    Code:
    [
        {"id":"customer_96","text":"Customer 96","leaf":false,"checked":false,"disabled":false,"expanded":false}
    ]
    And, finaly, expanding Customer 96 will return that customers premises:
    Code:
    [
        {"id":"premises_90","text":"Premises 90","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"},
        {"id":"premises_91","text":"Premises 91","leaf":true,"checked":false,"expanded":false ,"iconCls":"iconPremises"},
        {"id":"premises_92","text":"Premises 92","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"},
        {"id":"premises_93","text":"Premises 93","leaf":true,"checked":false,"expanded":false,"iconCls":"iconPremises"}
    ]
    I'm not using the chidren attribute anywhere, is this the reason why its not working?

  7. #37
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You should at least remove the preloadChildren:true config option in that case.

  8. #38
    Sencha User
    Join Date
    Aug 2008
    Location
    Gothenburg
    Posts
    157
    Vote Rating
    2
    Dr. Flink is on a distinguished road

      0  

    Default


    Yes, I allready tried setting it to false and removing it. Sorry for not mentioning.
    But it seem to make no difference...

  9. #39
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    What exactly is the problem?

    When you check the customer and then expand it, it shows the premises as unchecked?

    For that you should modify the beforeload handler, e.g.
    Code:
    var heatDs = new Ext.tree.TreeLoader({
        url: '/member/statistics/heatTree',
        baseAttrs:{
            uiProvider: Ext.tree.TriStateNodeUI
        },
        listeners: {
            beforeload: function(loader, node, callback) {
                this.baseParams.depth = node.getDepth();
                if(typeof node.attributes.checked == 'boolean'){
                    this.baseAttrs.checked = node.attributes.checked;
                }else{
                    delete this.baseAttrs.checked;
                }
            }
        }
    });

  10. #40
    Sencha User
    Join Date
    Aug 2008
    Location
    Gothenburg
    Posts
    157
    Vote Rating
    2
    Dr. Flink is on a distinguished road

      0  

    Default


    The problem is that the tree doesn't behave as it should when checking/unchecking nodes.

    Tree structure:
    Code:
    Category 7
        [ ]Customer 10
            [ ]Premises 12
    Category 8
        [ ]Customer 96
            [ ]Premises 90
            [ ]Premises 91
            [ ]Premises 92
            [ ]Premises 93
    1. I click checkbox on Premises 12. This will make the checkbox checked (but not the Customer 10 checkbox).
    2. Then I click on premises 91 checkbox. Premises 12 will get unchecked and nothing happens to premises 91(!).

    Its impossible to visually make any of the premises under Customer 96 checked (have siblings), but I can check Premises 12 (no siblings).
    Visually, its impossible to make the customers checkboxes checked (probably because they also have siblings).