3

私はSenchaTouchV2ベータ版を実行していて、最新のドキュメントを見ています。

指示に従いExt.application、MVCアプリケーションを適切にレイアウトしようとしています。残念ながら、このアプローチで実際にビューをロードする方法がわかりません。

index.js

Ext.application({

    name: 'rpc',
    defaultUrl: 'home/index',
    controllers: ['home'], //note: define controllers here
    launch: function () {

        console.log('Ext.application ~ launch'),

        Ext.create('Ext.TabPanel', {
            id: 'rpc-rootPanel',
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [{
                title: 'Home',
                iconCls: 'home'
            }]
        });

        Ext.create('Ext.viewport.Viewport', {
            id:'rpc-rootPanel',
            fullscreen: true,
            layout: 'card',
            cardSwitchAnimation: 'slide'
        });

    }
});

homeController.js

Ext.define('rpc.controller.home', {
    extend: 'Ext.app.Controller',
    views: ['home.index'],
    stores: [],
    refs: [],
    init: function () {
        console.log('rpc.controller.home ~ init');
    },

    index: function () {
        console.log('rpc.controller.home ~ index');
    }
});

indexView.js

Ext.define('rpc.view.home.index', {
    extend: 'Ext.Panel',
    id: 'rpc-view-home-index',
    config: {
        fullscreen: true,
        layout: 'vbox',
        items: [{
            xtype: 'button',
            text: 'Videos',
            handler: function () {
            }
        }],
        html:'test'
    }
});

あなたが提供できるかもしれないどんな助けでも大いに感謝されるでしょう。

4

2 に答える 2

5

新しいリリースは、ExtJS 4で導入されたMVCの概念に従います。SenchaTouchは同じアーチに従うため、アーキテクチャガイドを読む必要があります。フォルダ構造は次のとおりです。

SenchaTouch2アプリケーションのフォルダー構造

アプリケーションの開発中は、htmlでsencha-touch-all-debug-w-comments.jsを使用する必要があります。これは、アプリケーションのデバッグに役立ちます。

アプリケーションクラスは次のとおりです。

Ext.Loader.setConfig({enabled: true});
Ext.application({
    name: 'rpc',
    appFolder: 'app',           
    controllers: ['Home'],
    launch: function () {

        Ext.create('Ext.tab.Panel',{
            fullscreen: true,           
            tabBarPosition: 'bottom',
            items:[{
                title: 'Home',
                iconCls: 'home',
                html: '<img src="http://staging.sencha.com/img/sencha.png" />'
            },{
                title: 'Compose',
                iconCls: 'compose',
                xtype: 'homepage'
            }]          
        });     
    }
});

エイリアス（xtype：'homepage'）を使用してホームページビューをどのように含めたかに注意してください。

コントローラは次のとおりです。

Ext.define('rpc.controller.Home', {
    extend: 'Ext.app.Controller',
    views: ['home.HomePage'],
    init: function() {    

        console.log('Home controller init method...');
    }    
});

そして最後に、私のホームページビュー：

Ext.define('rpc.view.home.HomePage', {
    extend: 'Ext.Panel',    
    alias: 'widget.homepage',
    config: {               
        html: '<img src="http://staging.sencha.com/img/sencha.png" />'
    },
    initialize: function() {
        console.log("InitComponent for homepage");      
        this.callParent();  
    }       
});

エイリアスプロパティは、必要に応じてクラスのインスタンスをインスタンス化するために使用されます。Ext.createメソッドを使用することもできます。

これがSenchaTouchの使用を開始するのに役立つことを願っています。

于 2011-10-19T11:57:45.050 に答える
0

アブデルによる素晴らしい答え。

この回答に示されているように、プロファイルを介してそれを行うこともできます： Sencha Touch2.0MVCチュートリアル

于 2012-02-12T07:51:06.637 に答える