Extjs下指定弹出窗口的位置

本文详细介绍了在Extjs中如何精确设置窗口的弹出位置,包括使用'absolute'布局及x、y坐标的具体方法,适合需要掌握Extjs界面设计细节的开发者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值