Extjs 弹出的 window 内容自动适应填充

Question

var winViewProjectInfo = new Ext.Window({ title: '查看项目信息', width: 700, autoScroll: false, modal: true, resizable: true, closeAction: 'destroy', plain: true, maxHeight: popWinMaxHeight, buttonAlign: 'right', maximizable: true, border: false, items: [ { title: '变更记录', rtl: false, border: false, loader: { url: webUrl + 'project.php?c=project&m=viewProjectSCR&id=' + record.data['ID'], contentType: 'html', scripts: true }, listeners: { activate: function (tab) { tab.loader.load(); }, deactivate: function () { } } } ] } ] });

请问 在我点击 最大化后 怎样让里面的 内容 跟着 自动适应整个窗口？在线等答案 谢谢各位。

Answer 1

希望能帮助到你。

使用anchor属性的可以设置window中的组件自适应窗口大小,它通过指定百分比或者偏移量来控制自组建的大小。anchor一般作为layout:'anchor'的容器配置子组建的选项。下面代码中form类型默认即为layout:'anchor'。

例如:

var form = Ext.create('Ext.form.Panel', {       .....        
items: [
{fieldLabel: 'Send To', name: 'to', anchor:'100%'  // anchor width by percentage        },
{  fieldLabel: 'Subject',name: 'subject',anchor: '100%'  // anchor width by percentage        }....
}
var win = Ext.create('Ext.window.Window', {  ....items: form,

完整例子代码，可以参考:

http://dev.sencha.com/deploy/ext-4.0.0/examples/form/anchoring.html

anchor属性完整描述可以参考:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Anchor

追问

items 的 可以 自动适应大小。 但是 load 进去的 新页面 ，就不行了。 不过还是谢谢你 这个答案。