EXT JS6学习笔记(五)
The fit Layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'fit',
bodyPadding: 20,
items: [{
title: 'Item 1',
html: 'Fills the container',
}]
});
});
2 The hbox layout（因为hbox布局和column布局非常相似，所以下面这段代码两种方式都有）
column布局在宽度超过父容器时会向下浮动，hbox则不会，读者可以自行比较
Ext.onReady(function() {
var win = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Column",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
}, {
xtype: 'panel',
title: 'Inner Panel Two'
}, {
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win.show()
var win2 = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Hbox",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
}, {
xtype: 'panel',
title: 'Inner Panel Two'
}, {
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win2.show()
});
3 The table layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [{
rowspan: 3,
title: 'Item 1',
html: 'Item 1'
}, {
title: 'Item 2',
html: 'Item 2'
}, {
title: 'Item 3',
rowspan: 3,
html: 'Item 3'
}, {
title: 'Item 4',
html: 'Item 4'
}, {
title: 'Item 5',
html: 'Item 5'
}, {
title: 'Item 6',
html: 'Item 6'
}, {
title: 'Item 7',
html: 'Item 7'
}]
});
});