PDA

View Full Version : Altering data in Ext.data.Model



bunty
5 Oct 2012, 7:44 PM
HI all,

Below are the two models I am having:


Ext.define('Company', { extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});


Ext.define('CompanyDemo', { extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'total'}
]
});

These two models are associated with two different grids. I will select some rows from one grid (which is associated with Company model) and only the selected rows will be displayed in the second grid on a button click (which is associated with CompanyDemo model, initially this model is empty and does not have any data)

This is the grid with Company model:


var grid2 = Ext.create('Ext.grid.Panel', { id: 'grid2',
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{text: "Industry", dataIndex: 'industry'},
{text: "Description", dataIndex: 'desc'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid'
});

I am able to get the selected data from this grid. After getting this data, I need to replace the Industry and Desc data and replace it with Total (Acording to the model structure given above). This is how I am getting the selected rows of the grid with Company model:


Ext.widget('button', { text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
Ext.each(records, function (record) {
var modelData = record.getData(true);
//NOt sure what to do after this, there should be some pop/push related code
});
grid1.getStore().loadData(records,true);
}
}
});

I am not sure how to replace the two fields from 1st model and add new data in it before displaying it in the second grid.

Please let me know about this.

vietits
5 Oct 2012, 11:01 PM
You only need to assign value to total field as below. You don't need to remove extra fields because they will be ignored when you load data to store.


Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
Ext.each(records, function (record) {
var modelData = record.getData(true);
//NOt sure what to do after this, there should be some pop/push related code
modelData.total = 'Total value here'; //
});
grid1.getStore().loadData(records,true);
}
}
});

bunty
5 Oct 2012, 11:17 PM
If I do this then nothing is displayed in the total column:


Ext.widget('button', { text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
Ext.each(records, function (record) {
var modelData = record.getData(true);
//A dummy value as of now
modelData.total = '10';
});
grid1.getStore().loadData(records,true);
}
}
});

This is the grid i want to populate:


var grid1 = Ext.create('Ext.grid.Panel', { id: 'grid1',
store: getSelectedStore(),
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{text: "Total", dataIndex: 'total'},
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid1'
});

Please have a look at the attachment.

vietits
5 Oct 2012, 11:24 PM
Sorry, I was not careful looking at your code. Try to fix your code as below:


Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
var data = [];
Ext.each(records, function (record) {
var modelData = record.getData(true);
//NOt sure what to do after this, there should be some pop/push related code
modelData.total = 'Total';
data.push(modelData);
});
// grid1.getStore().loadData(records, true);
grid1.getStore().loadData(data, true);
}

}
});

bunty
5 Oct 2012, 11:49 PM
In chrome I am getting an exception:

"Undefined is not a function"

It is thrown in this line:


grid1.getStore().loadData(data, true);

vietits
6 Oct 2012, 12:48 AM
The example below works fine with Ext 4.1.1 & Chrome:


Ext.onReady(function(){
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
['Citigroup, Inc.', 49.37, 0.02, 2.64, '9/1 12:00am'],
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am']
];


Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});


Ext.define('CompanyDemo', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'total'}
]
});


var store1 = Ext.create('Ext.data.Store', {
model: 'CompanyDemo',
proxy: 'memory'
});


var grid1 = Ext.create('Ext.grid.Panel', {
id: 'grid1',
store: store1,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{text: "Total", dataIndex: 'total'},
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: Ext.getBody()
});


var store2 = Ext.create('Ext.data.Store', {
model : 'Company',
data: myData
});


var grid2 = Ext.create('Ext.grid.Panel', {
id: 'grid2',
store: store2,
selType: 'checkboxmodel',
selModel: {
mode: 'multi'
},
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{text: "Industry", dataIndex: 'industry'},
{text: "Description", dataIndex: 'desc'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: Ext.getBody(),
tbar: {
items: [{
text: 'Copy selected records to grid1',
handler: function(){
var records = grid2.getSelectionModel().getSelection();
var data = [];
Ext.each(records, function (record) {
var modelData = record.getData(true);
//NOt sure what to do after this, there should be some pop/push related code
modelData.total = 'Total';
data.push(modelData);
});
// grid1.getStore().loadData(records, true);
grid1.getStore().loadData(data, true);
}
}]
}
});
});

bunty
6 Oct 2012, 1:02 AM
What is the difference between Ext.grid.dummyData and var myData?

I am aware of the second one but what is that dummyData? Are both of them same?

Please let me know about this.

vietits
6 Oct 2012, 1:30 AM
I don't know Ext.grid.dummyData. Maybe it has been used in some previous version of Ext but not in Ext 4.x.

bunty
6 Oct 2012, 1:49 AM
I saw this in the grid-plugin example code only.........have the look at it