Results 1 to 2 of 2

Thread: Saving Expand status of the tree panel.

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2014
    Posts
    52

    Default Saving Expand status of the tree panel.

    Hi
    We are using Ext Js 4.2.x.
    We need to save the Expand status of the tree based on the user selection,

    Lets take we have 2 nodes under the root. Some users want 1st node to be opened by default when they opens the page and other wants the 2nd node as default expand.
    How can we achieve this?

    We are trying the following code for this.
    Code:
    Ext.application({
        name : 'Fiddle',
    
    
    
    
        launch : function() {
      Ext.define('Task', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'id',     type: 'int'},
                {name: 'text',     type: 'string'},
                {name: 'user',     type: 'string'}
            ]
        });
            
    var store = Ext.create('Ext.data.TreeStore', {
                model: 'Task',
                autoload:true,
                proxy: {
                    type: 'ajax',
                    url: 'data1.json',
                    reader: {
                        type: 'json'
                    }
                },
    });
    
    
    
    
    
    
    
    
        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var treeP = Ext.create('Ext.tree.Panel', {
            title: 'Core Team Projects',
            width: 500,
            height: 300,
            renderTo: Ext.getBody(),       
            rootVisible: false,
            store: store,      
            tools: [{
                type: 'save',
                tooltip: 'Save',
                handler: function (event, toolEl, panelHeader) {                            
                    treeP.getRootNode().cascadeBy(function (n) {
                        var p = n.getData();
                        if (p.expanded === false) {
                            store.getById(p.id).getData().expanded = false;
                        }
                        else
                        {
                            store.getById(p.id).getData().expanded = true;
                        }
                    });
                    store.commitChanges();
                    
                }
            }],
            //the 'columns' property is now 'headers'
            columns: [{
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'text',
                flex: 2,
                sortable: true,
                dataIndex: 'text'
            },{
                text: 'Assigned To',
                flex: 1,
                dataIndex: 'user',
                sortable: true
            }]
        });  
    
    
    
    
        }
    });
    data1.json:
    Code:
    {
            expanded: true,
            children: [
                { id: 1, text: "detention", user:"siva", expanded: true, 
                 children: [ {id: 2, text: "homework", user:"prasad", expanded: true,
                             children: [ {id: 3, text: "home1", user:"prasad1", leaf: true },
                                 {id: 4, text: "home2", user:"prasad2", leaf: true }
                                       ]},
                         {id: 5, text: "buylottery", user:"mantri",
                             children: [ {id: 6, text: "buy1", user:"mantri1", leaf: true },
                                 {id: 7, text: "buy2", user:"mantri2", leaf: true }
                                       ]}
                ] }           
                ]
    }
    Please help.

    Regards,
    SivaPrasad.B

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    Here's a thread that might help:
    http://www.sencha.com/forum/showthread.php?274141

Posting Permissions

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