固定搜索栏,手风琴布局 - EXT JS4

时间:2013-01-15 20:11:09

标签: javascript extjs extjs4 accordion

我需要在菜单栏的顶部有一个固定的搜索栏。这就是我到目前为止所做的:

Ext.define('Cam.view.menu.LeftSidebar', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.leftsidebar',
    views: 'Cam.view.menu.Search',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:0px;'
    },
    layout: {
        // layout-specific configs go here
        type: 'accordion',
        titleCollapse: true,
        animate: true,
        activeOnTop: true
    },
    title: _SIDEBAR_LEFT_TITLE,
    items: [
    {
        title: 'Menu Search',
        items: [{xtype: 'menusearch'
                }]
    },
    {
        title: _SIDEBAR_LEFT_PREVIOUS,
        xtype: 'menuhistory',
        itemId: 'menuhistory'
    },
    {
        title: 'Menu',
        items: [{xtype: 'screenmenu'}]
    }]
});

到目前为止,它崩溃了我想要的方式但是 xtype:'menusearch'是我想要修复的顶部。 和 xtype:'menuhistory'是活动的。

对此有何帮助?

1 个答案:

答案 0 :(得分:0)

你可以这样做:

Ext.require('*');

Ext.onReady(function() {

    Ext.create('Ext.panel.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Search'
        }, {
            flex: 1,
            xtype: 'container',
            layout: 'accordion',
            items: [{
                title: 'Item 1',
                html: 'I1'
            }, {
                title: 'Item 2',
                html: 'I2'
            }, {
                title: 'Item 3',
                html: 'I3'
            }]
        }]
    });

});