0
我有3个extJs窗口。每个都有一些表单控件，然后有两个显示图表的选项卡。目前所有窗口都出现在同一个地方，我必须拖动它们才能使它们像这样连续排列| | | 。我如何在屏幕上创建3列，并将每个窗口放在其中一个窗口中。请找到下面一个窗口的代码。是的，我已经看到这个链接 http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html但它不帮助我的事业。如果我创建3个列布局，如链接中提到的内容，则不会显示任何内容。请假定所有的窗口都有相同的代码并提供一种方法。还有一件事，我可以关闭，并在所有的窗口最大化功能。谢谢。extJs列布局问题
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function() {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100/100);
Ext.getCmp("gridChart1").setWidth(this.width * 100/100);
Ext.getCmp("gridChart1").setWidth(this.width * 100/100);
Ext.getCmp("gridChart1").setWidth(this.width * 100/100);
}
}
});
你如何结合你的窗户？你把它们放进某种容器吗？ – sha 2012-03-20 14:10:43
我试图这样做http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html – dev 2012-03-20 15:48:08
但是该示例布局面板不是windows。你正在尝试布置窗口。这就是为什么我问你把窗户放在哪里？我不认为你可以使用窗口而不是面板。 – sha 2012-03-20 15:50:08