Prompt构造：实现自定义确认按钮

作者：狼烟四起2023.08.21 22:18浏览量：11

简介：Ext的prompt怎么在点击OK按钮的时候触发事件而不关闭prompt窗口呢？

Ext的prompt怎么在点击OK按钮的时候触发事件而不关闭prompt窗口呢？

当我们使用ExtJS或者 Sencha Touch的时候，经常会用到 prompt 对话框。这个对话框有一个确认按钮 (或 “OK” 按钮)，当用户点击这个按钮时，prompt 对话框就会关闭。然而，有时候我们需要在点击 “OK” 按钮的时候触发一个事件，而不是关闭 prompt 对话框。

ExtJS 和 Sencha Touch 的 prompt 对话框是通过配置一个 Ext.form.field.Text 和 Ext.Button 对象来实现的。因此，我们可以利用这两个组件的 API 来实现我们的需求。

以下是一个简单的例子，展示了如何在点击 “OK” 按钮时触发一个事件，并且不关闭 prompt 对话框：

  1. Ext.create('Ext.form.Panel', {
  2.     title: 'Prompt',
  3.     bodyPadding: 10,
  4.     width: 300,
  5.     renderTo: Ext.getBody(),
  6.     items: [{
  7.         xtype: 'textfield',
  8.         name: 'textfield',
  9.         prompt: '请输入文字',
  10.         value: ''
  11.     }],
  12.     buttons: [{
  13.         text: 'OK',
  14.         handler: function() {
  15.             var textfield = this.up('form').down('textfield');
  16.             alert('你输入了 ' + textfield.getValue());
  17.             // 不关闭 prompt 对话框
  18.             // this.up('form').down('textfield').focus();
  19.         }
  20.     }]
  21. });

在这个例子中，当用户在输入框中输入文字并点击 “OK” 按钮时，会弹出一个 alert 对话框，显示用户输入的文字。你可以在这个 handler 函数里面加入你需要执行的代码。如果你想让 prompt 对话框不关闭，你可以将上面代码中的注释部分取消注释。这样，当你点击 “OK” 按钮时，输入框就会被获取焦点，prompt 对话框不会关闭。

注意，这只是一个简单的例子，实际的使用情况可能会更复杂。比如，如果你需要在 prompt 对话框里面显示多个字段，或者你需要对用户的输入进行验证，那么就需要对代码进行更多的调整。总的来说，只要掌握了 ExtJS 和 Sencha Touch 的基本 API，就可以灵活地使用 prompt 对话框，满足各种复杂的需求。

最热文章