1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Warsaw, Poland
    Posts
    38
    Vote Rating
    1
    Answers
    1
    sasklacz is on a distinguished road

      0  

    Default Answered: Proper components usage and architecture in ST2 application

    Answered: Proper components usage and architecture in ST2 application


    I have a quite simple mobile app I want to build with Sencha Touch 2. I have quite a lot of experience with ExtJs, but not really with their MVC architecture. What I want to achieve is :
    • first a main screen with toolbar and some icons rendered in the middle which are to be used to navigate across the app functionality.
    • clicking one of the icons should switch to a screen with a scrollable list.
    What I'm struggling with is the proper place to define the views, and controllers. As well as should for example the main screen use a controller ? Should I create a viewport manually or not ?

    What I have right now, which is not rendering anything apart of the toolbar : http://www.senchafiddle.com/#jSqtV (which is not rendering at all but doesn't throw any errors).

    And what I'm trying to get :

    image.png
    Using ExtGantt / ExtScheduler from Bryntum ? I can help you integrate and implement it.

  2. Sencha Touch 2 has a global viewport always (Ext.Viewport) and uses card layout which is configurable so you don't really need to create your own viewport, you can add a docked toolbar to it and the inner items can be added to it and take advantage of the layout on Ext.Viewport.

    Your classes can be (of course in separate files):

    Code:
    Ext.define('Test.view.Toolbar', {
        extend : 'Ext.Toolbar',
        xtype  : 'test-toolbar',
    
        requires : 'Ext.Button',
    
        config : {
            docked : 'top',
            items  : [
                {
                    xtype  : 'button',
                    text   : 'Button 1',
                    action : 'Button1'
                },
                {
                    xtype  : 'button',
                    text   : 'Button 2',
                    action : 'Button2'
                }
            ]
        }
    });
    
    Ext.define('Test.view.Icons', {
        extend : 'Ext.Component',
        xtype  : 'test-icons',
    
        config : {
            tpl : ''.concat(
                '<tpl for=".">',
                    '<div class="icon {icon}"></div>',
                '</tpl>'
            )
        },
    
        initialize : function() {
            this.callParent();
    
            this.element.on({
                scope    : this,
                delegate : 'div.icon',
                tap      : 'onIconTap'
            });
        },
    
        onIconTap : function(e, t) {
            this.fireEvent('icontap', this, e, t);
        }
    });
    
    Ext.define('Test.controller.Main', {
        extend : 'Ext.app.Controller',
    
        config : {
            control : {
                'button[action=Button1]' : {
                    tap     : 'onButton1Tap'
                },
                'button[action=Button2]' : {
                    tap     : 'onButton2Tap'
                },
                'test-icons'             : {
                    icontap : 'onIconTap'
                }
            }
        },
    
        onButton1Tap : function() {
            console.log('button 1 tapped');
        },
    
        onButton2Tap : function() {
            console.log('button 2 tapped');
        },
    
        onIconTap : function() {
            console.log('icon tapped');
        }
    });
    
    Ext.application({
        name : 'Test',
    
        controllers : [
            'Main'
        ],
    
        viewport : {
            layout : 'fit'
        },
    
        launch : function () {
    
            Ext.Viewport.add([
                {
                    xtype : 'test-toolbar'
                },
                {
                    xtype : 'test-icons',
                    data  : [
                        { icon : 'icon1' },
                        { icon : 'icon2' },
                        { icon : 'icon3' },
                        { icon : 'icon4' }
                    ]
                }
            ]);
    
        }
    });
    Quick CSS for icons for my test:

    Code:
    .icon {
        display : inline-block;
        width   : 40%;
        height  : 5em;
        margin  : 5%;
    }
    
    .icon1 {
        background-color : #FF0000;
    }
    
    .icon2 {
        background-color : #00FF00;
    }
    
    .icon3 {
        background-color : #0000FF;
    }
    
    .icon4 {
        background-color : #FFFF00;
    }

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,656
    Vote Rating
    904
    Answers
    3575
    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


    Sencha Touch 2 has a global viewport always (Ext.Viewport) and uses card layout which is configurable so you don't really need to create your own viewport, you can add a docked toolbar to it and the inner items can be added to it and take advantage of the layout on Ext.Viewport.

    Your classes can be (of course in separate files):

    Code:
    Ext.define('Test.view.Toolbar', {
        extend : 'Ext.Toolbar',
        xtype  : 'test-toolbar',
    
        requires : 'Ext.Button',
    
        config : {
            docked : 'top',
            items  : [
                {
                    xtype  : 'button',
                    text   : 'Button 1',
                    action : 'Button1'
                },
                {
                    xtype  : 'button',
                    text   : 'Button 2',
                    action : 'Button2'
                }
            ]
        }
    });
    
    Ext.define('Test.view.Icons', {
        extend : 'Ext.Component',
        xtype  : 'test-icons',
    
        config : {
            tpl : ''.concat(
                '<tpl for=".">',
                    '<div class="icon {icon}"></div>',
                '</tpl>'
            )
        },
    
        initialize : function() {
            this.callParent();
    
            this.element.on({
                scope    : this,
                delegate : 'div.icon',
                tap      : 'onIconTap'
            });
        },
    
        onIconTap : function(e, t) {
            this.fireEvent('icontap', this, e, t);
        }
    });
    
    Ext.define('Test.controller.Main', {
        extend : 'Ext.app.Controller',
    
        config : {
            control : {
                'button[action=Button1]' : {
                    tap     : 'onButton1Tap'
                },
                'button[action=Button2]' : {
                    tap     : 'onButton2Tap'
                },
                'test-icons'             : {
                    icontap : 'onIconTap'
                }
            }
        },
    
        onButton1Tap : function() {
            console.log('button 1 tapped');
        },
    
        onButton2Tap : function() {
            console.log('button 2 tapped');
        },
    
        onIconTap : function() {
            console.log('icon tapped');
        }
    });
    
    Ext.application({
        name : 'Test',
    
        controllers : [
            'Main'
        ],
    
        viewport : {
            layout : 'fit'
        },
    
        launch : function () {
    
            Ext.Viewport.add([
                {
                    xtype : 'test-toolbar'
                },
                {
                    xtype : 'test-icons',
                    data  : [
                        { icon : 'icon1' },
                        { icon : 'icon2' },
                        { icon : 'icon3' },
                        { icon : 'icon4' }
                    ]
                }
            ]);
    
        }
    });
    Quick CSS for icons for my test:

    Code:
    .icon {
        display : inline-block;
        width   : 40%;
        height  : 5em;
        margin  : 5%;
    }
    
    .icon1 {
        background-color : #FF0000;
    }
    
    .icon2 {
        background-color : #00FF00;
    }
    
    .icon3 {
        background-color : #0000FF;
    }
    
    .icon4 {
        background-color : #FFFF00;
    }
    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.

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Warsaw, Poland
    Posts
    38
    Vote Rating
    1
    Answers
    1
    sasklacz is on a distinguished road

      0  

    Default


    Thanks for the reply ! Just two more things - you've said that a card layout is used, but in your app definition there is a 'fit' layout defined. So what is the best way to go - use cards, and switch them when needed via main controller or use url's and controllers with routes specified ?
    Using ExtGantt / ExtScheduler from Bryntum ? I can help you integrate and implement it.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,656
    Vote Rating
    904
    Answers
    3575
    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


    Just depends what you need, by default it uses card layout but in my first reply I said you can change it so I wanted to show how to change it.
    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.

Thread Participants: 1

Tags for this Thread