extjs - 煎茶触摸列表

Question

我是煎茶的新手。我遇到了一些奇怪的行为。不久我想用工具栏和下面的列表制作一个窗口。

主要启动代码：

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

这段代码的结果只是没有任何列表的工具栏。

我将布局设置为“适合”值，结果相反：只有我能看到的列表。

Answer 1

您忘记为您的视口视图设置布局。没有布局，容器不知道如何显示内部项目。

尝试以下操作：

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

您可以在此处找到有关布局的更多信息