Ext js 消息框组件

最新推荐文章于 2020-10-10 15:56:50 发布

张小嫿

最新推荐文章于 2020-10-10 15:56:50 发布

阅读量596

点赞数

分类专栏： ext

本文链接：https://blog.csdn.net/Zhang_h_/article/details/79378858

版权

ext 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.基本弹出框

 Ext.Msg.alert('Title', 'Basic message box in ExtJS');
{
   xtype: 'button',
   text: 'Button',
   listeners: {
      click: function () {
          Ext.Msg.alert('确定', '弹出框显示');
               }
         }
}

2.确认弹出框

 Ext.MessageBox.confirm('Confirm', Msg, optional callbackFunction());
{
   xtype: 'button',
   text: 'confirm',
   listeners: {
       click: function () {
       Ext.MessageBox.confirm('确认么', 'Are you sure you want to do this ?', callbackFunction);

       function callbackFunction(btn) {
            if (btn == 'yes') {
                   Ext.Msg.alert('Click', 'You clicked the Yes button');
             } else {
                   Ext.Msg.alert('Click', 'You clicked the No button');
                    }
            };
      }
 }
}

3.提示弹出框

 Ext.Msg.prompt('Name', 'Please enter your name:', function(){});
{
   xtype: 'button',
   text: 'Click Me',
   listeners: {
      click: function () {
      Ext.Msg.prompt('Name', 'Please enter your name:', function (btn, text) {
          if (btn == 'ok') {
              Ext.Msg.alert('Hello', 'Hello ' + text);
            }
      });
    }
  }
}

4.多行用户输入框

Ext.MessageBox.show({
   title: 'Details',
   msg: 'Please enter your details:',
   width:300,
   buttons: Ext.MessageBox.OKCANCEL,
   multiline: true,  // this property is for multiline user input.
   fn: callbackFunction
});
{
    xtype: 'button',
    text: 'Click Me',
    listeners: {
        click: function() {
            Ext.MessageBox.show({
            title: 'Details',
            msg: 'Please enter your details:',
            width:300,
            buttons: Ext.MessageBox.OKCANCEL,
            multiline: true,
            fn: callbackFunction
        });

    function callbackFunction (){
        Ext.Msg.alert('status', 'Details entered succesfully');
            }
        }
    }
}

5.是否取消框

Ext.MessageBox.show({
   title: 'Details',
   msg: 'Please enter your details:',
   width:300,
   buttons: Ext.MessageBox.YESNOCANCEL // this button property for all three options YES, NO, Cancel.
});
{
    xtype: 'button',
    text: 'Click Me',
    listeners: {
        click: function() {
            Ext.MessageBox.show({
            title: 'Details',
            msg: 'Please enter your details:',
            width:300,
            buttons: Ext.MessageBox.YESNOCANCEL,
            multiline: true,
            fn: callbackFunction
        });

        function callbackFunction (){
            Ext.Msg.alert('status', 'Details entered succesfully');
            }
        }
    }
}