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

我的问题是列表（homePage Ext.Panel的项目）没有渲染，我不确切知道为什么。来自大师的任何想法？我刚开始使用sencha-touch和Ext。

Answer 1

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

＆＃39;＆＃39;部分在＆＃39; config＆＃39;
列表的xtype未设置为＆＃39; list＆＃39;

面板缺少布局

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项目无法正确呈现

1 个答案: