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']
];
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']
];