ExtJS中常用到的增删改查操作代码示例

ExtJS 中的增删改查操作代码详解 ExtJS 是一个基于 JavaScript 的 Rich Internet Application（RIA）框架，提供了许多功能强大且灵活的组件，帮助开发者快速构建复杂的 Web 应用程序。在 ExtJS 中，增删改查操作是最基本也是最常用的操作，本文将详细介绍 ExtJS 中的增删改查操作代码。 增操作 在 ExtJS 中，增操作通常是指添加新的记录，例如添加一条新的用户信息记录。下面是一个简单的增操作代码示例： ```javascript function addForm() { var form = new Ext.FormPanel({ id: 'queryForm', renderTo: 'searchPanel', labelWidth: 70, region: 'north', border: false, bodyBorder: false, labelAlign: 'right', frame: true, title: '用户信息查询', buttons: [{ handler: addForm, text: '新增' }], items: [{ xtype: 'textfield', fieldLabel: '用户名', name: 'username' }, { xtype: 'textfield', fieldLabel: '密码', name: 'password' }] }); } ``` 在上面的代码中，我们创建了一个 FormPanel 组件，并设置了其 ID、渲染目标、label 宽度、Region、边框样式等属性。然后，我们添加了三个按钮：新增、查询和重置。最后，我们定义了两个文本字段，用于输入用户名和密码。 删操作 在 ExtJS 中，删操作通常是指删除已经存在的记录，例如删除一条用户信息记录。下面是一个简单的删操作代码示例： ```javascript function deleteForm() { var form = Ext.getCmp('queryForm'); var record = form.getRecord(); if (record) { Ext.MessageBox.confirm('确认删除', '确认删除当前记录？', function(btn) { if (btn === 'yes') { // 删除记录 record.destroy(); } }); } } ``` 在上面的代码中，我们首先获取了当前的 FormPanel 组件，然后获取了当前记录。如果记录存在，我们弹出一个确认对话框，询问用户是否确定删除当前记录。如果用户确认删除，我们则删除该记录。 改操作 在 ExtJS 中，改操作通常是指修改已经存在的记录，例如修改一条用户信息记录。下面是一个简单的改操作代码示例： ```javascript function updateForm() { var form = Ext.getCmp('queryForm'); var record = form.getRecord(); if (record) { // 修改记录 record.set('username', 'new_username'); record.set('password', 'new_password'); // 保存修改 record.save(); } } ``` 在上面的代码中，我们首先获取了当前的 FormPanel 组件，然后获取了当前记录。如果记录存在，我们修改了记录的用户名和密码，然后保存修改。 查操作 在 ExtJS 中，查操作通常是指查询已经存在的记录，例如查询所有用户信息记录。下面是一个简单的查操作代码示例： ```javascript function searchForm() { var form = Ext.getCmp('queryForm'); var store = form.getStore(); store.load({ params: { start: 0, limit: QUERY_PAGE_SIZE } }); } ``` 在上面的代码中，我们首先获取了当前的 FormPanel 组件，然后获取了当前的 Store 对象。然后，我们加载了 Store 数据，并设置了分页参数，例如每页显示 10 条记录。 ExtJS 中的增删改查操作代码是非常重要和基础的，它们是构建复杂 Web 应用程序的基础。通过掌握这些代码，我们可以快速构建复杂的 Web 应用程序，以满足实际需求。