Extjs 使用Sencha Touch 2和Ibm Worklight进行幻灯片导航

我正在使用本教程使用sencha touch创建幻灯片导航

在ibm worklight中实现此功能时，我不知道如何在worklight中使用app.js

app.js：

Ext.application({
    name: 'SlideNav',

    requires: [
        'Ext.MessageBox'
    ],

    views: [
                                'Viewport',
        'Main',
                                'Navigation'
    ],

                controllers : ['App'],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('SlideNav.view.Viewport'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

在worklight上，我们有一个用于启动应用程序的主文件：

main.js：

window.$ = WLJQ;

function wlCommonInit(){
    initializeSenchaApp();
}

function initializeSenchaApp(){
    WL.Logger.debug("Initializing Sencha Touch code");

    Ext.application({
        name: 'Ersal',
        views: ['Login','Home'],
        controllers: ['Login'],

        launch: function () {

            Ext.Viewport.add([
                { xtype: 'loginview' },
                { xtype: 'mainmenuview' }
            ]);
            //Ext.create('Ersal.view.Login');
        }
    });

}

---

如果你想在main.js中使用App.js的内容，你必须在HTML文件中加载App.js，然后再加载main.js，所以要确保顺序正确。如果它说Ext是未定义的，可能是因为在App.js之前有加载main.js的标记，因此如果是这样，请将其切换。

不一定要创建单独的

App.js

文件，使用现有的

main.js

文件就足够了

如果要在应用程序中包含sencha插件，必须在

main.js

文件中设置加载程序路径，如下所示：

Ext.Loader.setPath({
“Ext.ux”：“ux”
});

无需使用app.js。您只能编辑main.js并添加模型、控制器和视图

代码如下：

function wlCommonInit(){
    initializeSenchaApp();
}

function initializeSenchaApp(){
    WL.Logger.debug("Initializing Sencha Touch code");

    Ext.application({
        name: 'YouApp',
        requires: ['Ext.Menu', 'YouApp.components.MenuButton'],
        views: ['Home'],
        models: ['Movie'],
        controllers: ['Home'],

        launch: function () {
            Ext.getBody().removeCls('loading');

            Ext.Viewport.add([
                { xtype: 'mainmenuview' },
            ]);
        }
    });

}

希望有帮助