ExtJS实现弹出密码输入框

ExtJS实现弹出密码输入框

PS.我使用的ExtJS是3.2.1,比较老的版本了,新版本没试过,不过原理都是一样的,有兴趣的可以尝试一下

使用ExtJS弹出输入框时,很自然的会想到:

Ext.MessageBox.prompt('提示', '请输入',function(btn,text){});

但是当要求输入密文时,就很不方便了,默认是不密文显示的,因此就需要把这个方法改造一下。

根据这个方法可知,弹出框也只是一个文本框,只要把文本框的type=“text”改成type=“password”即可。

  • 首先找到ext-all-debug.js,Ext.MessageBox是在这个文件中的

这里写图片描述

  • 根据ExtJS源码可以看出,前面是定义参数和按钮的,弹出框一定是new出来的一个窗口,然后定义窗口的大小参数样式,然后有一个输入框,继续往下看源码

这里写图片描述

  • 从上图可以看出,跟我预想的一样,是new出来的一个窗口,宽400,高100并且有关闭操作,继续往下看

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值