Javascript 如何使用ExtJs从警报窗口更新网格上的行？
我正在创建一个应用程序，它只在表上显示客户信息，如果用户被单击，则会出现一个弹出窗口，以表单（姓名和电子邮件）的形式显示用户信息。在此弹出窗口中，我希望能够更新客户的姓名和电子邮件，然后单击更新按钮，我希望新信息立即显示在表格上。现在，我能够用客户信息填充表，并用弹出窗口绑定他们的信息。但由于我对ExtJS还是有点陌生，所以我不确定如何在点击更新按钮后立即在表上显示更新。我真的很感激任何帮助！。非常感谢 这是我的代码，工作正常 index.htmlJavascript 如何使用ExtJs从警报窗口更新网格上的行？,javascript,extjs,extjs5,Javascript,Extjs,Extjs5,我正在创建一个应用程序，它只在表上显示客户信息，如果用户被单击，则会出现一个弹出窗口，以表单（姓名和电子邮件）的形式显示用户信息。在此弹出窗口中，我希望能够更新客户的姓名和电子邮件，然后单击更新按钮，我希望新信息立即显示在表格上。现在，我能够用客户信息填充表，并用弹出窗口绑定他们的信息。但由于我对ExtJS还是有点陌生，所以我不确定如何在点击更新按钮后立即在表上显示更新。我真的很感激任何帮助！。非常感谢 这是我的代码，工作正常 index.html <!DOCTYPE html> &
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cat.net/ajax/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all-debug_1.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});
Ext.onReady(function () {
// Ajax call
var usersFromAJAX = Ext.create('Ext.data.Store', {
storeId: 'user',
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'example.json',
reader: {
type: 'json',
root: 'customers'
}
}
});
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: usersFromAJAX,
id: 'user',
title: 'Employees',
iconCls: 'x-fa fa-users',
listeners: {
itemclick: function (view, index, item, record) {
var window = Ext.create('Ext.window.Window', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
record: record,
viewModel: {
data: {
employee: index.data// employee's name
}
},
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'firstname',
fieldLabel: 'First Name',
bind: '{employee.name}' // biding employee's name
},
{
xtype: 'textfield',
name: 'firstname',
fieldLabel: 'Email',
bind: '{employee.email}' // biding employee's name
},
{
xtype: 'toolbar',
docked: 'bottom',
style:{
background: "#ACCCE8",
padding:'20px'
},
items: ['->', {
xtype: 'button',
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
console.log("Updating name...");
// Need to add something in here
this.up('window').close();
}
}, {
xtype: 'button',
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
// this.up('formpanel').destroy();
this.up('window').close();
//this.up('window').destroy();
}
}]
}]
})
window.show();
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: Ext.getElementById("myTable")
});
});
</script>
</head>
<body>
<div id="myTable"></div>
</body>
</html>
谢谢你，伙计！谢谢你，伙计！
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "henry@email.com"
},
{
"id": 2,
"name": "Lucy",
"email": "lucy@email.com"
},
{
"id": 3,
"name": "Mike Brow",
"email": "Mike@email.com"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "mary@email.com"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "beto@email.com"
}
]
}
Ext.define('UserModal', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
Ext.onReady(function () {
// Setting up the Grid
Ext.create('Ext.grid.Panel', {
store: {
model: 'UserModal',
autoLoad: 'true',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
},
listeners: {
itemclick: function (view, record) {
var f = Ext.create('Ext.form.Panel', {
xtype: 'formpanel',
title: 'Update Record',
width: 300,
height: 200,
floating: true,
centered: true,
modal: true,
buttons: [{
text: 'Update',
iconCls: 'x-fa fa-check',
handler: function () {
f.updateRecord(record);
f.close();
}
}, {
text: 'Cancel',
iconCls: 'x-fa fa-close',
handler: function () {
f.close();
}
}],
items: [{
xtype: 'textfield',
id: 'firstname',
name: 'name',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email'
}]
})
f.show();
f.loadRecord(record);
}
},
columns: [{
header: 'ID',
dataIndex: 'id',
sortable: false,
hideable: true
}, {
header: 'NAME',
dataIndex: 'name',
}, {
header: 'Email',
dataIndex: 'email',
flex: 1 // will take the whole table
}],
height: 300,
width: 400,
renderTo: document.body
});
});