ExtJS前端框架EXT弹出窗口事件

Ext.MessageBox.alert()

Ext.MessageBox.alert()提供一个OK按钮。对应JavaScript中的alert()

定义:alert( Stringtitle,Stringmsg,[Function fn][Object scope] ) :Ext.MessageBox

该函数有4个参数:

Title:窗口标题

Msg:弹出窗口内容

Fn:回调函数,在单击按钮或单击右上角的关闭图标X后执行。并且携带一个参数,即按钮的Id。

Scope:作用范围。

 

示例:

// alert

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

    Ext.MessageBox.alert("标题","这是提示的内容",function(r) {

     alert(r);

    });

});

<</span>input type="button" value="alert"id="alert">

在按钮alert上绑定click事件,单击时弹出alert窗口,单击OK按钮后,调用回调函数弹出按钮id

单击alert按钮,


单击OK按钮,


单击右上角的X,则返回cancel

 

24.2Ext.MessageBox.confirm()

选择对话框,提供一个Yes,一个No供用户选择是/否。对应JavaScript中的confirm()

定义:

confirm( Stringtitle,Stringmsg,[Function fn][Object scope] ) :Ext.MessageBox

该函数有4个参数:

Title:窗口标题

Msg:弹出窗口内容

Fn:回调函数,在单击按钮或单击右上角的关闭图标X后执行。并且携带一个参数,即按钮的Id。

Scope:作用范围。

 

示例:

// confirm

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

    Ext.MessageBox.confirm("标题","确认执行此项操作吗?",function(r) {

        alert(r);

    });

});

<</span>input type="button" value="confirm"id="confirm">


单击confirm按钮:

 

单击Yes返回yes;单击No返回No;单击X返回No

 

 

24.3Ext.MessageBox.prompt()

用户可以输入内容,对应JavaScript中的prompt();

定义:

prompt( Stringtitle,Stringmsg,[Function fn][Object scope][Boolean/Number multiline][String value] ) :Ext.MessageBox

 

参数:

Title:标题

Msg:内容

Fn:回调函数。

Scope:作用范围

Multiline:是否多行,默认单行。

Value:输入框的默认值。

24.3.1单行输入框

示例:

// prompt

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

    Ext.MessageBox.prompt("提示","请输入你的名字",function(btn,value) {

       alert("你选择了" + btn + ",你输入的内容是:" + value);

    },this,false,"刘德华");

 });

<</span>input type="button" value="prompt"id="prompt">

 

单击prompt按钮:

 

单击OK返回OK,单击Cancel返回cancel,单击X返回cancel

 

24.3.2多行输入框

24.3.2.1使用Ext.MessageBox.prompt()函数实现

多行输入对话框,将multiline设置为TRUE即可。

// prompt

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

    Ext.MessageBox.prompt("提示","请输入你的名字",function(btn,value) {

       alert("你选择了" + btn + ",你输入的内容是:" + value);

    },this,true,"刘德华");

 });

<</span>input type="button" value="prompt"id="prompt">

 

 

 

24.4.2.2使用Ext.MessageBox.show()实现

使用ext.MessageBox.show()函数,我们可以自行定义弹出窗口。

Ext.MessageBox.show({

    title:"提示",

    msg:"请输入你的名字",

    width:300,

    value:"刘德",

    buttons:Ext.MessageBox.OKCANCEL,

    multiline:true,

    fn:function(btn,val) {

        alert("你选择了" + btn + ",你输入的内容是:" + val);

     }

});

 

参数:

Title:标题

Msg:弹出窗口提示内容

Width:弹出窗口宽度

Value:弹出窗口输入框默认值

Buttons:弹出窗口按钮

Multiline:是否多行输入

Fn:回调函数。

 

 

 

24.4自定义对话框

24.3.2.2中我们使用Ext.MessageBox.show()函数实现了能多行输入的提示窗口。

Show()函数中,buttons我们可以选择的按钮有:

CANCEL:cancel

OK:ok

OKCANCEL:ok and cancelbuttons

YESNO:yes and no buttons

YESNOCANCEL:yes、no、cancel buttons

 

弹出窗口的图标(icon):

ERROR:错误

INFO:消息

QUESTION:疑问

WARNING:警告

 

我们可以利用这些自定义按钮和图标。

例:

Ext.MessageBox.show({

    title:"提示",

    msg:"请输入你的名字",

    width:300,

    value:"刘德华",

    buttons:Ext.MessageBox.OKCANCEL,

    icon:Ext.MessageBox.ERROR,

    multiline:true,

    fn:function(btn,val) {

        alert("你选择了" + btn + ",你输入的内容是:" + val);

    }

});

效果:

 

 

24.5进度条

Ext.MessageBox提供了默认的进度条,只需要将progress设置为TRUE即可。

示例:

Ext.MessageBox.show({

    width:300, // 弹出窗口宽度

    title:"提示", // 弹出窗口标题

    msg:"正在读取数据...", // 弹出窗口内容

    progress:true, // 是否是进度条

    closable:false // 是否可以关闭

});

 

效果:

 

但是,这样进度条是不会动的。

 

我们需要调用Ext.MessageBox.updateProgress()来更新进度条。

函数定义:

updateProgress( Numbervalue,StringprogressText,Stringmsg ): Ext.MessageBox

 

 

 

 

24.5使用进度条保存数据

 

示例:

var box =Ext.MessageBox.show({

        width:300,

        title:"提示",

        msg:"正在保存,请稍后...",

        progress:true,

        closable:false,

        wait:true,

        waitConfig:{

            interval:500

        }

    });

   

    Ext.Ajax.request({

        url:"./jsp/progress.jsp",

        params:{

            date:new Date().toLocaleString()

        },

        method:"POST",

        success:function(r) {

            Ext.MessageBox.hide();

            Ext.Msg.show({

                title:"提示",

                msg:r.responseText

            });

        },

        failure:function(r){

            Ext.MessageBox.hide();

            Ext.Msg.show({

                title:"提示",

                msg:"操作失败"

            });

        }

    });

});

 

Progress.jsp:

String date = request.getParameter("date");

System.out.println(date);

 

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

 

Thread.sleep(5000L);

response.getWriter().write("数据保存成功!提交时间:" + date);

 

jsp中,暂停5S模拟操作数据库的过程,然后返回成功信息。

效果:

单击保存后:


后台返回数据后:

 

 

24.6Ext.Window

示例:

// Create tabs and add it into window

var tabs= new Ext.TabPanel({

    activeTab:0,

    defaults:{autoScroll:true},

    region:"center",

    items:[

        {title:"标签1",html:"内容1"},      

        {title:"标签2",html:"内容2"},      

        {title:"标签3",html:"内容3",closable:true}      

    ]

});

 

var p = new Ext.Panel({

    title:"导航",

    width:150,

    region:"west",

    split:true,

    collapsible:true

});

// Create a window

varwindow = new Ext.Window({

    title:"登陆"// 窗口标题

    width:700, // 窗口宽度

    height:350, // 窗口高度

    layout:"border",// 布局

    minimizable:true// 最大化

    maximizable:true// 最小化

    frame:true,

    constrain:true// 防止窗口超出浏览器窗口,保证不会越过浏览器边界

    buttonAlign:"center"// 按钮显示的位置

    modal:true// 模式窗口,弹出窗口后屏蔽掉其他组建

    resizable:false// 是否可以调整窗口大小,默认TRUE

    plain:true,// 将窗口变为半透明状态。

    items:[p,tabs],

    buttons:[{

        text:"登陆",

        handler:function() {

            Ext.Msg.alert("提示","登陆成功!");

        }

    }],

    closeAction:'hide'//hide:单击关闭图标后隐藏,可以调用show()显示。如果是close,则会将window销毁。

});

 

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

    window.show();

});

 

效果:

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS2 中,要实现可编辑表格并在编辑时弹出窗口,你可以使用 GridPanel 的编辑插件(EditingGridPanel)和窗口组件(Window)的结合。 首先,你需要创建一个可编辑的 GridPanel,并为其指定一个编辑插件。然后,你可以在编辑事件弹出一个窗口,让用户进行编辑操作。在窗口中进行的编辑完成后,将更新的数据保存到 GridPanel 中。 以下是一个示例代码,演示如何在 ExtJS2 中实现可编辑表格并弹出窗口进行编辑: ```javascript Ext.onReady(function() { // 创建数据模型 var store = new Ext.data.Store({ fields: ['name', 'email', 'phone'], data: [ { name: 'John Doe', email: 'john@example.com', phone: '123-456-7890' }, { name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210' }, // ... ] }); // 创建列模型 var columnModel = new Ext.grid.ColumnModel({ columns: [ { header: 'Name', dataIndex: 'name', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) }, { header: 'Email', dataIndex: 'email', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) }, { header: 'Phone', dataIndex: 'phone', editor: new Ext.grid.GridEditor(new Ext.form.TextField()) } ] }); // 创建 GridPanel var grid = new Ext.grid.EditorGridPanel({ store: store, cm: columnModel, renderTo: Ext.getBody(), clicksToEdit: 1, // 设置为 1,表示单击单元格即可进入编辑状态 plugins: [new Ext.ux.grid.RowEditor()], // 使用 RowEditor 插件 listeners: { afteredit: function(editor, changes, record, rowIndex) { // 单元格编辑完成后触发 var win = new Ext.Window({ title: 'Edit', layout: 'form', items: [ new Ext.form.TextField({ fieldLabel: 'Name', value: record.get('name') }), new Ext.form.TextField({ fieldLabel: 'Email', value: record.get('email') }), new Ext.form.TextField({ fieldLabel: 'Phone', value: record.get('phone') }) ], buttons: [{ text: 'Save', handler: function() { // 保存编辑后的数据 record.set('name', win.getComponent(0).getValue()); record.set('email', win.getComponent(1).getValue()); record.set('phone', win.getComponent(2).getValue()); win.close(); } }] }); win.show(); } } }); }); ``` 在上面的示例中,我们使用了 RowEditor 插件来实现行级别的编辑功能。在 afteredit 事件中,我们弹出了一个窗口,允许用户在窗口中进行编辑操作。在窗口中的 Save 按钮的事件处理程序中,我们将编辑后的数据保存到 GridPanel 中。 请注意,示例中使用了 Ext.form.TextField 来创建文本输入框,你可以根据实际需求使用其他表单组件。 希望这对你有帮助!如有更多问题,请继续提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值