EXTJS布局方式

1.EXTJS fieldcontainer

常用来组合多个form组件，常用的有组合CheckBox，radio单选等，或者多个文本框的组合，遇到两个小组件合并一起的时候我常用该容器来存放，layout：hbox、vbox两种方式足够用了，不建议用table，本来就是个轻量化的东西，如下图

2.EXTJS container

跟panel比起来没有头信息，就是一个容器，我一般用在页面某一块的组合中

3.EXTJS  fieldset 

一般作为父级容器使用，头部信息跟panel不一样

4.EXTJS  panel

面板，这个比较重，一般作为页面某一大块的父级容器，要善用它的tbar，这样能更好的组合出页面

 

下面贴张图，大家可以看下，个人布局做的比较菜，所以记录个笔记，方便自己翻阅，也希望能给大家提供个帮助。

整个页面父级容器是panel，默认布局是vbox，申请开票的进度条是我用html画的，累死了，最终弄成一个控件放这里了。

最后贴上代码仅供参考

Ext.define('xxx.xxxx.xxxx.searchInvoice.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'searchInvoice-main',
    requires: [
        'xxx.xxx.invoice.searchInvoice.HeadView',
        'xxx.xxx.invoice.searchInvoice.MainController',
        'xxx.xxx.invoice.searchInvoice.MainModel',
        'xxx.xxx.invoice.searchInvoice.listView',
        'views.view.invoice.searchInvoice.tipView'
    ],
    controller: 'searchInvoice-main',
    viewModel: 'searchInvoice-main',
    tbar: [
        {
            xtype: 'label',
            html: '<span style="font-size: 18px ;font-weight: bold">&nbsp;&nbsp;&nbsp;&nbsp;申请内容</span>'
        },
        '->',
        {xtype: 'button', text: '返回', handler: 'onBack'}
    ],
    items: [
        {
            xtype: 'panel',
            // 上面最大的框
            style: {
                borderColor: '#999999', borderStyle: 'solid', borderWidth: '1px',
                borderRadius: '5px'
            },
            margin: '0 20 20 20',
            padding: '0 10 0 10',
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    border: true,
                    padding: '5 5 10 0',
                    items: [
                        {
                            padding: '5 0 0 20',
                            xtype: 'searchInvoice-HeadView'
                        },
                        '->',
                        {
                            xtype: 'button',
                            text: '撤回'
                        }
                    ]
                },
                {
                    xtype: 'label',
                    html: '<hr/>'
                }
            ],
            layout: {
                type: 'table',
                columns: 4
            },
            defaults: {
                labelAlign: 'right',
                labelWidth: 150,
                width: 300
            },
            items: [
                {
                    xtype: 'displayfield',
                    fieldLabel: '开票信息',
                    fieldStyle: 'color:#006CB8',
                    reference: 'ticketInfo',
                    value: 'RJZ180010010101010'
                },
                {
                    xtype: 'fieldcontainer',
                    width: 70,
                    padding: '0 0 10 0',
                    items: [
                        {
                            xtype: 'weizhi-button-text',
                            style: 'border: 1px solid #006CB8;color: #006CB8;',
                            width: 70,
                            text: '复制',
                            handler: 'onCopy'
                        }
                    ]
                },

                {
                    xtype: 'label',
                    html: '<input id ="hideCopy" type="text" style="width: 1px;border: none;color: white"/>',
                    reference: 'copyText',
                },
                {
                    xtype: 'label'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '开票单位',
                    width: 350,
                    value: 'xxxxxxxxxxxxxxxxxx'
                },
                {
                    xtype: 'displayfield',
                    labelWidth: 100,
                    width: 250,
                    fieldLabel: '发票类别',
                    value: '增值税专票'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '全额/差额',
                    value: '全额'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '票款方式',
                    value: '先款后票'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '受票单位名称',
                    width: 350,
                    value: 'xxxxxxxxxx有限公司'
                },
                {
                    xtype: 'displayfield',
                    labelWidth: 100,
                    width: 250,
                    fieldLabel: '受票单位电话',
                    value: '1399999999'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '受票单位开户行',
                    value: '招商银行（上海支行）'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '受票单位账号',
                    value: '4565446412313'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '受票单位纳税人识别号',
                    value: 'xxxxxxxxx02'
                },
                {
                    xtype: 'displayfield',
                    labelWidth: 100,
                    width: 250,
                    fieldLabel: '账单月',
                    value: '201810'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '合并开票',
                    value: '合并'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '申请人',
                    value: 'xxxxxx'
                },
                {
                    xtype: 'displayfield',
                    fieldLabel: '费用总额',
                    value: '91214.23'
                },
                {
                    xtype: 'displayfield',
                    labelWidth: 100,
                    width: 250,
                    fieldLabel: '客户类型',
                    value: '直客'
                }
            ]
        },
        {
            // 申请信息的框
            xtype: 'panel',
            // 上面最大的框
            style: {
                borderColor: '#999999', borderStyle: 'solid', borderWidth: '1px',
                borderRadius: '5px'
            },
            margin: '0 20 0 20',
            padding: '10 10 0 10',
            dockedItems: [
                {
                    xtype: 'label',
                    html: '<span style="font-size: 18px ;font-weight: bold">&nbsp;&nbsp;&nbsp;&nbsp;申请信息</span>'
                },
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    padding: '5 5 10 0',
                    defaults: {
                        labelAlign: 'right',
                        labelWidth: 100,
                        width: 400
                    },
                    items: [
                        {
                            xtype: 'textfield',
                            readOnly:true,
                            fieldLabel: '对应到款金额'
                        },
                        {
                            xtype: 'textfield',
                            width: 700,
                            fieldLabel: '到款编号'
                        }
                    ]
                },
                {
                    xtype: 'label',
                    html: '<hr/>'
                }
            ],
            items: [
                {
                    xtype: 'searchInvoice-listView'
                },
                {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    margin: '20 0 0 0',
                    items: [
                        {
                            xtype: 'label',
                            padding: '7 0 0 0',
                            html: '<font color="006CB8">开票附件:</font>',
                        },
                        {
                            xtype: 'weizhi-button-textlink',
                            style: 'color: #006CB8;',
                            padding: '7 0 0 0',
                            width: 150,
                            text: 'xxx的文件.xls',
                            handler: 'onDownload'
                        },
                        ,
                        {
                            xtype: 'fieldcontainer',
                            width: 100,
                            padding: '0 0 10 0',
                            items: [
                                {
                                    xtype: 'weizhi-button-text',
                                    style: 'border: 1px solid #006CB8;color: #006CB8;',
                                    width: 100,
                                    text: '点此下载',
                                    handler: 'onDownload'
                                }
                            ]
                        }
                    ]
                },
                {
                    xtype: 'textfield',
                    width: 1110,
                    fieldLabel: '客服备注'
                }
            ]
        }
    ]
});