1. #1
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Question How do you properly autoload the viewport and child views?

    How do you properly autoload the viewport and child views?


    ExtJS noob here. I'm trying to create an interface based off the example documentation here.

    I've downloaded the example code and I have it running on my browser. It works just fine.

    So far, I'm just trying to render a simple navigation component I've created in a view class file. Eventually I want to include the other components but I can't even get the viewport to render. When the page loads, my controller logs some output to the console and there are no errors. The page is simply blank.

    I'm really not sure what I did wrong so any help would be much appreciated.

    Below is my application code so far:

    /ext-ui/app/Application.js:
    Code:
    Ext.Loader.setConfig({enabled:true});
    Ext.application({
        name: 'FashionHelper',
        appFolder: '/ext-ui/app',
        autoCreateViewport: true,
    
    
        controllers: ['Navigation']
    });
    /ext-ui/app/view/Viewport.js:
    Code:
    Ext.define('FashionHelper.view.Viewport', {
        extend: 'Ext.Panel',
    
    
        requires: [
            'FashionHelper.view.Navigation'
        ],
    
    
        config: {
            layout: 'fit',
            //fullscreen: true,
            items: {
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                xtype: 'navigation'    
            }
        }
    });
    /ext-ui/app/view/Navigation.js:
    Code:
    Ext.define('FashionHelper.view.Navigation', {
        extend: 'Ext.Container',
        alias: 'widget.navigation',
        height: 70,
    
    
        autoRender: true,
        autoShow: true,
    
    
        initComponent: function(){
            this.layout = {
                type: 'vbox',
                align: 'center',
                pack: 'center'
            };
    
    
            this.items = [{
                xtype: 'container',
                defaultType: 'component',
                height: 30,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    autoEl: {
                        tag: 'a',
                        href: '#!/locale',
                        html: 'Locale'
                    },
                    action: 'locale'
                }, {
                    autoEl: {
                        tag: 'a',
                        href: '#!/brand',
                        html: 'Brand'
                    },
                    action: 'brand'
                }, {
                    autoEl: {
                        tag: 'a',
                        href: '#!/article',
                        html: 'Article'
                    },
                    action: 'article'
                }, {
                    autoEl: {
                        tag: 'a',
                        href: '#!/gender',
                        html: 'Gender'
                    },
                    action: 'gender'
                }, {
                    autoEl: {
                        tag: 'a',
                        href: '#!/profile',
                        html: 'Profile'
                    },
                    action: 'profile'
                }]
            }, {
                xtype: 'container',
                defaultType: 'component',
                height: 30,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                autoEl: {
                    tag: 'a',
                    href: '#!/mapping',
                    html: 'Mapping'
                },
                action: 'mapping'
            }];
    
    
            this.callParent(arguments);
        }
    });
    /ext-ui/app/controller/Navigation.js:
    Code:
    Ext.define('FashionHelper.controller.Navigation', {
        extend: 'Ext.app.Controller',
    
    
        init: function(){
            console.log('controller rendered');
        }
    });
    Last edited by a_arias; 10 Nov 2011 at 4:12 PM. Reason: Correcting title

  2. #2
    Sencha User a_arias's Avatar
    Join Date
    Aug 2011
    Location
    Florida
    Posts
    28
    Vote Rating
    0
    a_arias is on a distinguished road

      0  

    Default Autoloading works as expected. Problem was in item configuration.

    Autoloading works as expected. Problem was in item configuration.


    After a bit of poking around I seemed to have found the answer I was looking for.

    Below is the working code:

    /ext-ui/app/Application.js:
    Code:
    Ext.Loader.setConfig({enabled:true});
    Ext.application({
        name: 'FashionHelper',
        appFolder: '/ext-ui/app',
        autoCreateViewport: true,
    
    
        controllers: ['Navigation'],
    
    
        // launch: function(){
        //     Ext.create('Ext.container.Viewport', {
        //         renderTo: Ext.getBody(),
        //         items: {
        //             xtype: 'navigation'
        //         }
        //     });
        // }
    });
    /ext-ui/app/view/Viewport.js:
    Code:
    Ext.define('FashionHelper.view.Viewport', {
        extend: 'Ext.Panel',
    
    
        requires: [
            'FashionHelper.view.Navigation'
        ],
    
    
        initComponent: function() {
            this.items = [{
                xtype: 'navigation'
            }]
            
            this.callParent();
        }
    });
    /ext-ui/app/view/Navigation.js:
    Code:
    Ext.define('FashionHelper.view.Navigation', {
        extend: 'Ext.Container',
        alias: 'widget.navigation',
        height: 70,
    
    
        autoRender: true,
        autoShow: true,
    
    
        initComponent: function(){
    
    
            this.layout = {
                type: 'vbox',
                align: 'center',
                pack: 'center',
            };
    
    
            this.items = [{
                xtype: 'container',
                width: '100%',
                height: 50,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'h1',
                        html: 'Fashion Helper'
                    },
                    action: 'locale'
                }, {
                    xtype: 'component',
                    flex: 2,
                    autoEl: {
                        tag: 'a',
                        href: '#!/home',
                        html: 'Home'
                    },
                    action: 'home'
                }]
            }, {
                xtype: 'container',
                width: '100%',
                height: 50,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/locale',
                        html: 'Locale'
                    }
                }, {
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/brand',
                        html: 'Brand'
                    }
                }, {
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/size',
                        html: 'Size'
                    }
                }, {
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/article',
                        html: 'Article'
                    }
                }, {
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/gender',
                        html: 'Gender'
                    }
                }, {
                    xtype: 'component',
                    flex: 1,
                    autoEl: {
                        tag: 'a',
                        href: '#!/profile',
                        html: 'Profile'
                    }
                }]
            }];
    
    
            this.callParent(arguments);
        }
    });

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