ext panel

发布网友发布时间：2022-04-24 19:23

共2个回答

热心网友时间：2022-04-24 20:52

用viewport吧，给你个例子，一看就知道了：
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'south',
contentEl: 'south',
split:true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'South',
margins:'0 0 0 0'
}, {
region:'east',
title: 'East Side',
collapsible: true,
split:true,
width: 225,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:1,
tabPosition:'bottom',
items:[{
html:'<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll:true
},
new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"proctionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
}
})]
})
},{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Navigation',
border:false,
iconCls:'nav'
},{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
}]
})
]
});
Ext.get("hideit").on('click', function() {
var w = Ext.getCmp('west-panel');
w.collapsed ? w.expand() : w.collapse();
});
});

热心网友时间：2022-04-24 22:10

这样做麻烦，标准做法应该使用布局 viewport 将你的2个formpanel放入
一个region部为north就是北部
一个region为center.
部好后 Ext自动就有按钮可以收缩两个formpanel
而且自己也可以随意写代码去收缩而不需要去向你之前那样去修改大小。

简单的话就是找到你formpanel的DIV，ext里面所有的组件都是Div 用div里面
style="display:none" 这样试试吧传统的html都是这样实现收缩功能
但因为这个比较不规范 Ext里面所以我没试过