1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default Answered: Trying to understand how to create a basic MVC tab panel app.

    Answered: Trying to understand how to create a basic MVC tab panel app.


    I need a very simple example of a MVC tab panel with three tabs. I looked at Kiva, KitchenSink, etc... and tried to create a simple app based on it called MyTest. The essential code for MyTest is below but it doesn't work. What am I doing wrong?

    Essentially, I want a main view which should contain a tab panel. The tab panel should contain three tabs which should be defined in three different view classes. i.e. a separate view class for each tab.

    app.js:

    Code:
    Ext.Loader.setConfig({ enabled: true });
    
    
    Ext.application({
        name: 'MyTest',
    
        controllers: ['MyController'],
    });
    controller/MyController.js:

    Code:
    Ext.define('MyTest.controller.MyController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
        },
    
    
        views : [
            'Main'
        ],
    
    
        stores: [
        ],
    
    
        refs: [
    
    
        ],
    
    
        init: function() {
            console.log('init:');
            this.getMainView().create();
    
    
        }
    });
    view/Main.js:
    Code:
    Ext.define('MyTest.view.Main', {
        extend: 'Ext.Container',
        requires: [
            'MyTest.view.MainTabs'
        ],
    
    
        config: {
            fullscreen: true,
            layout: 'fit',
            items: [
                {
                    xtype: 'maintabs'
                }
            ]
        }
    });
    view/MainTabs.js
    Code:
    Ext.define('MyTest.view.MainTabs', {
        extend: 'Ext.tab.Panel',
        xtype: 'maintabs',
    
    
            config: {
                activeTab: 0,
                layout: {
                    animation: {
                        type: 'slide',
                        duration: 250
                    }
                },
                tabBar: {
                    layout: {
                        pack : 'center',
                        align: 'center'
                    },
                    docked: 'bottom',
                    scrollable: {
                        direction: 'horizontal',
                        indicators: false
                    }
                },
                items: [
                    {
                        title    : 'First',
                        html     : '<p>one</p>',
                        iconCls  : 'info',
                        cls      : 'card card1'
                    },
                    {
                        title    : 'Second',
                        html     : '<p>two</p>',
                        iconCls  : 'favorites',
                        cls      : 'card card2',
                    }
                ]
            }
        });

  2. SOLVED. One of my problems was that I was testing using Firefox. It's now working.

  3. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    SOLVED. One of my problems was that I was testing using Firefox. It's now working.

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