Extjs下指定弹出窗口的位置

工作中需要用到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 这里可以详细了解到参数如何设置.

猜你喜欢

转载自blog.csdn.net/aqudgv83/article/details/89473548