Ext.Panel 项未正确呈现

Question

我声明了一个导航视图：

Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
alias: 'widget.mainNavigationView',

requires: [
    'Ext.TitleBar',
    'MyApp.view.Home'
],
config: {
    tabBarPosition: 'top',
    navigationBar: {
        id: 'mainNavBar',
        ui: 'dark',
        items: [{
            xtype: 'button',
            id: 'logoutUser',
            text: 'Logout',
            align: 'right',
            hideAnimation: Ext.os.is.Android ? false : {
                type: 'fadeOut',
                duration: 200
            },
            showAnimation: Ext.os.is.Android ? false : {
                type: 'fadeIn',
                duration: 200
            }
        }]
    },

    items: [
        {
            xtype: 'homePage'
        },

    ]
  }
});

以及主页面板：

Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',

config: {
    title: 'Menu Principal',
},

items: [
    {
        store: {
            fields: ['listItem'],
            data: [
                {listItem: 'Item 1'},
                {listItem: 'Item 2'},
                {listItem: 'Item 3'},
                {listItem: 'Item 4'}
            ]
        },

        itemTpl: '{listItem}'
    }
  ],
});

我的问题是列表（主页 Ext.Panel 的项目）没有呈现，我不知道具体原因。大师们有什么想法吗？我只是从 sencha-touch 和 Ext.

开始

Answer 1

您的主页面板存在一些问题：

'items' 部分在 'config'
列表的xtype没有设置为'list'

面板缺少布局

Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',

config: {
    title: 'Menu Principal',
    layout: 'fit',
    items: [
    {
        xtype: 'list',
        store: {
            fields: ['listItem'],
            data: [
                {listItem: 'Item 1'},
                {listItem: 'Item 2'},
                {listItem: 'Item 3'},
                {listItem: 'Item 4'}
            ]
        },

        itemTpl: '{listItem}'
    }
  ]
}
});

Ext.Panel 项未正确呈现

Ext.Panel items is not rendering properly

javascript

extjs

sencha-touch