javascript - How to update a row on a grid from an alert window using ExtJs? -
i'm creating app shows customers information on table, , if user being clicked pop-up window shows showing user's information in form (name , email). within popup want able update customers name , email , when clicking on update button want new information show on table right away. of right i'm able populate table customers' information binding information pop-up window. since i'm still kind of new extjs i'm not sure how make update show right away on table after clicking on update button. appreciate help!. lot.
here's code works fine.
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 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 add 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 // take whole table }], height: 300, width: 400, renderto: ext.getelementbyid("mytable") }); }); </script> </head> <body> <div id="mytable"></div> </body> </html> here's json populates table.
{ "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" } ] }
binding "live" data, means update grid type. if want defer changes until hit button, can use methods on form so:
ext.define('usermodal', { extend: 'ext.data.model', fields: ['id', 'name', 'email'] }); ext.onready(function () { // setting 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 // take whole table }], height: 300, width: 400, renderto: document.body }); });
Comments
Post a Comment