Results 1 to 1 of 1

Thread: Treepanel - opening a node loads tree in node

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    50
    Answers
    4

    Default Treepanel - opening a node loads tree in node

    Hello,
    I have a Treepanel that loads json data from a local server. 1 node containing childdata. The tree displays fine but when I click the node containing a child the node opens displaying the tree again - actually some node are displayed twice.

    image:
    treePanel.jpg
    Noord - Java contains 1 child (see Json, below)

    Questions:

    I load _all_ tree data on pageload . How can I tell Ext not to load the whole tree again when opening a node but use the already existing data for that specific node?

    Can I tell Ext to send the id of te clicked node so that I can modify te returned Json? If so, how?

    /init.js:
    Code:
    Ext.application({
        name        :    'iCollect',
        appFolder    :    'app',
        models        :    ['Category'],
        stores        :    ['Category'],
        controllers    :    ['CategoryTree'],
        views        :    ['CategoryTree'],
        launch        :    function() {
            Ext.create('Ext.panel.Panel', {
                layout: 'fit',
                renderTo:'tree',
                items: [{
                        xtype:'CategoryTree',
                        title:'My first Tree',
                        html: 'Hello world!!!'
                }]
            });
        }
    });
    /app/Controller.js:
    Code:
    Ext.define('iCollect.controller.CategoryTree',{
        extend        :    'Ext.app.Controller',
        init         :    function(){
                            this.control({
                                'CategoryTree': {
                                    itemdblclick: this.onDblClick
                                }
                            })
                        },
        onDblClick    :     function(grid,record){
                        }
    });
    /app/model.js:
    Code:
    Ext.define('iCollect.model.Category',{
        extend    : 'Ext.data.Model',
        fields    : ['labelTitle','description','id','labelHtml']
    });
    /app.store.js:
    Code:
    Ext.define('iCollect.store.Category', {
        extend    : 'Ext.data.TreeStore',
        model    : 'iCollect.model.Category',
        autoLoad: true,
        proxy    : {
            type    : 'ajax',
            url        : '/RemoteProxy.cfm?method=getTreeData&format=ExtJS&reload=true',
            reader: {
                type            : 'json',
                root            : 'data',
                successProperty    : 'success'
            }
        },
        reader: {
            type:'json',
            root: 'data'
        },
        root        : {
            text: 'Categories',
            expanded: true,
            text    : 'Categories'
        },
        listeners    : {
            beforeexpand: function(_this,eopts){
            console.log(_this.getId());
        }
        }
    });
    /view/CategoryTree.js
    Code:
    Ext.define('iCollect.view.CategoryTree' ,{
        displayField: 'labelTitle',
        extend        : 'Ext.tree.Panel',
        alias         : 'widget.CategoryTree',
        autoShow    : true,
        title        : 'All Users',
        store        : 'Category',
        initComponent: function() {
            this.callParent(arguments);
        }
    });
    I use Ext JS 4.2.0. This is my tree-Json returned on pageload
    Code:
    {
        "data": [
            {
                "labelTitle": "Zuid-Java",
                "description": "De regio Zuid - Java",
                "id": 15,
                "leaf": true,
                "labelHtml": "<input type=\"checkbox\" name=\"Zuid-Java\"><label>Zuid-Java</label> "
            },
            {
                "labelTitle": "Noord-Java",
                "description": "De regio Noord-Java",
                "children": [
                    {
                        "labelTitle": "Semarang",
                        "description": "Een grote stazd in Noord - Java",
                        "id": 24,
                        "leaf": true,
                        "labelHtml": "<input type=\"checkbox\" name=\"Semarang\"><label>Semarang</label> "
                    }
                ],
                "id": 16,
                "leaf": false,
                "labelHtml": "<input type=\"checkbox\" name=\"Noord-Java\"><label>Noord-Java</label> "
            },
            {
                "labelTitle": "Oost-Java",
                "description": "De regio Oost - Java",
                "id": 14,
                "leaf": true,
                "labelHtml": "<input type=\"checkbox\" name=\"Oost-Java\"><label>Oost-Java</label> "
            },
            {
                "labelTitle": "West-Java",
                "description": "De regio Zuid - Java",
                "id": 11,
                "leaf": true,
                "labelHtml": "<input type=\"checkbox\" name=\"West-Java\"><label>West-Java</label> "
            }
        ]
    }
    Last edited by marc123; 11 Sep 2013 at 12:52 PM. Reason: Adding screenshot

Tags for this Thread

Posting Permissions

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