使用EXT技术轻松往表格中添加数据库数据 (ext 往表格中添加数据库)
在Web应用程序开发中，管理和编辑数据非常重要。我们经常需要将存储在数据库中的数据展示在页面中，让用户能够方便地对其进行修改或删除。因此，开发者需要一些工具来处理这些数据操作。
本文将介绍一种使用EXT技术来轻松往表格中添加数据库数据的方法。EXT是一种用于构建富客户端Web应用程序的JavaScript框架。它提供了丰富的组件库，可以很容易地创建数据表格、表单、菜单等。
我们需要在页面中引入EXT库和相关资源。
“`
“`
接着，我们需要创建一个数据模型来描述要展示或编辑的数据。在本例中，我们使用PHP作为后端语言，MySQL作为数据库。我们创建了一个名为“User”的数据模型，该模型对应了一个名为“users”的数据库表。创建数据模型的代码如下：
“`
Ext.define(‘User’, {
extend: ‘Ext.data.Model’,
fields: [
{name: ‘id’, type: ‘int’},
{name: ‘username’, type: ‘string’},
{name: ’eml’, type: ‘string’},
{name: ‘reg_date’, type: ‘date’, dateFormat: ‘Y-m-d’},
],
proxy: {
type: ‘ajax’,
api: {
read: ‘users.php?action=read’,
create: ‘users.php?action=create’,
update: ‘users.php?action=update’,
destroy: ‘users.php?action=delete’
},
reader: {
type: ‘json’,
root: ‘data’,
idProperty: ‘id’
},
writer: {
type: ‘json’,
writeAllFields: true,
encode: false,
root: ‘data’
},
listeners: {
exception: function(proxy, response, operation) {
Ext.MessageBox.show({
title: ‘REMOTE EXCEPTION’,
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
“`
在数据模型中，我们定义了需要展示和编辑的数据字段，包括id、username、eml和reg_date。我们还定义了与PHP文件交互的代理配置，包括读取、创建、更新和删除操作的URL地址。
接下来，我们需要创建一个表格视图来展示数据。我们使用EXT的grid组件来创建一个名为“UserGrid”的表格视图。代码如下：
“`
var store = Ext.create(‘Ext.data.Store’, {
model: ‘User’,
autoLoad: true,
pageSize: 10,
proxy: {
type: ‘ajax’,
url: ‘users.php’,
actionMethods: {
read: ‘POST’
},
reader: {
type: ‘json’,
root: ‘data’,
totalProperty: ‘total’
}
}
});
var grid = Ext.create(‘Ext.grid.Panel’, {
store: store,
columns: [
{text: ‘ID’, dataIndex: ‘id’},
{text: ‘Username’, dataIndex: ‘username’, editor: ‘textfield’},
{text: ‘Eml’, dataIndex: ’eml’, editor: ‘textfield’},
{text: ‘Registration Date’, dataIndex: ‘reg_date’, xtype: ‘datecolumn’, format: ‘Y-m-d’}
],
selModel: ‘rowmodel’,
plugins: {
ptype: ‘rowediting’,
clicksToEdit: 2
},
dockedItems: [{
xtype: ‘pagingtoolbar’,
store: store,
dock: ‘bottom’,
displayInfo: true
}],
renderTo: Ext.getBody()
});
“`
在表格视图中，我们创建了一个名为“store”的数据源，它使用我们定义的User模型，并通过AJAX请求读取数据。我们还定义了表格的列，指定了每一列展示或编辑的数据字段。我们使用rowmodel选择器来指定行选择模式，rowediting插件来实现行内编辑模式。
我们将视图渲染到页面上。我们使用renderTo方法将表格视图渲染到页面的文档流上。此时，我们就可以看到表格视图中展示了从数据库中读取出来的数据。
为了在表格视图中添加数据，我们需要为表格视图添加一个按钮，并在按钮的点击事件处理函数中添加一条新数据。我们可以使用EXT的button组件来创建按钮，并使用store.add方法来添加数据。
代码如下：
“`
var addButton = Ext.create(‘Ext.button.Button’, {
text: ‘Add User’,
handler: function() {
store.add(new User({
username: ‘new user’,
eml: ‘newuser@example.com’,
reg_date: new Date()
}));
}
});
grid.addDocked(addButton);
“`
在这个例子中，我们创建了一个名为“addButton”的按钮，并将其添加到表格视图的dockedItems中。当用户点击该按钮时，表格视图会用我们新建的一条数据来展示。
本文介绍了如何使用EXT框架来快速地展示和编辑数据库数据。我们创建了一个User模型来定义需要展示和编辑的数据字段，并使用grid组件来创建表格视图，还加入了一个简单的按钮来实现添加数据的操作。如果你想了解更多关于EXT的知识，可以查看官方文档和示例代码，进一步提升Web应用程序开发的效率和质量。
