Extjs 關於layout幾種類型的小結

 

1.absolute 在容器中定位顯示

Ext.create('Ext.form.Panel', {
    title: 'Absolute Layout',
    width: 300,
    height: 275,
    layout: {
        type: 'absolute'
        // layout-specific configs go here
        //itemCls: 'x-abs-layout-item',
    },
    url:'save-form.php',
    defaultType: 'textfield',
    items: [{
        x: 10,
        y: 10,
        xtype:'label',
        text: 'Send To:'
    },{
        x: 80,
        y: 10,
        name: 'to',
        anchor:'90%'  // anchor width by percentage
    },{
        x: 10,
        y: 40,
        xtype:'label',
        text: 'Subject:'
    },{
        x: 80,
        y: 40,
        name: 'subject',
        anchor: '90%'  // anchor width by percentage
    },{
        x:0,
        y: 80,
        xtype: 'textareafield',
        name: 'msg',
        anchor: '100% 100%'  // anchor width and height
    }],
    renderTo: Ext.getBody()
});

　　

2.accordion  手風琴效果

 {
                            minHeight:250,
                            layout: {
                                type: 'accordion',
                                animate:true
                            },
                            tabBar: {
                                border: false
                            },
                            title: "推薦信和附件",
                            name:'refLetterAndAttachment',
                            items:[
                                {
                                    title: "推薦信",
                                    xtype: 'grid'
                                },
                                {
                                    title:"附件",
                                    xtype: 'grid',
                                    columnLines: true,
                                    name: 'fileGrid',
                                    reference: 'fileGrid',
                                    dockedItems:[{
                                        xtype:"toolbar",
                                        items:[
                                            {text:"上傳附件",iconCls:"upload",handler: "uploadFiles"}
                                        ]
                                    }],
                                    store: {
                                        type: 'uploadFilesStore'
                                    },
                                    plugins: {
                                        ptype: 'cellediting',
                                        pluginId: 'attachmentCellEditing',
                                        clicksToEdit: 1
                                    },
                                    
                                    store: {
                                        type: 'fileStore'
                                    },
                                    columns: [{
                                        text: "附件名稱",
                                        dataIndex: 'TZ_XXX_MC',
                                        minWidth:425
                                    },{
                                        text: "查看附件",
                                        dataIndex: 'fileLinkName',
                                        minWidth:  200,
                                        flex: 1,
                                        renderer: function(value,metadata,record) {
                                            var strFile = record.get('strfileDate');
                                            return strFile;
                                        }
                                    },{
                                        menuDisabled: true,
                                        sortable: false,
                                        width:60,
                                        xtype: 'actioncolumn',
                                        text: '操作',
                                        align: 'center',
                                        items:[
                                            {iconCls: 'remove',tooltip:"刪除", handler: 'deleteFiles'}
                                        ]
                                    }
                                    ]
                                }
                            ]
                        }

3.anchor

anchor布局可以讓子元素更好的適應容器的大小，當容器大小發生改變時，anchor布局的元素會根據已定的規律改變大小尺寸。

Ext.create('Ext.Panel', {
    width: 500,
    height: 400,
    title: "AnchorLayout Panel",
    layout: 'anchor',
    renderTo: Ext.getBody(),
    items: [
        {
            xtype: 'panel',
            title: '75% Width and 20% Height',
            anchor: '75% 20%'
        },
        {
            xtype: 'panel',
            title: 'Offset -300 Width & -200 Height',
            anchor: '-300 -200'
        },
        {
            xtype: 'panel',
            title: 'Mixed Offset and Percent',
            anchor: '-250 20%'
        }
    ]
});

4.boder將容器分為east,sorth,west,north,center

Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margin: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margin: '5 5 0 0'
}],

6.column  將容器看成一列，然后想容器中放入子元素

{
layout: {
type: 'column'
},
items:[{
columnWidth:.5,
xtype: 'textfield',
fieldLabel: "面試評審成績模型",
name: 'msps_cj_modal',
editable: false,
triggers: {
search: {
cls: 'x-form-search-trigger',
handler: "choiceScoreModal"
},
clear: {
cls: 'x-form-clear-trigger',
handler: function(field){
field.setValue();
field.findParentByType('form').getForm().findField('msps_cj_modal_desc').setValue();
}
}
}
},{
columnWidth:.5,
xtype: 'displayfield',
hideLabel: true,
name: 'msps_cj_modal_desc',
style:'margin-left:8px'
}]
}

 

 7.form 是一種專門用於管理表單中輸入字段的布局

8.table 按照普通表格方法布局子元素，用layoutConfig:{column:3}//將父容器分成三列

layout: {
type: 'table',
columns:2
},

9.vbox 垂直布局，子元素水平拉伸

10 hbox 水平布局，垂直拉伸

 

 

注：參考 http://docs.sencha.com/extjs/6.0.2/classic/Ext.enums.Layout.html