PDA

View Full Version : updating the grid



lavap
7 May 2010, 4:00 AM
Hi

I created a grid.And I clicked the row in the it wil open a window.
Now I want that if I change the data in the window it should automatically update the grid...
ipdating is not happening..:((
suggest me what I can do.....

check my code:




Ext.onReady(function () {

var grid1 = new Ext.grid.GridPanel({

title: 'MyGrid',

closable: true,

id: 'gd',

bodyStyle: 'color:blue',

store: new Ext.data.Store({

reader: new Ext.data.JsonReader({

root: 'rows',

id: 'idg',

totalProperty: 'results',

fields: ['booktitle', 'publisher', 'price']

}),

url: 'Jsearch.json'

}),

sm: new Ext.grid.RowSelectionModel({

singleSelect: true

}),

cm: new Ext.grid.ColumnModel([{

id: 'booktitle',

header: 'booktitle',

width: 40,

sortable: true,

dataIndex: 'booktitle'

},

{

header: 'publisher',

width: 20,

sortable: true,

dataIndex: 'publisher'

},

{

header: 'price',

width: 20,

sortable: true,

dataIndex: 'price'

}]),

viewConfig: {

forceFit: true,

loadMask: true

}

});

var combo = new Ext.form.ComboBox({

store: new Ext.data.SimpleStore({

fields: ['publisher'],

data: exampleData.publisher
}),

displayField: 'publisher',

typeAhead: true,

name:'publisher',

mode: 'local',

fieldLabel: 'Publisher Name',

triggerAction: 'all',

emptyText: 'Select publisher Name...',

selectOnFocus: true,

labelSeparator: ' '

});

var myFormWin;

var myFormPanel = new Ext.form.FormPanel({

id: 'grdform',

bodyStyle: 'padding:10px 0 35px 10px;',

items: [{

mode: 'local',

xtype: 'textfield',

fieldLabel: 'BookTitle',
name: 'booktitle'

},

combo,

{

xtype: 'textfield',

fieldLabel: 'Price',
name: 'price'

},{

buttons: [{

text: 'update',

handler: function () {

myFormPanel.getForm().updateRecord(myNewRecord);

//myFormWin.hide();

}

}, {

text: 'close',

handler: function () {

myFormWin.close();

//myFormWin.hide();

}

}]

}]

});

grid1.on('rowdblclick', function (grid, rowIndex, e) {

if(!myFormWin){

myFormWin = new Ext.Window({

width: 300,

title: 'update Book Detail',

height: 200,

closable: true,

items: [myFormPanel]

});

}

myFormWin.show();

var rec = grid.getStore().getAt(rowIndex);

myFormPanel.rec = rec;

myFormPanel.getForm().loadRecord(rec);

});


var TopicRecord = Ext.data.Record.create([

{name: 'booktitle', mapping: 'booktitle'},

{name: 'publisher', mapping: 'publisher'},

{name: 'price', mapping: 'price'}

]);


var myNewRecord = new TopicRecord(

{

booktitle: 'booktitle',

publisher: 'publisher',

price: 'price',

}

);

grid1.store.load();

var button = Ext.get('show-grd');

button.on('click', function () {

var txtfield = Ext.get('srch').dom.value;

if(txtfield != '') {

alert('open Grid')

}
else {

alert('enter some text')
}

});

var win = new Ext.Window({

width: 500,

height: 300,

layout: 'fit',

allowBlank: false,

closeAction: 'hide',

plain: true,

items: [grid1]

});

button.on('click', function () {
var srch = Ext.get('srch').dom.value;

if (srch) {

if (win) {

win.show();

}

}

});
});

Ext.ns('exampleData.publisher');

exampleData.publisher=[
['heathrow'],

['cland4'],
['skyring'],

['apeldon'],

['streek bus'],

['megawhill']

];

Condor
7 May 2010, 5:57 AM
It's:

myFormPanel.getForm().updateRecord(myFormPanel.rec);

lavap
9 May 2010, 7:28 PM
:)):):):):)

Thank uuu

its working fine...

lavap
9 May 2010, 10:36 PM
Hey

when I edit the data it is updating in the grid.
But when i refresh the browser it is not showing the changed data...

Condor
10 May 2010, 4:17 AM
You are only modifying the store when clicking 'update'.

Ext won't magically change Jsearch.json on your server! You need a server application that can change the data (and you could use Ext.Direct to send the updates to the server).