ExtJs布局中，控件如何水平居中

最新推荐文章于 2021-06-22 01:55:33 发布

原创最新推荐文章于 2021-06-22 01:55:33 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一种使用ExtJS框架进行网格头部布局的具体实践，包括如何创建面板、设置布局属性以及添加按钮组件等关键步骤。通过代码示例，展示了如何实现标准查询、高级查询和浏览统计图等功能。

如此即可，有图有代码有j8:

这里写图片描述

var formGridHead = Ext.create('Ext.form.Panel', {        id: 'MyGridHead',        region: 'north',        bodyPadding: 10,        bodyStyle: 'background:#fff',        split: false,        header: false,        collapsible: true,        items: [                { xtype: 'panel'                , border: false                , layout: {                    type: 'vbox',                    align: 'center'                }, width: '100%', items: [                {                    xtype: 'fieldcontainer'                    , layout: 'column'                    , items: [{    xtype: 'button',    text: '<span class="hydg_btn">标准查询</span>',    scale: 'medium',    id: 'btnSearchOption',    listeners: {        click: {    }}}, { html: '', border: false, width: 30 }, {    xtype: 'button',    text: '<span class="hydg_btn">高级查询</span>',    scale: 'medium',    id: 'btnSearchOptionPower',    listeners: {        click: {    }}}, { html: '', border: false, width: 30 }                        , {                            xtype: 'button',                            text: '<span class="hydg_btn">浏览统计图</span>',                            scale: 'medium',                            id: 'btnViewTongji',                            listeners: {                                click: {                            }                        }                    }                        ]                }                    ]                }            ]    });1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

其中重点在于：

, layout: {                    type: 'vbox',                    align: 'center'                }, width: '100%',1
2
3
4