PDA

View Full Version : Problem with Ext Js row editor grid



akramwahid
7 Jun 2011, 7:25 AM
Hi, anyone please help me , My dream was to develop a web site back end using ext js row editor grid that deals with the back end my sql data base for CRUD operations, as i was searching and fed up that there were no any extjs row editor grid view demo that deals with a database.

When i run the completed site on my web server (configuration, php 5.2) the grid view was working fine, but the problem is when i insert a new row, the data are not synchronized with my sql though update and delete operation works fine,

when i insert a new row, still cells are dirty, and there were no any php error, i also confirmed that there are no any error in my php codes...




Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'img/s.gif';
Ext.QuickTips.init(); //this initialize the ext js tool tip baloon message features

var Ticket = Ext.data.Record.create([ //Here a record definition is created
{ name: 'id', type: 'int'},
{ name:'Departure', type: 'string'},
{ name:'Arrival',type:'string'},
{ name:'Airline', type: 'string'},
{ name: 'Description', type: 'string'},
{name: 'Fare', type: 'float'}
]);

//grid panel need a store and data reader may be an array reader,JSON or XML
var store = new Ext.data.Store({
api: {
create : 'ezone_sync.php?action=create',
read : 'ezone_sync.php?action=read',
update: 'ezone_sync.php?action=update',
destroy: 'ezone_sync.php?action=destroy'
},
reader: new Ext.data.JsonReader({
root:'data',
totalProperty: 'results',
idProperty: 'id'
}, Ticket),

writer: new Ext.data.JsonWriter({
writeAllFields: true
}),
autoSave: false,
autoLoad: true,
listeners: {
exception: function(proxy, type, action, o, result, records) {
if (type = 'remote') {
Ext.Msg.alert("Could not " action, result.raw.message);
} else if (type = 'response') {
Ext.Msg.alert("Could not " action, "Server's response could not be decoded");
} else {
Ext.Msg.alert("Store sync failed", "Unknown error");
}
}
}
});

function syncStore(rowEditor, changes, r, rowIndex) {
store.save();
}


var genres = new Ext.data.ArrayStore({
fields: ['Airline'],
data : [['SRI LANKAN AIRLINES'],['SINGAPORE AIRLINES'],['KENYA AIRWAYS LIMITE'],['HELI AIR MONACO (THR)'] ,['OMAN AIR (SAOC)'],['INDIAN AIRLINES'],['ROYAL JORDANIAN'],['LTU LUFTTRANSPORT-UN'],['MALAYSIAN AIRLINE SY'],['KUWAIT AIRWAYS'],['LUFTHANSA GERMAN AIR'],['THAI AIRWAYS INTERNA'],['PAKISTAN INTERNATION'],[ 'EMIRATES'],['CATHAY PACIFIC AIRWAYS'],['QATAR AIRWAYS'],['KINGFISHER AIRLINES'],['QANTAS AIRWAYS LTD'], ['KLM ROYAL DUTCH AIRL'],['SAUDI ARABIAN AIRLIN'],['UNITED AIRLINES'],['DELTA AIRLINES INC']]
});

var genres2 = new Ext.data.ArrayStore({
fields: ['Desc'],
data : [['One way'],['Two ways']]
});

var arrival_edit= new Ext.form.TextField({
allowBlank: false
});

var fare_edit = new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
allowDecimals: false });

var airline_edit=new Ext.form.ComboBox({
mode: 'local',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
store: genres,
displayField:'Airline',
//valueField: 'Airline',
allowBlank: false
});
var desc_edit= new Ext.form.ComboBox({
mode: 'local',
typeAhead: true,
triggerAction: 'all',
forceSelection: true,
store: genres2,
displayField:'Desc',
//valueField: 'Desc',
allowBlank: false

});
/*
TextField
NumberField
ComboBox
DateField
TimeField
CheckBox
release_edit = new Ext.form.DateField({
format: 'm/d/Y'
}); */
var rowEditor = new Ext.ux.grid.RowEditor({
saveText: 'Update',
listeners: {
afteredit: syncStore
}
});


var grid = new Ext.grid.EditorGridPanel({
renderTo:'grd',
frame: true,
title: 'AIR TICKET FARE CONFIGURATION',
height: 400,
width: 600,
loadMask: true,
plugins: rowEditor,
clickstoEdit: 20, //how many clicks needs to edit a row , default is 2
enableColumnMove: false,
store: store,
colModel: new Ext.grid.ColumnModel({
defaultSortable: false,
columns: [
//{header: "id", dataIndex: 'id'},
{header: "Departure", dataIndex: 'Departure'},
{header: "Arrival", dataIndex: 'Arrival',editor:arrival_edit},
{header: "Airline", dataIndex: 'Airline',editor:airline_edit,width:183},
{header: "Description", dataIndex: 'Description', editor:desc_edit},
{header: "Fare", dataIndex: 'Fare',editor:fare_edit}

]
}),

sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),

keys: [{
key: 46, //if delete key is pressed
fn: function(key,e){
var sm = grid.getSelectionModel(),
sel = sm.getSelected(),
store = grid.getStore();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove Air Ticket',
icon: Ext.MessageBox.QUESTION,
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Are you sure you want to remove?' sel.data.Fare '?',
fn: function(btn){
if (btn == 'yes'){
store.remove(sel);
store.save();
}
}
});
}
},
ctrl: false,
stopEvent: true
}],

tbar: [{
text: 'Add Air Ticket',
icon: 'img/table_add.png',
cls: 'x-btn-text-icon',
handler: function() {
grid.getStore().insert(0,new Ticket({
id: 0,
Departure: 'Colombo',
Arrival: '',
Airline: '',
Description: '',
Fare:''
}));
rowEditor.startEditing(0,true);
}
},{
ref: '../removeBtn',
text: 'Remove Air Ticket',
icon: 'img/table_delete.png',
cls: 'x-btn-text-icon',
disabled: true,
handler: function() {
rowEditor.stopEditing();
var sm = grid.getSelectionModel(),
sel = sm.getSelected();
store = grid.getStore();
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Remove Air Ticket',
icon: Ext.MessageBox.QUESTION,
buttons: Ext.MessageBox.YESNOCANCEL,
msg: 'Are you sure you want to remove ' sel.data.Fare '?',
fn: function(btn){
if (btn == 'yes'){
store.remove(sel);
store.save();
}
}
});
}
}
}]


//columnLines: true,
//enableDragDrop: true,

//CheckBoxSelectionModel,CellSelectionModel can also be used, and set single select to flase
//if u want allow the user to select multiple rows or cells at the same time


/* bbar: new Ext.PagingToolbar({
pageSize: 15, //this tell how many records to appear in a single page
store: store
})*/

});
grid.getSelectionModel().on('selectionchange', function(sm){
grid.removeBtn.setDisabled(sm.getCount() < 1);
});
//Trigger initial load
//grid.getBottomToolbar().changePage(1);
/*
var win = new Ext.Window({
title: 'Grid Filters Example',
height: 400,
width: 700,
layout: 'fit',
items: grid
}).show();
*/

});





Here is my php page, please anybody help me...............