我正在创建一个只在桌面上显示客户信息的应用程序，如果用户被点击，则弹出窗口会显示表单中的用户信息（姓名和电子邮件）。在此PopUp中，我希望能够更新客户名称和电子邮件，然后点击更新 按钮我希望新信息立即显示在桌面上。截至目前，我可以使用客户信息填充表格，并将其信息与弹出窗口绑定。但是，由于我仍然是ExtJS的新手，我不太确定如何在点击更新按钮后立即在桌面上显示更新。我真的很感激任何帮助！非常感谢。
这是我的代码，效果很好。
的index.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>
这是填充我的表格的JSON 。
{
"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"
}
]
}
答案 0 :(得分：2)
绑定适用于＆＃34; live＆＃34;数据，这意味着它会在您键入时更新网格。如果要在更改按钮之前推迟更改，可以使用表单上的方法执行此操作：
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
});
});