Extjs布局 - 爱码网

今天我来总结一下extjs下面的各种布局，不仅是为了给自己做笔记，同时，也希望让刚刚接触extjs的朋友们快速的了解下，大神就不用看了。废话不多说，开始布局的讲解。

（以下代码都可以直接在javascript中直接复制使用，希望大家能够较好的使用学习。）

1.auto布局使用（默认布局）就是自动排版没有任何的设定几乎很少使用到

Ext.onReady(function () {
    //设置提示消息的显示方式 
    var panel1 = Ext.create('Ext.panel.Panel', {
title : 'panel1',
html : 'panel1ddd',
height : 80,
width : 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title : 'panel2',
html : 'panel2ffff',
height : 80,
width : 100
});
var panel3 = Ext.create('Ext.panel.Panel', {
title : 'panel3',
html : 'panel3yyyy',
height : 80,
width : 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title : 'panel4',
html : 'panel4GGG',
height : 80,
width : 100
});
var auto = Ext.create('Ext.window.Window', {
title : 'auto Layout',
width : 100,
height : 420,
layout : 'auto',
defaults : {
bodyStyle : 'padding:15px'
},
items : [panel1, panel2, panel3, panel4]
});
auto.show();

});

View Code