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

时间:2022-09-14 12:17:48

  初学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();
});
});

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

讲解:

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

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

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

ExtJs 4.2.1 点击按钮弹出表单的窗口的更多相关文章

  1. JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  2. 请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框。程序可以判断出用

    请写出一段JavaScript代码,要求页面有一个按钮,点击按钮弹出确认框.程序可以判断出用 户点击的是“确认”还是“取消”. 解答: <HTML> <HEAD> <TI ...

  3. Html : 点击按钮弹出输入框,再次点击进行隐藏

    上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. jquery点击按钮弹出图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  6. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. JS点击按钮弹出窗口

    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...

  8. ASP&period;NET点击按钮弹出确认对话框方法

    开发asp.net网页应用程序的时候,有些页面的按钮需要增加一个确认对话框,比如: 实现这个功能比较简单,代码这样写: Button.Attributes["onclick"] = ...

  9. Asp&period;net点击按钮弹出文件夹选择框的实现(网页)

    本文地址:http://www.cnblogs.com/PiaoMiaoGongZi/p/4092112.html 在Asp.net网站实际的开发中,比如:需要实现点击一个类似于FileUpload的 ...

随机推荐

  1. ABP入门系列(1)——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  2. php之XML转数组函数的方法

    <?/** * xml2array() will convert the given XML text to an array in the XML structure. * Link: htt ...

  3. 做&period;net的早晚会用到,并且网上还没有这方面的正确资料或几乎很少

    原文网址:http://www.cnblogs.com/langu/archive/2012/03/23/2413990.html 一直以来,找安装程序的msi源文件路径得到的都是“system32” ...

  4. Quartz总结(四):动态修改定时器二

    前文:http://www.cnblogs.com/LiuChunfu/p/5598806.html 提到了一种动态修改定时器的方法, 其本质就是在job方法中注入Schedular的对象,从Sche ...

  5. ASP&period;NET CORE MVC 实现减号分隔&lpar;Kebab case&rpar;样式的 URL

    ASP.NET CORE MVC 中,默认的 Route 模板是: /{controller}/{action}  .我们可以通过开启 URL 小写转换将 URL 变为小写,但此方式在 Control ...

  6. 【递推】Bzoj3612&lbrack;Heoi2014&rsqb;平衡

    Description 下课了,露露.花花和萱萱在课桌上用正三棱柱教具和尺子摆起了一个“跷跷板”.      这个“跷跷板”的结构是这样的:底部是一个侧面平行于地平面的正三棱柱教具, 上面 摆着一个尺 ...

  7. local&lowbar;irq&lowbar;disable和disable&lowbar;irq的区别

    local_irq_disable: local_irq_disable的功能是屏蔽当前CPU上的所有中断,通过操作arm核心中的寄存器来屏蔽到达CPU上的中断,此时中断控制器中所有送往该CPU上的中 ...

  8. 初识 go 语言:方法,接口及并发

    目录 方法,接口及并发 方法 接口 并发 信道 结束语 前言: go语言的第四篇文章,主要讲述go语言中的方法,包括指针,结构体,数组,切片,映射,函数闭包等,每个都提供了示例,可直接运行. 方法,接 ...

  9. chkconfig&colon; command not found

    问题描述 Ubuntu 16.04 下安装 Nginx 服务器,在添加 nginx 服务时出现如下信息 # chkconfig --add nginx chkconfig: command not f ...

  10. Django同步数据库(&sol;manage&period;py makemigrations&rpar; 报错

    新起了环境,创建models.py 内容,想要同步到数据库,执行以下操作时 报错: ./manage.py makemigrations ./manage.py migrate *(第一个步骤为在该项 ...