使用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应用程序开发的效率和质量。
相关问题拓展阅读：
- EXT-GWT 操作数据库的问题
- Extjs的Ext.grid.GridPanel组件进行行编辑或单元格编辑之后如何将修改之后的数据及时的更新到数据库
- ext.net中gridpanel编辑单元格的值保存到数据库
EXT-GWT 操作数据库的问题
先更新数据库，
在关闭数据库，
再只读方式打开数据库，
确认下是否数据录入，
如果录入，则刷新下当前页面即可。
Extjs的Ext.grid.GridPanel组件进行行编辑或单元格编辑之后如何将修改之后的数据及时的更新到数据库
Ext.grid.plugin.CellEditing
Ext.grid.plugin.RowEditing
你用的应该是以上两种
你可以用canceledit事件做提交后台，总是方式很多
然后grid.getStore().reload(); 刷新
ext.net中gridpanel编辑单元格的值保存到数据库
根据该行的rowIndex获取改行的值 传到后台 就能保存到数据库了
关于ext 往表格中添加数据库的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
