I have this example code from Sencha's website
Ext.onReady(function()
{
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"home#simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge#simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid'
});
});
This ptype: 'cellediting' plugin allows for inline cell editing by just clicking on textfield.
I just cannot find any posts on how and where the changed value gets saved? How can I add a listener to a cell so that after each change I will be able to alert() the new value?
Thanks for any tips...
The record values are updated each time the editor is blurred (i.e. lose focus). Ext keeps track of fields in the records that have been modified, until you commit the changes (by syncing the store, for example).
To be notified that a field has been edited, use the edit event of the plugin. As you can see in the doc, you can install a listener for this event directly in the grid (no need to add the listener specifically to the plugin).
Edit
With your code, that would be something like this:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins:
[{
ptype: 'cellediting',
clicksToEdit: 1
}],
height: 200,
width: 400,
renderTo: 'grid',
listeners: {
edit: function(editor, e) {
var record = e.record;
alert(Ext.String.format(
'The field "{0}" or record #{1} has been changed from {2} to {3}',
e.field, record.get('id'), e.originalValue, e.newValue
));
alert('The following fields of the records are dirty: ' + Ext.Object.getKeys(record.modified).join(', '));
}
}
});
Related
I'm using Ext Js v6.2, In my application table constructed with ext js grid, I want to add combobox to specific cell [DEMO IMAGE ATTACHED], when I try to add combobox entire cell changes to combobox, But I need specific cell to be combobox. Here my code, I've searched in documentation and other stuff it doesn't help.please solve the problem.
Ext.define('OtherCharges1', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 'name'},
{name: 'age', mapping: 'age'},
{name: 'marks', mapping: 'marks'},
{name: 'rate', mapping: 'rate'}
]
});
var newData1 = [
{name: "Freight"},
{name: "Insurance" },
{name: " Addl Chrg(High Sea)"},
{name: "Revenue Deposit on"}
]
var gridStore3 = Ext.create('Ext.data.Store', {
model: 'OtherCharges1',
data: newData1
});
var otherStore1 = Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
id: 'OtherId',
store: gridStore3,
stripeRows: true,
width: '100%',
collapsible: false,
enableColumnMove: false,
columnLines: true,
sortableColumns: false,
enableColumnHide: false,
enableColumnResize: false,
enableRowHeightSync: true,
columns:
[
{
header: "",
dataIndex: 'name',
flex: 1
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: '',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'marks',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'rate',
flex: .5,
sortable: true,
hideable: false,
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});
To enable editing the grid in a specific cell you need to edit the beforeedit event. Create a validation to make sure you are editing the cell you want.
In this case you will only edit the cell in column 1 and row 1.
grid.on('beforeedit', function(editor, e) {
if (e.colIdx === 1 && e.rowIdx === 1)
{
return true;
}
else
{
return false;
}
});
Remember that the ExtJS grid starts at 0.
See this example fidlle.
Here's an EXTJS rowexpander implementation
http://jsfiddle.net/Litote0707/xPpf2/
When you expand it, you can see the price.
Instead of price, can I show another custom grid something like this?
Ext.define('my.app.main.CustomList', {
extend: 'Ext.grid.Panel',
title: 'List in Rowexpander',
store: Ext.data.StoreManager.lookup('myStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});
My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well
I have a grid panel and its code is:
{
xtype: 'gridpanel',
x: 10,
y: 10,
autoScroll : true,
// height: 300,
width: 300,
title: 'Grid Panel',
store: 'peopleStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'gender',
text: 'Gender'
},
{
xtype: 'numbercolumn',
dataIndex: 'age',
text: 'Age'
}
]
}
My store structure is :
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
proxy: {
type: 'localstorage',
id: 'PeopleInfo'
}
});
I have a add row button. But only 25 rows are displayed and remaining rows goes behind these 25 rows. Does anyone knows about this problem?
When my app had a similar issue, I fixed it by setting the proxy's limitParam to the empty string, "", which is what the docs recommend if you don't want to send a limit parameter.
It could also be a result of the store's pageSize.
I want to be able to edit grid colums inline as it is shown in a simple grid example in AppSDK docs
https://developer.help.rallydev.com/apps/2.0rc1/doc/#!/example/Grid
but it looks like that this functionality is not available by default if when a custom store is used:
_createGrid: function(stories) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: stories,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
//other columns...
]
});
}
In my app when I click on the Name the field does not become editable as it is in the simple grid example.
The code can be modified as follows to add inline edit capability:
set editor to 'textfield' for the Name column, set grid's selType to 'cellmodel', and instantiate CellEditing plugin.
_createGrid: function(stories) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: stories,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name', editor: 'textfield'
}
//other columns...
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
}
Please see documentation on Ext.grid.plugin.CellEditing here