EXT JS6学习笔记(四)
The card layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'card',
defaultListenerScope: true,
bbar: ['->', {
itemId: 'btn-prev',
text: 'Previous',
handler: 'showPrevious',
disabled: true
}, {
itemId: 'btn-next',
text: 'Next',
handler: 'showNext'
}],
items: [{
index: 0,
title: 'Item 1',
html: 'Item 1'
}, {
index: 1,
title: 'Item 2',
html: 'Item 2'
}, {
index: 2,
title: 'Item 3',
html: 'Item 3'
}],
showNext: function() {
this.navigate(1);
},
showPrevious: function() {
this.navigate(-1);
},
navigate: function(incr) {
var layout = this.getLayout();
var index = layout.activeItem.index + incr;
layout.setActiveItem(index);
this.down('#btn-prev').setDisabled(index === 0);
this.down('#btn-next').setDisabled(index === 2);
}
});
});
2 The column layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'column',
items: [{
xtype: 'panel',
title: 'Panel 1',
columnWidth: 0.4,
height: 400,
}, {
xtype: 'panel',
title: 'Panel 2',
columnWidth: 0.6,
height: 400,
}, {
xtype: 'panel',
title: 'Panel 3',
width: 150,
height: 400,
}]
});
});
3 The center layout
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 700,
height: 400,
layout: 'center',
items: [{
xtype: 'button',
text:'button',
}]
});
});