Ext JS中的Grid(表格)组件用于展示数据列表,当需要更新Grid中的数据时,可以使用以下方法进行刷新:
Grid组件通过Store(数据存储)来管理数据。刷新Grid实际上是刷新其关联的Store中的数据。
loadData
方法更新Store。loadData
方法更新Store。load
方法。load
方法。以下是一个完整的示例,展示如何刷新Grid:
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'age'],
proxy: {
type: 'ajax',
url: 'data.json', // 数据源URL
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
var grid = Ext.create('Ext.grid.Panel', {
title: '用户列表',
store: store,
columns: [
{ text: '姓名', dataIndex: 'name' },
{ text: '年龄', dataIndex: 'age' }
],
renderTo: Ext.getBody(),
id: 'myGridId'
});
// 刷新Grid的函数
function refreshGrid() {
store.reload();
}
// 绑定刷新按钮事件
Ext.create('Ext.Button', {
text: '刷新',
renderTo: Ext.getBody(),
handler: refreshGrid
});
});
通过以上方法,你可以有效地刷新Ext JS中的Grid组件,确保数据的实时性和准确性。
领取专属 10元无门槛券
手把手带您无忧上云