在html页面点击事件中初始化一个extjs让extjs中编辑出一个form表单弹框
时间: 2024-05-06 12:22:05 浏览: 12
可以按照以下步骤实现:
1. 在HTML页面中引入ExtJS库和相关样式表和脚本。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Page</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.5.3/classic/theme-triton/resources/theme-triton-all.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.5.3/ext-all.js"></script>
</head>
<body>
<button id="showFormBtn">Show Form</button>
</body>
</html>
```
2. 在点击事件中初始化ExtJS并创建一个弹框。
```html
<script type="text/javascript">
Ext.onReady(function() {
var showFormBtn = Ext.get('showFormBtn');
showFormBtn.on('click', function() {
Ext.create('Ext.window.Window', {
title: 'My Form',
width: 400,
height: 300,
layout: 'fit',
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email'
}]
}]
}).show();
});
});
</script>
```
在这个示例中,我们在点击事件中使用Ext.get()获取按钮元素,然后使用on()方法为点击事件添加处理程序。在处理程序中,我们使用Ext.create()方法创建一个窗口组件,并使用xtype属性指定它包含一个form表单组件。我们可以在form组件中添加任何需要的字段。最后,我们使用show()方法显示窗口。