ExtJS-UI组件-Panel

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处:https://www.cnblogs.com/cqpanda/p/16587500.html

更新记录
2023年1月2日 从笔记迁移到博客。

实例：工具栏#

use an arrow (->) to create an instance of the tbfill/Ext.toolbar.Fill class item.

Ext.create('Ext.panel.Panel', {
    title: 'Panel Header',
    dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Click me'
                }, 
                //对齐
                '->',
                //文本
                'Docked toolbar at the top'
            ]
        }
    ],
};

实例：配置多条工具栏#

dockedItems: [
    //第一条工具栏
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                text: 'Click me'
            },
            '->',
            'Docked toolbar at the top']
    },
    //第二条工具栏
    {
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
            {
                xtype: 'button',
                text: 'Click me'
            },
            '->',
            'Docked toolbar at the bottom'
        ]
    }
],

实例：底部工具栏#

fbar: [
    'Docked toolbar at the bottom (on footer)',
    {
        xtype: 'button',
        text: 'Click Me'
    }
],

实例：指定工具栏的位置#

//左侧工具栏
lbar: ['lbar'],
//右侧工具栏
rbar: ['rbar'],
//顶部工具栏
tbar: ['tbar'],
//底部工具栏
bbar: ['bbar'],