0

煎茶タッチ初心者です。私はいくつかの奇妙な行動に出くわします。まもなく、ツールバーと以下のリストを備えた1つのウィンドウを作成したいと思います。

メインの起動コード:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'xxx',

    controllers: ['Main'],
    views: ['Home', 'Header', 'Footer', 'list.MainMenu'],
    stores: ['MainMenu'],
    models: ['MenuItem'],


    launch: function() {
        Ext.create('xxx.view.Viewport');
    }
});

ビューポート ビュー:

Ext.define('xxx.view.Viewport', {
    extend: 'Ext.Panel',

    config: {
        fullscreen: true,

        items: [
            {
                xtype: 'headerpanel',
            },{
                xtype: 'MainMenu'
            }
        ]
    }
});

ヘッダー ビュー:

Ext.define('xxx.view.Header', {
    extend: Ext.Panel,
    xtype: 'headerpanel',

    config: {               
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [
                    {
                        text: 'One',
                        align: 'left'
                    },{
                        text: 'Two',
                        align: 'right'
                    }
                ]
            }
        ]
    }
});

メニュービュー：

Ext.define('xxx.view.list.MainMenu', {
    extend: 'Ext.List',
    xtype: 'MainMenu',

    requires: ['xxx.store.MainMenu'],

    config: {
        itemTpl: '{title}',
        store: 'MainMenu'       
    }
});

メニューストア:

Ext.define('xxx.store.MainMenu', {
    extend: 'Ext.data.Store',

    config: {
        model: 'xxx.model.MenuItem',
        data: [
            {icon: 'a', title: 'A'},
            {icon: 'b', title: 'B'},
        ]
    }
});

メニューモデル：

Ext.define('xxx.model.MenuItem', {
    extend: 'Ext.data.Model',   

    config: {
        fields: ['icon', 'title']
    }
});

この部分コードの結果は、リストのないツールバーだけです。

ここに画像の説明を入力

レイアウトを「フィット」値に設定すると、結果は逆になります。リストのみが表示されます。

ここに画像の説明を入力

4

1 に答える 1

4

ビューポート ビューにレイアウトを設定するのを忘れました。レイアウトがないと、コンテナは内部アイテムを表示する方法を知りません。

以下を試してください：

Ext.define('xxx.view.Viewport', {
    extend: 'Ext.Panel',

    config: {
        fullscreen: true,
        layout:'fit',
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [{
                    text: 'One',
                    align: 'left'
                },{
                    text: 'Two',
                    align: 'right'
                }]
            },{
                xtype: 'list',
                itemTpl: '{title}',
                store: 'MainMenu' 
            }
        ]
    }
});

レイアウトについて詳しくはこちら

于 2012-11-21T17:55:34.777 に答える