×

Ext.js 教程

Ext.js 概述Ext.js 环境设置Ext.js 命名约定Ext.js 架构Ext.js 第一个程序Ext.js Class 系统Ext.js 集装箱Ext.js 布局Ext.js 组件Ext.js 拖放Ext.js 主题Ext.js 自定义事件和监听器Ext.js 数据Ext.js 字体Ext.js 风格Ext.js 图像Ext.js 本地化Ext.js 可访问性Ext.js 调试代码Ext.js 方法

Ext.js 多行用户输入框


Ext.js 消息框Ext.js 消息框


描述

这也像提示框,但它允许用户输入多线信息,而不只是一行。

语法

这里是简单的语法。

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
});

下面是一个简单的例子显示用法。

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.Button', {
            renderTo: Ext.getElementById('msgBox'),
            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');
                  }
               }
            }
         });
      });
   </script>
</head>
<body>
   <p> Click the button for alert box </p>
   <div id = "msgBox" ></div>
</body>
</html>

这将产生以下结果 :

Ext.js 多行用户输入框

Ext.js 消息框Ext.js 消息框


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)