PDA

View Full Version : Assigning values to a model dynamically



bunty
4 Oct 2012, 8:08 AM
On click of the button, I am getting the Ext.data.Model (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Model)[].

I am able to iterate through the selected records. I want to assign the model array to a store and bind it to another grid. How to do that ? Do i need to add it inside the below Ext.each or there is some better way to do this?


var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
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'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid'
});

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: 'industry'},
{name: 'desc'}
]
});

Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
Ext.each(records, function (record) {
//Iterating through the list of models
alert(record.get('company'));
});
}
}
});

Please provide some inputs.

skirtle
4 Oct 2012, 8:33 AM
Does add do what you want?

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-add

bunty
4 Oct 2012, 8:39 AM
I was looking into the loadData doc anyways........will need to try implementing this.

After having the store, i want to bind that store with another grid..

let me try all these and will definitely get b ack to this thread :)

Thanks for the immidiate response.

skirtle
4 Oct 2012, 8:41 AM
If you need to change the store for a grid use reconfigure:

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

However, it's usually best just to change the data in the existing store rather than changing which store the grid uses.

bunty
5 Oct 2012, 5:04 AM
Ok I gave it a try but it did not worked.

I am having two grids and a button. Initially the second grid will remain empty and the first grid will have some records.. When I select a few records in the first grid and click on the button, then the second grid should get populated with the only the selected rows of first grid.

Here is my code:



//Store populating the second grid
var getLocalStore = function() { return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: []
});
};
//Store populating the first grid
var getSelectedStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};

var sm = Ext.create('Ext.selection.CheckboxModel');

var grid1 = Ext.create('Ext.grid.Panel', {
id: 'grid1',
store: getSelectedStore(),
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'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid'
});

var grid2 = Ext.create('Ext.grid.Panel', {
id: 'grid2',
store: getLocalStore(),
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'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
renderTo: 'grid1'
});

Ext.widget('button', {
text: 'Click Me',
renderTo: 'btn',
listeners: {
click: function(this1, evnt, eOpts ){
var records = sm.getSelection();
getLocalStore().loadData(records,true);
grid2.getView().refresh();
}
}
});



Please let me know how to make it work.

Regards,

skirtle
5 Oct 2012, 6:37 AM
Every time you call getLocalStore it will return a different store. So the store you're adding the records to is not the same store that is attached to your grid. You can get the correct store using grid2.getStore().

bunty
5 Oct 2012, 7:50 AM
Now I am having a scenario where the second grid populated by the selected rows of the first grid will have some additional columns in the store model along with all the existing columns of the first grid store model. I am not sure how to achieve/approach this requirement. Please let me know about this