初学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,这样就是一个完整的窗口显示!

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.NET点击按钮弹出确认对话框方法

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

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

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

随机推荐

  1. 【转】istringstream、ostringstream、stringstream 类介绍 .

    http://www.cnblogs.com/gamesky/archive/2013/01/09/2852356.html 好吧,懒死我算了

  2. MySql索引的优缺点

    优点 有了索引.对于记录数量很多的表,可以提高查询速度. 缺点 索引是占用空间的. 索引会影响update insert delete速度 ALERT!!! 1.索引要创建在where和join用到的 ...

  3. C#算法基础之插入排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. 每天一道LeetCode--206. Reverse Linked List

    Reverse a singly linked list. package cn.magicdu; import cn.magicdu.extra.ListNode; public class _20 ...

  5. 学习Learn Python The Hard Way 前言中的一段话,可与君共勉

    在你通过这本书学习编程时,我正在学习弹吉他.我每天至少训练 2 小时,至少花一个小时练习音阶.和声.和琶音,剩下的时间用来学习音乐理论和歌曲演奏以及训练听力等.有时我一天会花 8 个小时来练习,因为我 ...

  6. 第三篇、image 设置圆角的几种方式

    第一种: 就拿view来举例 view.layer.masksToBounds=YES; //设置为yes,就可以使用圆角 view.layer.cornerRadius= ; //设置它的圆角大小 ...

  7. 【Leetcode】355. Design Twitter

    题目描述: Design a simplified version of Twitter where users can post tweets, follow/unfollow another us ...

  8. java访问webservice服务(二)

    欢迎转载,出处http://www.cnblogs.com/shizhongtao/p/3433679.html 利用cxf的框架实现 import javax.xml.namespace.QName ...

  9. 写在十年 2007-09-15 (写给L之三)

    你知道吗? 那种时间很远,但心很近的感觉.   时间已经远去了十年, 但亲切的感觉依然清晰可见,   无论时光远去了十年,二十年,三十年, 永远…… 它已经植根,在心间……

  10. Excel 数据分析技巧

    分享一个小技巧,Excel中,统计数据后,根据数据点之间的趋势,描绘出大致的曲线图,并且得到对于的公式. 1. 给出示例数据 2. 插入->散点图,右键点,选择添加趋势线,可以根据点数的走向,来 ...