ExtJs 4.2.1 点击按钮弹出表单的窗口

简介:   初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的, EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这样的框架,在网上找了没有找到这样的 控件,于是搜索一下关于ExtJs 对话框的实现方法,现在将实现结果贴出来,如果有什么想法,希望多多留言! Ext.

  初学ExtJs,做项目的时候想做一个这样的效果:点击按钮弹出对话框,之前一直是使用EasyUi来做的,

EasyUi里有Dialog,用起来很方便,但是现在转移到ExtJs上后,发现没有Dialog这样的框架,在网上找了没有找到这样的

控件,于是搜索一下关于ExtJs 对话框的实现方法,现在将实现结果贴出来,如果有什么想法,希望多多留言!

    Ext.get("btn_edit").on("click", function () {

        var form = new Ext.FormPanel({
            //labelAlign: 'top',
            bodyStyle: 'padding:5px 5px 0',
            layout: 'form',
            items: [
            {
                xtype: 'textfield',
                name: 'title',
                anchor: '100%'
            }, {
                xtype: 'htmleditor',
                border: true,
                id: 'context',
                plugins: [
	        	    Ext.create('Ext.zc.form.HtmlEditorImage')
	            ],
                height: 400,
                anchor: '100%'
            }
          ],
            buttonAlign: 'center',
            buttons: [
        {
            text: '保存',
            icon: '../../../Images/extjs/disk.png',
            handler: function () {
                var text = form.getForm().findField('context').getValue();
                alert(text);
            }
        }, {
            text: '关闭',
            icon: '../../../Images/extjs/cross.png',
            handler: function () {
                win.close(this);
            }
        }
      ]
        });
        var win = Ext.create("Ext.window.Window", {
            title: "编辑",       //标题
            draggable: false,
            icon: '../../../Images/extjs/pencil.png',
            height: 600,                          //高度
            width: 800,                           //宽度
            layout: "fit",                        //窗口布局类型
            modal: true, //是否模态窗口,默认为false
            resizable: false,
            items: [form]
        });
        win.show();
    });
});

  

讲解:

首先用一个按钮监听器,监听按钮的动作,当点击按钮后,先创建一个FormPanel,这个面板里创建的是一些基本的控件,这里就不讲了,

然后创建一个窗口,将刚才创建的面板作为这个窗口的items,这样一个form表单的窗口就创建好了,接下来就是将它显示出来,

如上面的代码win.show(),注意,同时将窗口代码设置成modal:true,这样就是一个完整的窗口显示!

目录
相关文章
|
监控 Java Spring
Spring Boot 拦截器(Interceptor)详解
本文介绍Spring Boot拦截器的原理与使用,涵盖自定义拦截器创建、注册配置、执行顺序及典型应用场景,助力提升系统安全性与可维护性。(238字)
1364 1
|
存储 传感器 监控
《探秘鸿蒙Next:模型轻量化的能源效益衡量之道》
在鸿蒙Next生态中,模型轻量化显著提升设备能源效益。通过功耗指标(CPU、GPU、整体设备)、运行时间与能耗比值、电池续航(实际场景和极端测试)、散热情况(温度变化、散热能耗)及资源占用(内存、存储)的综合衡量,可全面评估轻量化模型对能源效率的优化效果,为设备性能提升提供依据。
475 10
《探秘鸿蒙Next:模型轻量化的能源效益衡量之道》
Request Headers 中的 Accept 是 text/event-stream
Request Headers 中的 Accept 是 text/event-stream
2485 0
|
JavaScript C++ Windows
VS code运行vue项目
VS code运行vue项目
1742 0
|
监控 Java Nacos
使用Spring Boot集成Nacos
通过上述步骤,Spring Boot应用可以成功集成Nacos,利用Nacos的服务发现和配置管理功能来提升微服务架构的灵活性和可维护性。通过这种集成,开发者可以更高效地管理和部署微服务。
5116 17
|
存储 NoSQL Redis
redis-(error)-MISCONF。Redis。is。configuredto。save。RDBsnapshots
redis-(error)-MISCONF。Redis。is。configuredto。save。RDBsnapshots
3060 0
|
Ubuntu Python
WSL ubuntu 20.04安装python3
通过以上步骤,你可以在WSL的Ubuntu 20.04上成功安装Python 3。 买CN2云服务器,免备案服务器,高防服务器,就选蓝易云。百度搜索:蓝易云
2131 1
|
Java 开发者
Java“类 Y 中的方法 X 不能应用于给定类型”解决
在Java中遇到“类Y中的方法X无法应用于给定类型”的错误时,通常是因为方法调用时的参数类型与定义不符。解决此问题需检查方法签名,确保传递的参数类型正确无误,或使用显式类型转换以匹配方法所需的参数类型。这种错误提示帮助开发者及时修正类型不匹配的问题。
1080 1
|
XML Java 数据库连接
IDEA如何使mapper直接跳转到xml,超实用
【10月更文挑战第23天】本文介绍了如何在 MyBatis 框架中配置 Mapper 接口和 XML 文件的关联。方法一:使用 MyBatis-Generator 插件自动生成代码;方法二:手动配置,包括命名规范、文件路径设置和 IDEA 设置;此外,还可以通过快捷键、导航栏和 MyBatis-Plugin 插件来增强跳转功能。
8051 1
|
机器学习/深度学习 负载均衡 算法
训练Backbone你还用EMA?ViT训练的大杀器EWA升级来袭
训练Backbone你还用EMA?ViT训练的大杀器EWA升级来袭
605 1