工作中需要用到Extjs,画界面时需要指定弹出窗口的位置, 花了半天时间找到参数如何设置.
先给出源码
FullBuildSelectionWindow = function(_parentRef,url, buttonName,validFormatsStr, validMaxSize ,LabelName) {
var tabs = new Ext.TabPanel({
region : 'center',
height: 50,
//距离top、right、bottom、left边界的距离,单位为像素
margins : '1 13 3 0',
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : '默认',
html : '内容'
},{
title : '标签',
html : '内容'
},{
title : '可关闭',
html : '内容',
closable : true
}]
});
var panel = new Ext.Panel({
title : '导航',
region : 'east',
height: 50,
split : true,
width : 200,
//True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3'
});
var window = new Ext.Window({
title : '复杂布局',
region : 'east',
closable : true,
border : false,
x: 750,
y: 30,
html: 'Positioned at x:150, y:350',
width: 300,
height: 200,
layout : 'absolute',
closeAction : 'close',
modal : true,
items :[panel,tabs]
});
window.show();
};
Ext.extend(FullBuildSelectionWindow, Ext.Window, {
});
//invoke place
fullBuildWindow : function(){
var win = new FullBuildSelectionWindow(this,'ttttt/test.action', 'ttttt','.json', 1, 'ttttFile');
win.show();
}
这里面决定了窗口弹出位置的是layout : 'absolute',x: 750, y: 30, 这三个元素.
显示结果如下图:
参考了W3cshool的教程:
https://www.w3cschool.cn/extjs/extjs_layouts.html, 从这里可以了解到 layout 值为 Absolute 此布局允许使用容器中的XY坐标定位项目。
https://www.w3cschool.cn/extjs/layoutabsolute.html 这里可以详细了解到参数如何设置.