PDA

View Full Version : Any Help on update record in jason data from grid panel



ssyeda
7 May 2009, 6:51 AM
Hi all ,

Guys I am trying to update the record of data which are in jason format & display in grid . From grid I am trying open a record in form & update it but I want same record to be update in jason data.

/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
Ext.onReady(function() {
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// var bd = Ext.getBody();
/*
* ================ Simple form =======================
*/
// bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
var AddClicked = false;
var simple = new Ext.FormPanel({
labelAlign: 'right',
labelWidth: 175,
buttonAlign: 'right',
items: [
new Ext.form.TextField({
id: 'company',
fieldLabel: 'company ',
name: 'company',
allowBlank: false
}), new Ext.form.TextField({
fieldLabel: 'price',
name: 'price'
}), new Ext.form.TextField({
fieldLabel: 'change',
name: 'change'
}), new Ext.form.TextField({
fieldLabel: '%change',
name: 'pctchange',
vtype: 'email'
}), new Ext.form.TimeField({
fieldLabel: 'lastchange',
minValue: '8:00am',
maxValue: '6:00pm'
})],
buttons: [{
text: 'Save',
handler: function() {

var s = grid.getSelectionModel();
var r = s.getSelected();
var t = s.getCount();
//alert(t);
//var t = isSelected(r);
//alert(t);
if(AddClicked == false )
{
alert('doubleclick');
var companyfrm = Ext.getCmp('company').getValue();
r.set('company', companyfrm);
r.commit();
AddClicked = true;
}
else
{

alert('TESTTT0');

var record = Ext.data.Record.create([{
name: 'company'
},
{
name: 'price',
type: 'float'
},
{
name: 'change',
type: 'float'
},
{
name: 'pctChange',
type: 'float'
}]);
var companyfrm = Ext.getCmp('company').getValue();
// var value1 = 'test';
var rec = new record({
'company': companyfrm
});
var myReader = new Ext.data.JsonReader({
root: 'result.records'
},rec );

// var store1 = new Ext.data.Store({reader: myReader});
// store1.add(rec);
// store.add(rec);
AddClicked = false ;
// condition for add method
}



}
},
{
text: 'Cancel',
handler: function() {
win.close();
}
},
{
text: 'Clear',
handler: function() {
simple.getForm().reset();
}
}]
});
var SaveButton = new Ext.Button({
text: 'SaveButton',
handler: function() {
}
});
win = new Ext.Window({
layout: 'fit',
width: 400,
height: 300,
closeAction: 'hide',
plain: true,
items: [simple]
});
win.render(document.body)
function change(val) {
if (val > 0) {
return'<span style="color:green;">' + val + '</span>';
} elseif (val < 0) {
return'<span style="color:red;">' + val + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val) {
if (val > 0) {
return'<span style="color:green;">' + val + '%</span>';
} elseif (val < 0) {
return'<span style="color:red;">' + val + '%</span>';
}
return val;
}

//Load in Json Format
var jSource = {
"success" : true,
"totalCount": 2,
"records" : [{
company : "Company1",
company1 : "Company22",
price : "3.00"
}, {
company : "Company2",
company1 : "Company2",
Price : "3.50"
}]
};




var company = Ext.data.Record.create([
{ name:'company'},
{ name:'company1'},
{ name:'price'},
]);

var myReader = new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: 'records'
},company );


var myProxy = new Ext.data.MemoryProxy(jSource);
var jsonstore = new Ext.data.Store({
proxy:myProxy,
reader: myReader,
autoLoad:true });


//handler funcions
var win;
var aaa = function(){
AddClicked = true;
addPlant();

}

var addPlant = function() {
win = new Ext.Window({
layout: 'fit',
width: 400,
height: 300,
closeAction: 'hide',
plain: true,
items: [simple]
});
win.show();
alert(AddClicked);
}
var editPlant = function() {
alert("Edit Plant");
}
var deletePlant = function() {
alert("delete Plant");
}
// function button
var addPlantBtn = new Ext.Toolbar.Button({
text: 'Add Plant',
handler: aaa,
minWidth: 25
});
var editPlantBtn = new Ext.Toolbar.Button({
text: 'Edit Plant',
handler: editPlant
});
var deletePlantBtn = new Ext.Toolbar.Button({
text: 'Delete Plant',
handler: deletePlant
});
// tbar to add button
var tbar1 = new Ext.Toolbar([
addPlantBtn, {
xtype: 'tbseparator'
},
editPlantBtn, {
xtype: 'tbseparator'
},
deletePlantBtn
])
// create the Grid
var grid = new Ext.grid.GridPanel({
store: jsonstore,
columns: [{
id: 'company',
header: "Company",
width: 160,
sortable: true,
dataIndex: 'company'
},{
id: 'company1',
header: "Company1",
width: 160,
sortable: true,
dataIndex: 'company1'
},
{
id: 'price',
header: "Price",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
},
{
id: 'Change',
header: "Change",
width: 75,
sortable: true,
renderer: change,
dataIndex: 'change'
},
{
id: '%Change',
header: "% Change",
width: 75,
sortable: true,
renderer: pctChange,
dataIndex: 'pctChange'
},
{
id: 'LastUpdated',
header: "Last Updated",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
stripeRows: true,
autoExpandColumn: 'company',
height: 450,
width: 1200,
//height:350,
//width:600,
title: 'Array Grid',
tbar: [tbar1],
listeners: {
'rowdblclick': function(grid, rowIndex, columnIndex, e) {
var s = grid.getSelectionModel();
var r = s.getSelected();
// simple.getvalues(true);
win.show();
// alert(r.get('company'));
simple.getForm().loadRecord(r);
// r.set('company','test');
// r.commit();
// alert(r.get('company'));
/* var record= grid.store.getAt(rowIndex);



{
grid.getStore().add([record]);
record.commit();
}*/// simple.getForm().reset();
// alert(r);
// alert(r.get('price'));
// alert(r.get('changes');
// alert(r.get('price'));
// alert(r.get('changes');
}
}
});
grid.render('grid-example');
/* function dblclick (grid, rowIndex, e) {
};
grid.on('rowdblclick', dblclick, grid);*/
var record = grid.getSelectionModel().getSelected();
// alert(record.get());
//grid.getSelectionModel().selectFirstRow();
grid.getSelectionModel().selectFirstRow();
// grid.render('grid-example');
// grid.getSelectionModel().selectFirstRow();
// var Id = grid.getItemId();
});


I can open record(jason data) in form but I coundn't update record in jason data .


Any help will be great help .

thanks
Sakina

7 May 2009, 6:56 AM
1: It's JSON
2: Please repost indented code in code tags