Sencha Touch Настроить панель навигации в режиме навигации - PullRequest
Новая
       12

Sencha Touch Настроить панель навигации в режиме навигации

2 голосов
/ 03 апреля 2012

Я делаю простое приложение, которое имеет навигационное представление для содержания списка, когда вы нажимаете список, я хочу показать некоторый HTML или что-то, но «новое» окно, чтобы я мог воспользоваться кнопкой «Назад» напанель навигации.

Моя проблема сейчас в том, что мне нужно поле поиска на панели навигации, для начального показа проблема в том, что я не понимаю, как изменить панель навигации, чтобы она получала панель поиска.Вот мой код: 

Ext.define('AppName.view.MainNav', {
extend: 'Ext.navigation.View',

xtype: 'mainnav',

requires: [
    'Ext.field.Search', 'Ext.TitleBar'
],

config: {
    fullscreen: true,
    items: [
        {
        navigationBar: {
            xtype: 'titlebar',
            items: [
                { xtype: 'spacer' },
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search...',

                    }
                },
                { xtype: 'spacer' }
            ]
        },

        xtype: 'list',
        fullscreen: true,

        store: {
            fields: ['name', 'number'],
            sorters: 'name',
            data: [
                {name: 'bla', number: 0},
                {name: 'blo', number: 1},
                {name: 'bliblo', number: 2},
                {name: 'Bliblablo', number: 3},
                {name: 'bliboasdas', number: 4},
            ]
        },

        itemTpl: '{name}'
        }
    ]
}

});

Теперь на панели навигации нет поля поиска, оно просто пустое.Как мне исправить?Заранее спасибо!

1 Ответ

5 голосов
/ 04 апреля 2012

Конфигурация navigationBar должна быть внутри тега config, у меня работает этот код: 

Ext.define('AppName.view.MainNav', {
extend: 'Ext.navigation.View',

xtype: 'mainnav',

requires: ['Ext.field.Search', 'Ext.TitleBar'],

config: {
    fullscreen: true,

    navigationBar: {
        items: [
            {
                xtype: 'searchfield',
                placeHolder: 'Search...',
                align: 'right'
            }
        ]
    },
    items: [
        {
            xtype: 'panel',
            html: 'test'
        },
        {
            xtype: 'list',
            fullscreen: true,

            store: {
                fields: ['name', 'number'],
                sorters: 'name',
                data: [
                    {name: 'bla', number: 0},
                    {name: 'blo', number: 1},
                    {name: 'bliblo', number: 2},
                    {name: 'Bliblablo', number: 3},
                    {name: 'bliboasdas', number: 4},
                ]
            },

            itemTpl: '{name}'
        }
    ]
}
});
...