extjs 定义window时右上角有一个关闭按钮，点击时是隐藏操作，如何让它关闭操作？

Posted 2023-05-18

参考技术A

以下是关闭操作的代码:

//新增会计期间
function openAddDialog()

//使弹出窗体显示在最前面
Ext.useShims=true;
var win=new Ext.Window(
title:"新增",
width:320,
height:250,
html:addDialogStr,
modal:true,
buttons:[
text:"确认",handler:function()
alert("确认");

//关闭打开的窗体

win.close();

,
text:"取消",handler:function()
win.close();

]
);
win.show();

//点击右上角的关闭按钮后

win.on("close",function()
alert("关闭窗体");

);

对计算机软件的维护主要有以下几点:

(1)对所有的系统软件要做备份。当遇到异常情况或某种偶然原因，可能会破坏系统软件，此时就需要重新安装软件系统，如果没有备份的系统软件，将使计算机难以恢复工作。

(2)对重要的应用程序和数据也应该做备份。

(3)经常注意清理磁盘上无用的文件，以有效地利用磁盘空间。

(4)避免进行非法的软件复制。

(5)经常检测，防止计算机传染上病毒。

(6)为保证计算机正常工作，在必要时利用软件工具对系统区进行保护。

总之，计算机的使用是与维护分不开的，既要注意硬件的维护，又要注意软件的维护。

参考技术B

extjs 定义window的时候有一个右上角有一个关闭按钮，点击时是隐藏操作，如何让它做关闭操作

closeAction配置，可以为hide，close
当关闭按钮被点击时执行的动作。“close”缺省的动作是从DOM树中移除window并彻底加以销毁。“hide”是另外一个有效的选项，只是在视觉上通过偏移到零下(negative)的区域的手法来隐藏，这样使得window可通过show 的方法再显示. 
The action to take when 
the close button is clicked. The default action is 'close' which will actually 
remove the window from the DOM and destroy it. The other valid option is 'hide' 
which will simply hide the window by setting visibility to hidden and applying 
negative offsets, keeping the window available to be redisplayed via the show method. 



以下是4.x版本的：
closeAction : String
The action to take when the close header tool is clicked:
'destroy' :
remove the wind憨酣封叫莩既凤习脯卢ow from the DOM and destroy it and all descendant Components. The window will not be available to be redisplayed via the show method.
'hide' :
hide the window by setting visibility to hidden and applying negative offsets. The window will be available to be redisplayed via the show method.
Note: This behavior has changed! setting does affect the close method which will invoke the approriate closeAction.
Defaults to: "destroy"


区别只是把close改成destory了。
不过建议还是设置为hide好，要不close之后销毁了再次打开窗口的时候就需要重新建立对象了。而hide之后再次打开只需要show()一下就行了。



前提是要配置closable : true，设置窗口为可关闭的，3.x和4.x都需要的。
listeners:
"show": function()
form.getForm().loadRecord(record);
憨酣封叫莩既凤习脯卢 ,
//按钮关闭操作 ----- 这个地方
"close":function()
//alert("关闭");
 

);

win.show();

Ext.Window点击右上角关闭（X按钮）添加监听事件
var cancelRegularMeetingWin = new Ext.Window(    layout: 'fit',    width: 740,    closeAction: 'hide',    listeners   : 'hide':fn: clearDataStore,//关闭时清理搜索框数据和datagrid的数据    height: 490,    resizable: false,    shadow: true,    modal: true,    closable: true,    bodyStyle: 'padding:5 5 5 5',    animCollapse: true,    items: [cancelRegularMeetingQueryPanel,cancelRegularMeetingList,cancelRegularMeetingToolbar]

);

//关闭时清理搜索框数据和datagrid的数据function clearDataStore()    cancelRegularMeetingQueryPanel.getForm().reset();    cancelRegularMeetingList.getStore().removeAll();    cancelRegularMeetingQueryPanel.getForm().remove(Ext.getCmp('HYSXXGLID'));

easyui自定义工具栏

easyui自定义工具栏

easyui的弹出框上有工具栏（上方）和按钮栏（下方），
工具栏的按钮默认靠左，自己没找到调整位置的属性。
为了在右上角放一个关闭按钮，只能使用easyui的属性自定义一个工具栏，主要的实现为：

1. 创建一个div作为工具栏，在div中放要显示的按钮，按钮在div中向右靠齐
   

2. 在弹窗框div中添加属性

   data-options="toolbar:‘#tb‘"

我的代码如下：

 <div id="editDialog"  style="overflow: auto; overflow-x: auto;"  data-options="toolbar:‘#tb‘">
        <div id="box"  >
           <pre id="showMessage" style="font-size: 15px">
           </pre>
        </div>
 </div>

<div id="tb" class="dialog-button2" style="background:#f2f4f6; height: 30px">
    <a href="javascript:closeDialog()" class="l-btn" id="" style="float: right; margin-right: 2px ; vertical-align: middle"><span class="l-btn-left"><span class="l-btn-text">关闭</span></span></a>
</div>

js代码如下：

function editRemind(editId) {
        $(‘#editDialog‘).dialog({
            width: 1000,
            height: 700,
            title: ‘异常详细信息‘,
            modal: true,
           /* toolbar:[{
                text:‘关闭‘
            }],*/
          /* buttons: [{
                text: ‘关闭‘,
                handler: function () {
                    $(‘#editDialog‘).dialog(‘close‘);
                }
            }],*/
            onBeforeOpen:function(){
            },
            onOpen:function(){
                $(‘#showMessage‘).text(exceptionDetail);
                /*$.ajax({
                    url: ‘${applicationPath_}/servlet/MainServer?cmd=esbDbExceptionManageSingle&action=queryById&set_token_flag=N&_method=read‘,
                    type: ‘post‘,
                    data: {id: editId},
                    dataType: ‘JSON‘,
                    success: function (results) {
                        if (results.success) {
                            $(‘#showMessage‘).text(results.queryObj.exceptionDetail);
                        } else {
                            $.messager.alert(‘error‘, ‘\u67e5\u627e\u4fe1\u606f\u5931\u8d25！‘, ‘error‘);
                        }
                    }
                });*/
            },
            cache: false
        });

    }

为了工具栏好看点，样式都去easyui封装好的toolbar和buttons栏中扣去吧