1

この質問はまったくばかげており、バグに遭遇した可能性がありますが、Sencha Touch のナビゲーション バーで検索フィールドを中央に配置する必要があるのですが、機能させることができません。これは私のコードです：

Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',

xtype: 'mynav',

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

config: {
    fullscreen: true,
        navigationBar: {
            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search...',
                    listeners: {
                        keyup: function(field) {

                        }
                    },
                    align: 'right'
                }
            ]
        },

    items: [ 
        {
            title: 'MyNav',
            xtype: 'list',
            fullscreen: true,
            grouped: true,


            store: {
                fields: ['name', 'html'],
                sorters: 'name',
                data: [
                    {name: 'Alfa', html: '<p>alfa</p>'},
                    {name: 'Beta', html: '<p>beta</p>'},
                    {name: 'Gamma', html: '<p>gamma</p>'},
                    {name: 'Mupp', html: '<p>mupp</p>'},
                    {name: 'Tupp', html: '<p>tupp</p>'}
                ],
                grouper: {
                groupFn: function(record) {
                    return record.get('name')[0];
                },
                indexBar: true
            },
            },

            listeners: {
                select: function(view, record) {
                    var test = Ext.create('Ext.Panel', {                        fullscreen: true,
                        title: record.get('name'),
                        layout: {
                            type:'vbox'
                        },
                        items: [
                            {
                                xtype: 'panel',
                                html: record.get('html')
                            }
                        ]
                    });

                    var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
                    mainnav.setActiveItem(test);
                }
            },

            itemTpl: '{name}'
        }
    ]
}

});

実際のナビゲーション バーに注目してください。他の部分はコードを貼り付けただけです (多少修正しました)。ただし、これはバグであると確信しています。

前もって感謝します！

4

4 に答える 4

2

検索フィールドを中央に配置して、ページの下部にドッキングされたツールバーを使用してみてください。理由はわかりませんが、ナビゲーション バーは中央のプロパティを無視します。

このようなもの：

config: {
    fullscreen: true,
    navigationBar: {

    },

    items: [ 
        {
            xtype: 'toolbar',
            docked: 'bottom',
            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search...',
                    listeners: {
                        keyup: function(field) {

                        }
                    },
                    centered: true
                }
            ],
        },
        {
            title: 'MyNav',
            xtype: 'list',

画面上部に検索フィールドが必要な場合は、ナビゲーション バーを非表示にして、ツールバーのプロパティhidden: trueを変更してみてください。docked

それが役に立てば幸い！

于 2012-04-14T18:13:31.393 に答える
1

ナビゲーションバーに追加したものを中央に配置するだけのより良い答え（私にとって）は次のとおりです。

this.getNavigationBar().leftBox.setCentered(true);

ただし、おそらく各ページのナビゲーション バーの中央揃えを管理したいと思うでしょう。

于 2013-03-24T00:03:50.360 に答える
0

目的のフィールドを中央に配置するのが難しい場合はいつでも、前後にスペーサーを追加し、中央に配置したいアイテムのフレックスと組み合わせて、失敗することはありません. この場合：

      items: [
            {
                xtype: 'spacer',
            },
            {
                xtype: 'searchfield',
                placeHolder: 'Search...',
                listeners: {
                    keyup: function(field) {

                    }
               flex: 0.7

             },
            {
                xtype: 'spacer',
            },
于 2013-10-29T17:48:11.020 に答える
0

使った

layout: {
    align: 'center',
    pack: 'center',
    type: 'hbox'
}

これは、docked: 'bottom' のすぐ下になります。行は上記の例です。

よろしく

ジャッコ

于 2013-03-21T00:17:03.383 に答える