Ext JS 二级弹框问题

二级弹框示例代码demo

doSecondWin:function(){
	var xxxSecondWindow=this.lookupReference('xxxSecondWindow');
	if (!xxxSecondWindow) {
		xxxSecondWindow=Ext.create('*.*.xxxSecondWindow', {
			reference: 'xxxSecondWindow',
			param1: '传参',
			title: '弹框2显示名称',
		});
		this.getView().add(xxxSecondWindow);
		// 方案二处理方式一添加代码位置
	}
	// 方案二处理方式二调整代码位置
	xxxSecondWindow.show();
}

1.最佳方案：通过一级弹框的toolbar按钮的handler对应的方法进行触发

tbar : Ext.create('Ext.toolbar.Toolbar', {
	cls: 'tbar_class',
	items: [{
		bind: {
			text: '{insert}'
		},
		xtype: 'button',
		iconCls: 'iconfont icon-system_add1',
		handler: 'doSecondWin'
	}]
}),

2.方案二：通过二级弹框的列表的超链接

columns:[{...,render:function(){
	return '<div onclick="viewport.XXXController.doSecondWin()">超链接</div>';
}}]

方案二存在问题：二级弹框显示在一级弹框下面 #F44336
2.1.问题处理方式一：获取二级弹框中form中的输入框元素，延时进行聚焦，会让二级弹框刷新到上面

var secondForm=this.lookupReference('xxxSecondForm').getForm();
setTimeout(function () {
	secondForm.findField('inputElement').focus();
}, 50);

2.2.问题处理方式二：二级弹框调用show()方法时进行传参，可以根据传参元素进行弹出二级弹框的特效显示

var firstWindowButton=me.lookupReference('xxxFirstWindow').down("button[handler='doSecondWin']");
xxxSecondWindow.show(firstWindowButton);

终极最佳方案:

var zi = new Ext.ZIndexManager();
zi.register(alertWin);
zi.bringToFront(alertWin, true);