You found a bug! We've classified it as EXTJS-9407 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Matthias Ott is on a distinguished road

      0  

    Default TreePanel using localStorage Proxy not working

    Ext version tested:
    • Ext 4.1.1
    • Ext 4.2

    Browser versions tested against:
    • FF 18.0.2 (firebug 1.11.2 installed)


    Description:
    • treepanel using a store/proxy that utilizes the browsers localStorage is not working at all. The basic thing I am trying to accomplish is a tree (5000+ entries) that is only created once and then stored in the localStorage. It does not seem to work at all.

    Steps to reproduce the problem:
    • Build a treepanel using a proxy with the type localstorage
    • Build a tree, sync the tree with the localStorage.
    • load the store again

    The result that was expected:
    • Tree that looks the same

    The result that occurs instead:
    • Broken tree, only a few nodes appear

    Test Case:

    Code:
       Ext.require([
        'Ext.form.*',
        'Ext.tip.*']);
    
    
    Ext.define('Test.AssemblyTree', {
        requires: 'Ext.data.Model',
        extend: 'Ext.data.Model',
        idProperty: 'assembly',
        fields: [{
            name: 'text',
            type: 'string'
        }, {
            name: 'leaf',
            type: 'boolean'
        }, {
            name: 'visible',
            type: 'boolean',
            defaultValue: true
        }, {
            name: 'loaded',
            type: 'boolean',
            defaultValue: false
        }, {
            name: 'expanded',
            defaultValue: false
        }, {
            name: 'assembly',
            type: 'string'
        }]
    
    });
    
    Ext.onReady(function () {
        Ext.QuickTips.init();
    
        function submitOnEnter(field, event) {
            if (event.getKey() == event.ENTER) {
                var form = field.up('form').getForm();
                form.submit();
            }
        }
    
        var window = Ext.create('Ext.window.Window', {
            width: 600,
            height: 500,
            title: 'test',
            layout: 'border',
            itemId: 'mainWindow',
            items: [{
                xtype: 'panel',
                title: 'Actions',
                region: 'north',
                height: 60,
                border: false,
                items: [{
                    xtype: 'button',
                    text: 'Clear Tree from LocalStore the hard way',
                    handler: function () {
                        for (var i = 0; i < localStorage.getItem('AssemblyTree-counter') + 2; i++) {
                            localStorage.removeItem('AssemblyTree-' + i);
                        }
                        localStorage.removeItem('AssemblyTree-counter');
                        localStorage.removeItem('AssemblyTree-tree');
                        localStorage.removeItem('AssemblyTree-root');
                        localStorage.removeItem('AssemblyTree');
                    }
                }, {}]
            }, {
                xtype: 'panel',
                title: 'Tree for testing',
                region: 'center',
                itemId: 'southPanel',
                flex: 1,
                items: [{
                    xtype: 'treepanel',
                    itemId: 'treee',
                    border: false,
                    store: {
                        model: 'Test.AssemblyTree',
       
                        proxy: {
                            type: 'localstorage',
                            id: 'AssemblyTree'
                        }
                    }
                }]
            }]
        });
    
        window.show();
        var mainWindow = Ext.ComponentQuery.query('#mainWindow')[0];
        if (!localStorage.pageLoadCount) {
            localStorage.pageLoadCount = 0;
        }
        localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;
        mainWindow.setTitle('You have been here ' + localStorage.pageLoadCount + ' times now!');
    
        var treee = Ext.ComponentQuery.query('#treee')[0];
    
        // treee.store.removeAll();
        // now update the data in the view
        window.show();
        treee.store.load();
    
        //console.log(localStorage.getItem('AssemblyTree-counter'));
        if (localStorage.getItem('AssemblyTree-root') == null) {
            alert('We are creating a new Tree');
            treee.setRootNode({
                leaf: false,
                text: 'All',
                assembly: 'root',
                expanded: true,
                iconCls: 'assembly-tree-icon'
            });
            var curNode = treee.getRootNode();
            curNode.appendChild({
                leaf: false,
                text: 'test1',
                assembly: '2',       
                expanded: true
            });
            curNode = curNode.lastChild;
            curNode.appendChild({
                leaf: true,
                text: 'test2',
                assembly: '3', 
                expanded: false
            });
            //now save
            treee.store.sync();
            localStorage.setItem('AssemblyTree-counter', 3)
        } else {
            alert('We found an old tree we are using now');
        }
    });


    HELPFUL INFORMATION


    See this URL for live test case: http://jsfiddle.net/gJF8M/4/

    Debugging already done:
    • none

    Possible fix:
    • not provided

    Additional CSS used:
    • only default ext-all.css

    Operating System:
    • Windows 7
    *EDIT BY SLEMMON
    Seems I'm having the same trouble. Can't get it to work as expected with treestore, but my datastore with a grid works ok. Adding my own test cases to augment the bug report.

    TREE
    Code:
    var root = {
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "algebra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    };
    
    
    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        width: 300,
        height: 150,
        store: {
            type: 'tree'
            , proxy: {
                type: 'localstorage'
                , id  : 'TreeTest'
            }
        },
        rootVisible: false,
        renderTo: Ext.getBody()
        , tbar: [{
            text: 'Manually set store'
            , handler: function (btn) {
                tree.getStore().setRootNode(root);
            }
        }, {
            text: 'Load Store'
            , handler: function (btn) {
                tree.getStore().load();
            }
        }, {
            text: 'Sync Store'
            , handler: function (btn) {
                tree.getStore().sync();
            }
        }]
    });
    GRID
    Code:
    var gridData = [
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ];
    
    
    
    
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        proxy: {
            type: 'localstorage',
            id: 'GridTest'
        }
    });
    
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
        , tbar: [{
            text: 'Manually set store'
            , handler: function (btn) {
                grid.getStore().loadData(gridData);
            }
        }, {
            text: 'Load store'
            , handler: function () {
                grid.getStore().load();
            }
        }, {
            text: 'Sync store'
            , handler: function () {
                grid.getStore().sync();
            }
        }]
    });
    http://jsfiddle.net/slemmon/dE6Jv/1/
    Last edited by slemmon; 8 Apr 2013 at 1:23 PM. Reason: additional test cases

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,129
    Vote Rating
    228
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Matthias Ott is on a distinguished road

      0  

    Default

    Hi, Just wanted to check if there are any news on this issue, we would love to use this feature.

  4. #4
    Ext JS Premium Member
    Join Date
    May 2010
    Posts
    77
    Vote Rating
    0
    karthik085 is on a distinguished road

      0  

    Default

    Same here.....any updates on this bug???

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    26
    Vote Rating
    1
    jamil.isayyed is on a distinguished road

      0  

    Default Updates

    any updates on this bug?