alucard001
13 Jun 2007, 7:29 AM
Hi all.
I am new to Ext and found that Ext is a very powerful to in web development.
Especially, I am very interested in inline grid editing and therefore I copy and study this example.
However, this example only show how to make the grid editable but haven't told how to store data in database.
Therefore I modify the example a little bit and ....shame on me.... I dunno how to commit the changes to database, using PHP and MySQL...
Code: grid-getting-started.js
Ext.onReady(function(){
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN'
}, ['Author', 'Title', 'Manufacturer', 'ProductGroup'])
});
var ed = Ext.grid.GridEditor;
var colModel = new Ext.grid.ColumnModel([
{ header: "Author",
width: 120,
dataIndex: 'Author',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Title",
width: 180,
dataIndex: 'Title',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Manufacturer",
width: 115,
dataIndex: 'Manufacturer',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Product Group",
width: 100,
dataIndex: 'ProductGroup',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
}
]);
colModel.defaultSortable = true;
var grid = new Ext.grid.EditorGrid('mygrid', {
ds: dataStore,
cm: colModel,
});
grid.on('afteredit', updateGrid);
grid.render();
dataStore.load();
function updateGrid(oGrid_event){
alert("This grid: " + oGrid_event.grid);
alert("The record being edited: " + oGrid_event.record);
alert("The field name being edited: " + oGrid_event.field);
alert("The value being set: " + oGrid_event.value);
alert("The original value for the field, before the edit: " + oGrid_event.originalValue);
alert("The grid row index: " + oGrid_event.row);
alert("The grid column index: " + oGrid_event.column);
}
});
Code: grid-getting-started-working.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid - Getting Started</title>
<link rel="stylesheet" href="../../incs/lib/ext/resources/css/ext-all.css" />
<script src="../../incs/lib/ext/adapter/yui/yui-utilities.js"></script>
<script src="../../incs/lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="../../incs/lib/ext/ext-all.js"></script>
<script type="text/javascript" src="grid-getting-started.js"></script>
</head>
<body>
<div id="mygrid" class="ygrid-mso"></div>
</body>
Actually, can anyone please tell me how to commit the changes to a MySQL database, without using any JSON? After searching the forum with no luck, I just want to keep it simple (As I think Ext is complex enough to pick up...) by sending XML back and forth... Please correct me if I am wrong.
And most importantly, it will be great to put the whole output to a tutorial page so that beginner like me can quickly know what they want to do and how they can do with the example given.
So, can anybody give some help on it to completed the code?
Very thanks for all your kind help!!!
I am new to Ext and found that Ext is a very powerful to in web development.
Especially, I am very interested in inline grid editing and therefore I copy and study this example.
However, this example only show how to make the grid editable but haven't told how to store data in database.
Therefore I modify the example a little bit and ....shame on me.... I dunno how to commit the changes to database, using PHP and MySQL...
Code: grid-getting-started.js
Ext.onReady(function(){
var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'sampledata-sheldon.xml'}),
reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ASIN'
}, ['Author', 'Title', 'Manufacturer', 'ProductGroup'])
});
var ed = Ext.grid.GridEditor;
var colModel = new Ext.grid.ColumnModel([
{ header: "Author",
width: 120,
dataIndex: 'Author',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Title",
width: 180,
dataIndex: 'Title',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Manufacturer",
width: 115,
dataIndex: 'Manufacturer',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
},
{ header: "Product Group",
width: 100,
dataIndex: 'ProductGroup',
editor:new ed(
new Ext.form.TextField({
allowBlank:false
})
)
}
]);
colModel.defaultSortable = true;
var grid = new Ext.grid.EditorGrid('mygrid', {
ds: dataStore,
cm: colModel,
});
grid.on('afteredit', updateGrid);
grid.render();
dataStore.load();
function updateGrid(oGrid_event){
alert("This grid: " + oGrid_event.grid);
alert("The record being edited: " + oGrid_event.record);
alert("The field name being edited: " + oGrid_event.field);
alert("The value being set: " + oGrid_event.value);
alert("The original value for the field, before the edit: " + oGrid_event.originalValue);
alert("The grid row index: " + oGrid_event.row);
alert("The grid column index: " + oGrid_event.column);
}
});
Code: grid-getting-started-working.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid - Getting Started</title>
<link rel="stylesheet" href="../../incs/lib/ext/resources/css/ext-all.css" />
<script src="../../incs/lib/ext/adapter/yui/yui-utilities.js"></script>
<script src="../../incs/lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<script src="../../incs/lib/ext/ext-all.js"></script>
<script type="text/javascript" src="grid-getting-started.js"></script>
</head>
<body>
<div id="mygrid" class="ygrid-mso"></div>
</body>
Actually, can anyone please tell me how to commit the changes to a MySQL database, without using any JSON? After searching the forum with no luck, I just want to keep it simple (As I think Ext is complex enough to pick up...) by sending XML back and forth... Please correct me if I am wrong.
And most importantly, it will be great to put the whole output to a tutorial page so that beginner like me can quickly know what they want to do and how they can do with the example given.
So, can anybody give some help on it to completed the code?
Very thanks for all your kind help!!!