Question

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

http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/

在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');
        }
    });

}

Answer 1

不一定要创建单独的app.js文件，使用现有的main.js文件就足够了。

如果要在应用程序中包含sencha插件，则必须在main.js文件中设置加载器路径，如下所示：

Ext.Loader.setPath({
      'Ext.ux':'ux'
});

Answer 2

没有必要使用app.js.您只能编辑main.js并添加medels，控制器和视图。

以下是代码：

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' },
            ]);
        }
    });

}

希望有所帮助

Answer 3

如果要在main.js中使用App.js的内容，则必须在HTML文件中的main.js之前加载app.js，因此请确保顺序正确。如果它说Ext未定义，那可能是因为你有＆lt; script＆gt;用于在App.js之前加载main.js的标记，所以如果是这种情况，请切换它们。

使用Sencha Touch 2和Ibm Worklight滑动导航

3 个答案: