1. #1
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default Sencha Touch 2 MVC NestedList

    Sencha Touch 2 MVC NestedList


    Hi,
    I have a problem with NestedList in my test MVC application. I try to create app in ST 2.0 style only.
    It seems as it should work but there is no. Help me understand what I'm doing wrong.

    Here is code of my application (also on GIT: https://github.com/kostysh/Sencha-To...ith-NestedList)

    Code:
    /***Application structure
    
    /index.html
    /data/data.json
    /app/app.js
    /app/controller/Main.js
    /app/model/Section.js
    /app/model/Product.js
    /app/view/Homepage.js
    /app/view/Welcomescreen.js
    /app/view/Catalog.js
    /app/store/Section.js
    
    
    ***/
    
    
    //app/app.js
    //----------------------------------------------------------------------
    Ext.Loader.setConfig({
        enabled:true
    });
    
    
    Ext.application({
        name: 'Myapp',
        controllers: ['Main'],
        
        launch: function() {
            Ext.create('Myapp.view.Homepage');
        }
    });
    //----------------------------------------------------------------------
    
    
    //app/controller/Main.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.controller.Main', {
        extend: 'Ext.app.Controller',
        
        views: [
            'Homepage',
            'Welcomescreen',
            'Catalog'
        ],
        
        models: [
            'Product',
            'Section'        
        ],
        
        stores: ['Section'],
        
        init: function() {
            
            this.control({
                
            });
        }    
        
    });
    //----------------------------------------------------------------------
    
    
    //app/view/Homepage.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.view.Homepage', {
        extend: 'Ext.tab.Panel',
        
        config: {
            fullscreen: true,
    
    
            tabBar: {
                docked: 'bottom',
                layout: {
                    pack: 'center'
                }
            },
    
    
            defaults: {
                scrollable: true
            },
    
    
            items: [
                {
                    xtype : 'welcomescreen'                 
                },
    
    
                {
                    xtype : 'catalog'
                }
            ]
        },
        
        initialize: function() {
            console.log("Init homescreen");
            this.callParent(arguments);
        }
    });
    //----------------------------------------------------------------------
    
    
    //app/view/Welcomescreen.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.view.Welcomescreen', {
        extend: 'Ext.Container',
        xtype: 'welcomescreen',
            
        config: {
            title: 'home',
            iconCls: 'home',
        
            defaults: {
                styleHtmlContent: true
            },
            
            items: [
                {
                    xtype: 'container',
                    html: '<h2>Hello world!!!</h2>'
                }
            ]
        },
        
        initialize: function() {
            console.log("Init welcomescreen");
            this.callParent(arguments);
        } 
    });
    //----------------------------------------------------------------------
    
    
    //app/view/Catalog.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.view.Catalog', {
        extend: 'Ext.Container',
        xtype: 'catalog',
        
        config: {
            title: 'My catalog',
            iconCls: 'bookmarks',
                    
            items: [
                {
                    xtype: 'toolbar',
                    docked: 'top'
                },
                
                {
                    xtype: 'nestedlist',
                    store: 'Myapp.store.Section',
                    displayField: 'name'
                }
                            
            ]
        },
        
        initialize: function() {
            console.log("Init catalog");
            this.callParent(arguments);
        }
    });
    //----------------------------------------------------------------------
    
    
    //app/model/Section.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.model.Section', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id', type: 'string'},
            {name: 'name', type: 'string'},
            {name: 'items', type: 'auto'}
        ],
            
        hasMany: {
            name: 'products',
            model: 'Myapp.model.Product'
        }
    });
    //----------------------------------------------------------------------
    
    
    //app/model/Product.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.model.Product', {
        extend: 'Ext.data.Model',
        
        fields: [
            {name: 'id', type: 'string'},
            {name: 'name', type: 'string'}
        ],
        
        belongsTo: 'items'
    });
    //----------------------------------------------------------------------
    
    
    //app/store/Section.js
    //----------------------------------------------------------------------
    Ext.define('Myapp.store.Section', {
        extend: 'Ext.data.TreeStore',
        model: 'Myapp.model.Section',
        
        autoLoad: true,
        root: {},
        
        proxy: {
            type: 'ajax',
            url: 'data/data.json',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    //----------------------------------------------------------------------
    
    
    //data/data.json
    //----------------------------------------------------------------------
    {
        "items": [
            {
                "id": "id1",
                "name": "Section #1",
                
                "products": [
                    {
                        "id": "pr11",
                        "name": "Product #1"
                    },
                    {
                        "id": "pr12",
                        "name": "Product #2"
                    }
                ]
            },        
            {
                "id": "id2",
                "name": "Section #2",
                
                "items": [
                    {
                        "id": "id22",
                        "name": "Section #3",
                        
                        "products": [
                            {
                                "id": "pr21",
                                "name": "Product #3"
                            },
                            {
                                "id": "pr22",
                                "name": "Product #4"
                            }                    
                        ]
                    }   
                ]             
            }
        ]        
    }
    //----------------------------------------------------------------------

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    What issues are you facing, exactly? Have you tried looking at the NestedList example code and going from there?
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default


    I want to build an application that fully complies with the recommendations regarding the structure of the application and use classes for Sencha Touch 2.0
    Example, contained in the official documentation does not fully meet these guidelines. This example is built on the principle as for version 1.1. If you modify this example to the recommended MVC-style then it does not work (such as mine, with enabled Ext.Loader, defined data store and Ext.tab.Panel).
    Please take a look at my code - I think it is correct, but nevertheless nestedlist does not work. I can not understand where the error occurred.

  4. #4
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Smile


    Hi all, I did it! It works now )
    Get working example here: https://github.com/kostysh/Sencha-To...ith-NestedList

  5. #5
    Sencha User
    Join Date
    Aug 2011
    Posts
    60
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


    Hi,

    Get following message and no record visible in My Catlog screen

    [DEPRECATE][Ext.dataview.NestedList#updateBackButton] add(index, item) method signature is deprecated, please use insert(index, item) instead
    sencha-touch-all-debug-w-comments.js:28685[DEPRECATE][Ext.data.NodeStore#addManagedListener] addManagedListener() / mon() is deprecated, simply use addListener() / on(). All listeners are now automatically managed where necessary.

    Have been tring to load JSON file to store using Sencha Touch 2.0 MVC and so far not sucessful. Works pretty well in 1.x

  6. #6
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default


    All these lines in the console (with [DEPRECATE]), because we use a PR2 version Sencha Touch and a lot of code left from a previous version of ST. I think in the next versions a lot will be fixed.


    In my example, there are no problems with JSON loading to store. Try the most recent version from https://github.com/kostysh/Sencha-To...ith-NestedList


    JSON loading, NestedList and List are working good, but the error "has no method 'isLeaf'" is present, and yet I have no idea how to fix it. Need help.

    This error occurred when we doing any "tap" on List item (inside NestedList detailCard).


  7. #7
    Sencha User
    Join Date
    Aug 2011
    Posts
    60
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


    Hmm,

    I did download the latest version of your code but not working. No other message (other than what I had pasted in the earlier message)

    I did test in Chrome and Safari.

    Thanks and Regards
    Sarang

  8. #8
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default


    on my local web-server all things working. Also, please try from this link: http://mindsaur.com/mobtest3/
    This is the same code, I just tested it on Google Chrome under Linux and Windows (100%)

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Posts
    60
    Vote Rating
    0
    stirucherai is on a distinguished road

      0  

    Default


    Hi,

    Does it work with web-browser - meaning can we directly use file:// (instead of localhost)

    Thanks and Regards
    Sarang

  10. #10
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    171
    Vote Rating
    19
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default


    locally, we can also gain access to json file,but you need to remove system constraints. Add to your Chrome command line option --allow-file-access-from-files, this should help

    but I recommend you install a local web server Apache,
    then you will be able to fully test your applications.
    also to avoid any problems with the CORS, put in root of your site .htaccess file with:

    <FilesMatch "\.(json)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Referer"
    Header set Access-Control-Allow-Methods "GET,POST"
    Header set Access-Control-Allow-Headers "x-prototype-version,x-requested-with"
    </IfModule>
    </FilesMatch>

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar