admin管理员组

文章数量:1403522

I'm doing a simple app which has a navigation view for containing a list, when you press the list I wanna show some HTML or something, but a "new" window so I can take advantage of the back-button on the navigationbar.

My problem now is that I need a search field on the navigationbar, for the inital showing, the problem is that I don't understand how to modify the navigationbar so it gets a search bar. Here's my code:

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

});

There is now No search field on the navigationbar, it's just empty. How do I fix? Thanks in advance!

I'm doing a simple app which has a navigation view for containing a list, when you press the list I wanna show some HTML or something, but a "new" window so I can take advantage of the back-button on the navigationbar.

My problem now is that I need a search field on the navigationbar, for the inital showing, the problem is that I don't understand how to modify the navigationbar so it gets a search bar. Here's my code:

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

});

There is now No search field on the navigationbar, it's just empty. How do I fix? Thanks in advance!

  • javascript
  • html
  • sencha-touch
  • navigationbar
Share Improve this question asked Apr 3, 2012 at 14:04 Johan SJohan S 3,5916 gold badges36 silver badges64 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

The navigationBar configuration must be inside the config tag, this code works for me:

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

本文标签： javascriptSencha Touch Customize Navigation Bar in navigation viewStack Overflow

版权声明：本文标题：javascript - Sencha Touch Customize Navigation Bar in navigation view - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744421500a2605477.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。