Je crée une application qui affiche simplement les informations des clients sur une table, et si un utilisateur est cliqué, une fenêtre pop-up apparaît montrant les informations de l'utilisateur dans un formulaire (nom et email). Au sein de cette PopUp je veux être en mesure de mettre à jour les clients nom et email puis en cliquant sur Mise à jourbouton Je veux les nouvelles informations apparaissent sur la table tout de suite. En ce moment, je suis en mesure de remplir la table avec les informations des clients ainsi que lier leurs informations avec la fenêtre Pop-up. Mais depuis que je suis encore un peu nouveau à ExtJS je ne suis pas vraiment sûr de savoir comment faire la mise à jour pour montrer tout de suite sur la table après avoir cliqué sur bouton de mise à jour. J'apprécierais vraiment toute aide! Merci beaucoup.Comment mettre à jour une ligne sur une grille depuis une fenêtre d'alerte en utilisant ExtJs?
Voici mon code qui fonctionne très bien.
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>
Voici le JSON qui renseigne ma table.
{
"customers": [{
"id": 1,
"name": "Henry Watson",
"email": "[email protected]"
},
{
"id": 2,
"name": "Lucy",
"email": "[email protected]"
},
{
"id": 3,
"name": "Mike Brow",
"email": "[email protected]"
},
{
"id": 4,
"name": "Mary Tempa",
"email": "[email protected]"
},
{
"id": 5,
"name": "Beto Carlx",
"email": "[email protected]"
}
]
}
Merci un mate de beaucoup! – HenryDev