Results 1 to 5 of 5

Thread: TreePanel using localStorage Proxy not working

    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
      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,154
    Vote Rating
    247
      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
      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
      0  

    Default

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

  5. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    26
    Vote Rating
    1
      0  

    Default Updates

    any updates on this bug?

Posting Permissions

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