Ramal.Os itens do painel não estão a renderizar correctamente

Question

Ramal.Os itens do painel não estão a renderizar correctamente

declarei uma vista de navegação:

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'
        },

    ]
  }
});

e o painel da página inicial:

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

O meu problema é que a lista (item da página inicial {[[2]}) não está a renderizar, não sei exactamente porquê. Alguma ideia dos guru? Estou apenas a começar com sencha-touch e Ext.

0

javascript extjs sencha-touch

Author: Daniel Interliche, 2015-08-14

Source

1 answers

score 1 · Accepted Answer

Você tem alguns problemas com o seu painel de home page:

a secção "itens" está fora da "configuração"
o xtype da lista não está definido como 'list'

Falta ao Painel uma disposição

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