I made a grid. How I can edit selected row in a modal window using ext js 4? This is my code:
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
renderTo: Ext.getBody()
});
#k_b
Check if this helps you, it is just one first step for you understand the logic.
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'surname', type: 'string'},
{name: 'date', type: 'date'}
]
});
var data = {
users: [
{
name: 'Ed Spencer',
surname : 'Jobs'
},
{
name: 'Ed Spencer2',
surname : 'Jobs2'
}
]
};
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Users',
height: 200,
width: 400,
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Surname',
dataIndex: 'surname'
}, {
header: 'Date of birth',
dataIndex: 'date',
xtype:'datecolumn',
format: 'd/m/Y',
flex:1
}],
listeners:
{
scope: this,
selectionchange: function(model, records){
var rec = records[0];
if (rec) {
var editform = Ext.create('Ext.form.Panel', {
width: 390,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name: 'surname',
fieldLabel: 'Surname'
}
],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form');
form.updateRecord();
var record = form.getForm().getRecord();
Ext.Msg.alert('Record',record.get('name'));
record.save();
}}]
});
Ext.create('Ext.window.Window', {
title: 'Edit',
height: 200,
width: 400,
layout: 'fit',
items: [
editform]
}).show();
editform.getForm().loadRecord(rec);
}
}
},
renderTo: Ext.getBody()
});
https://jsfiddle.net/ep24cc30/4/
Related
I'm creating an app that simply shows customers information on a table, and if a user is being clicked then a pop-up window shows up showing user's information in a form (name and email). Within this PopUp I want to be able to update customers name and email and then when clicking on Update button I want the new information to show up on the table right away. As of right now I'm able to populate the table with customers' information as well as binding their information with the Pop-up window. But since I'm still kind of new to ExtJS I'm not really sure how to make the update to show right away on the table after clicking on update button. I would really appreciate any help!. Thanks a lot.
Here's my code that works just 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 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>
Here's the JSON that populates my 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 is for "live" data, so that means it will update the grid as you type. If you want to defer the changes until you hit a button, you can use methods on the form to do so:
Fiddle
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
});
});
Can anyone help me get my double click function working as intended on my grid? Every time a row is double clicked in the grid, I want a Window to pop up with the "command_output" field displayed in the new window.
Currently, I have the window opening without any data in it.
Controller Function
onDoubleClick: function(grid, record) {
var win = Ext.create("Ext.Window", {
id: 'DossierArea',
xtype:'form',
title: 'Dossier',
width: 600
})
win.show();
}
Grid Properties
id: 'ChangeLog',
xtype: 'grid',
viewConfig: {
listeners: {
itemdblclick: 'onDoubleClick'
}
},
split: true,
title: 'Log',
region: 'south',
width: 600,
height: 300,
bind: {store: '{tasks}'},
columns: {
defaults: {
width: 175
},
items:
[
{ text: 'Script Command', dataIndex: 'command_script', flex: 1},
{ text: 'Output', dataIndex: 'command_output', width: 250, flex: 1 },
{ text: 'Status', dataIndex: 'state', width: 175,
renderer: 'deploymentHistoryStatusRenderer'},
{ text: 'Timestamp Completed (GMT)', dataIndex: 'time_command_run', width: 225 },
]
},
bbar: ['->',{
xtype: 'button',
text: 'Refresh',
listeners: {
click: 'refreshActions'
}
}
]
}
Store
Store.model.Base.defineModel(
'Task',
{name: 'step', type: 'int'},
{name: 'state', type: 'int'},
{name: 'command_script', type: 'string'},
{name: 'command_output', type: 'string'},
{name: 'time_command_run', type: 'date', dateFormat: 'g:i A'}
],
true
);
Add textfield in new window config and set value to textField from record variable.
Modify your listener
onDoubleClick: function(grid, record) {
var win = Ext.create("Ext.Window", {
id: 'DossierArea',
title:'My New Window',
layout:'fit',
items:[
{
xtype:'form',
title: 'Dossier',
width: 600,
items:[
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Output',
value:record.get("command_output"),
allowBlank: false
}
]
}
]
})
win.show();
}
I have a JSFiddle Demo which creates a Grid with editing enabled. The problem I am facing is that the textfields that are displayed when editing a row are too narrow. They are about half the column width.
// Data to be bound to the grid.
var albums = [{
title: 'Frampton Comes Alive!',
artist: 'Peter Frampton',
genre: 'Rock',
year: '01/06/1976'
}, {
title: 'Led Zeppelin II',
artist: 'Led Zeppelin',
genre: 'Rock',
year: '10/22/1969'
}, {
title: 'Queen',
artist: 'Queen',
genre: 'Rock',
year: '07/13/1973'
}];
// Imports
Ext.require([
'Ext.grid.*',
'Ext.data.*'
]);
// Models
Ext.define('AlbumManager.model.Album', {
extend: 'Ext.data.Model',
fields: [{
name: 'title',
type: 'string'
}, {
name: 'artist',
type: 'string'
}, {
name: 'genre',
type: 'string'
}, {
name: 'year',
type: 'date',
dateFormat: 'm/d/Y'
}]
});
// Stores
Ext.define('AlbumManager.store.AlbumStore', {
extend: 'Ext.data.JsonStore',
storeId: 'albumStore',
model: 'AlbumManager.model.Album',
data: albums,
autoLoad: 'true'
});
// Plugins
Ext.define('AlbumManager.plugin.AlbumEdit', {
extend: 'Ext.grid.plugin.RowEditing',
clicksToMoveEditor: 1,
autoCancel: false
});
// Create view DOM onReady.
Ext.onReady(function () {
// Store
var albumStore = Ext.create('AlbumManager.store.AlbumStore');
var rowEditing = Ext.create('AlbumManager.plugin.AlbumEdit');
var grid = Ext.create('Ext.grid.GridPanel', {
id: 'gridPanel',
title: 'Albums',
width: 400,
height: 200,
renderTo: 'grid-example',
store: albumStore,
columns: [{
header: 'Album Title',
dataIndex: 'title',
flex: 1,
editor: {
width: 300,
allowBlank: false
}
}, {
header: 'Artist',
dataIndex: 'artist',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Genre',
dataIndex: 'genre',
width: 60,
editor: {
allowBlank: true
}
}, {
header: 'Year',
dataIndex: 'year',
width: 60,
editor: {
xtype: 'datefield',
allowBlank: true
},
renderer: Ext.util.Format.dateRenderer('M Y')
}],
plugins: [rowEditing],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Add New Album',
handler: function () {
// Create a model instance
var r = Ext.create('AlbumManager.model.Album', {
title: 'New Album',
artist: 'New Artist'
});
albumStore.insert(0, r);
rowEditing.startEdit(0, 0);
},
disabled: false
}, {
xtype: 'button',
text: 'Delete Album',
handler: function () {
Ext.MessageBox.confirm('Delete', 'Are you sure ?', function (btn) {
if (btn === 'yes') {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
albumStore.remove(sm.getSelection());
if (albumStore.getCount() > 0) {
sm.select(0);
}
}
});
},
disabled: false
}]
}]
});
});
In your fiddle you use javascript from Ext JS 4.2.0 version but CSS from Ext JS 4.0.2a version.
You always should use javascript files and CSS from same version of Ext JS framework. Otherwise you can get unexpected results as you can see in your fiddle.
When I setup your fiddle with javascript and CSS from Ext JS 4.2.1 version, everything works without problems: https://fiddle.sencha.com/#fiddle/3ft
I am creating the form below, but for some reason the select button handler doesn't
get executed. Everything else is working properly (loading data into the grid).
Is there something I'm missing?
Ext.Loader.setConfig({enabled:true});
Ext.define('Project', {
extend: 'Ext.data.Model',
fields: ['PID', 'ProjectName']
});
var projectsStore = Ext.create('Ext.data.Store',
{
model: 'Project',
autoLoad: true,
proxy:{
type: 'ajax',
url : 'projects.php?action=read',
reader:{ type:'json', root:'projects', successProperty:'success' } }
});
Ext.onReady(
function()
{
var simple = Ext.create('Ext.form.Panel', {
url:'projects.php?action=select',
frame:true,
title: 'Projects',
bodyStyle:'padding:5px 5px 0',
width: 350,
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: projectsStore,
height: 400,
title:'General',
columns: [
{header: 'Id', dataIndex: 'PID', flex: 1},
{header: 'Project Name', dataIndex: 'ProjectName', flex: 1},
]
}],
buttons: [{
text: 'Select',
handler: function() {
Ext.Msg.alert('Selecting', action.result.msg);
}
}]
});
simple.render('proj-form');
projectsStore.load();
}
);
Your code is crashing when it's running the handler because action.result.msg doesn't exist.
You can look in Firebug/Chrome Dev Tools and it would have shown you the problem.
Model
Ext.define('XXX.User', {
extend: 'Ext.data.Model',
fields: [
'name',
'email',
'nick',
'mobile',
{ name: 'create_time', type: 'date', dateFormat: 'Y-m-d H:i:s' }
]
});
Ajax Response
{
"error": "",
"errno": 0,
"success": true,
"message": "Operation performed successfully",
"data": [{
"nick": "muquaddim1",
"name": "Muquaddim One",
"id": "141",
"mobile": "01710000***",
"email": "muquaddim+1#example.com",
"create_time": "2012-02-26 14:58:29"
}]
}
Store
var user_store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
autoLoad: true,
model: 'XXX.User',
sotreId: 'user-store',
proxy: {
type: 'ajax',
url : 'proxy/user'
},
sorters: [{
property: 'create_time',
direction: 'ASC'
}]
});
Grid
var user_grid = Ext.create('Ext.grid.Panel', {
title: 'List of Users',
store: user_store,
columns: [{
header: 'Nick',
dataIndex: 'nick',
editor: {
allowBlank: false
}
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
width: 160,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
header: 'Mobile',
dataIndex: 'mobile',
width: 100,
editor: {
allowBlank: false
}
}, {
xtype: 'datecolumn',
header: 'Join Date',
dataIndex: 'create_time',
width: 90,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d H:i:s',
maxValue: Ext.Date.format(new Date(), 'Y-m-d H:i:s')
}
}]
});
Panel
var users = Ext.create('Ext.panel.Panel', {
title: 'Users',
id: 'user_panel',
items:[user_grid]
});
I am using ExtJS 4.0.7. I modified the code found in Example. Example code works fine. But it does not work. What am I missing here?
Since your data is nested in your response you need to configure a reader in your store's proxy. Try setting up your proxy like this:
proxy: {
type: 'ajax',
url : 'proxy/user'
reader: {
type: 'json',
root: 'data'
}
}