Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5414 in a recent build.
  1. #1
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default [4.1.0b2] MVC + Tree + Autoload + Direct = Mask Hangs

    [4.1.0b2] MVC + Tree + Autoload + Direct = Mask Hangs


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.0-beta-2
    Description:
    • A standard combination of treeview, with an autoload store that has a direct proxy cause the load mask to hang.
    Test Case:

    /app/store/items.js
    Code:
    Ext.define('TB.store.Items', {
        extend: 'Ext.data.TreeStore',    
        model: 'TB.model.Item',
    
    
        autoLoad: true,
            
        root: {
            expanded: true
        },
        
        proxy: {
            type: 'direct',
            
            api: {
                read: Items.GetTree,
            },
        },
    });
    /app/model/item.js
    Code:
    Ext.define('TB.model.Item', {
        extend: 'Ext.data.Model',
        
        fields: [
            {name: 'text', type: 'string'},        
        ]    
    });
    /app/controller/items.js
    Code:
    Ext.define('TB.controller.Items', {
        extend: 'Ext.app.Controller',
    
    
        views:  [ 'ItemsTree' ],
        stores: [ 'Items' ],
        models: [ 'Item' ],    
    });
    /app/view/ItemsTree.js:
    Code:
    Ext.define('TB.view.ItemsTree' ,
    {
        extend: 'Ext.tree.Panel',    
        alias : 'widget.itemstree',
        store : 'Items',
        
        rootVisible: false,   
    });
    /app.js
    Code:
    Ext.require([
        'Ext.direct.*',
    ]);
    
    
    Ext.onReady(function() {
        Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
        Ext.Loader.setConfig({enabled:true});
    });
    
    
    Ext.application({
        name: 'TB',
    
    
        appFolder: 'app',
    
    
        controllers: [ 'Items' ],
    
    
    
    
        launch: function() {        
            // Create the viewport 
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        xtype: 'itemstree',
                        title: 'Items',
                        layout: 'fit',
                    }
                ]
            });
        },    
    });
    /index.html
    Code:
    <html>
    <head>
        <title>Test Box</title>
    
    
        <link rel="stylesheet" type="text/css" href="../ext-4.1.0-beta-2/resources/css/ext-all-gray.css">
    
    
        <script type="text/javascript" src="../ext-4.1.0-beta-2/ext-all-debug.js"></script>
    
    
        <script type="text/javascript" src="direct/api.php"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body></body>
    </html>
    direct class:
    Code:
    <?php
    class Items {
    
    
        function GetTree($aParams){
            $id = $aParams->node;
            
            $out = array();
            if($id == "root"){
                for($i = 1; $i <= 5; ++$i){
                    array_push($out, array(
                        'id'=>'n' . $i,
                        'text'=>'Node ' . $i,
                        'leaf'=>false
                    ));
                }
            }else if(strlen($id) == 2){
                $num = substr($id, 1);
                for($i = 1; $i <= 5; ++$i){
                    array_push($out, array(
                        'id'=>$id . $i,
                        'text'=>'Node ' . $num . '.' . $i,
                        'leaf'=>true
                    ));
                }
            }
            return $out;
        }
    }
    HELPFUL INFORMATION
    Possible fix:
    • Weirdly enough, if autoload is set to false, the store will still load automatically and the mask will disappear.
    Debugging done:
    • A proxy read request made from the app store (TreeStore).
    • Following this NodeStore is initiated and the app store (TreeStore) becomes its treeStore property.
    • The NodeStore is then bound to the mask view.
    • Load is then called on the NodeStore, which activates the mask (this load has another proxy read request, but the proxy of NodeStore is not the direct one).
    • OnProxyLoad is called, but for the app store (TreeStore), which is not bound to the mask.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    900
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We will look into this. Two things I see that are most likely unrelated is you have a lot of trailing commas and you have layout : 'fit' in your Viewport that shouldn't be there in the one item.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Izhaki's Avatar
    Join Date
    Apr 2009
    Location
    London
    Posts
    118
    Vote Rating
    13
    Izhaki will become famous soon enough

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    We will look into this. Two things I see that are most likely unrelated is you have a lot of trailing commas and you have layout : 'fit' in your Viewport that shouldn't be there in the one item.
    Thanks for your reply!

    Yep, the second 'fit' shouldn't be there (just missed it when minimising code). No behaviour difference when it is being removed.

    As for the trailing commas - to my knowledge this messes up things badly with IE. But I've won a programming lottery and the students using the system are prohibited from using IE. Should I be worried about these trailing commas then? My code is full with them.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    900
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Regardless if Chrome or Firefox don't care about them I would still remove them for code quality, wouldn't be my highest priority but I would make it a priority.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,153
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This has been resolved, note that specifying autoLoad is redundant here. Since you've said the root is expanded, it will automatically trigger a load.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 2