それぞれ3000px
にflex:1
.
トップコンテナを横スクロール可能にしました。ただし、右にドラッグすると、3 番目のボックス (単語 3) が表示されますが、離すとウィンドウが元に戻ります。
Sencha Fiddleをリリースした後も、右側のコンテンツを表示したままにしておきたいです。
ソース:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: "Sencha",
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
width: 3000,
scrollable: {
direction: 'horizontal'
},
items: [{
xtype: 'panel',
layout: 'vbox',
flex: 1,
items: [{
html: "vb1",
flex: 1
}, {
html: "vb2",
flex: 1
}]
}, {
html: "two",
flex: 1
}, {
html: 'three',
flex: 1
}],
iconCls: 'home'
}]
});
Ext.Viewport.add(tabPanel);
}
});