Example of editor-grid using php and mysql to save data

[cluettr]

The screencast in the learning section covers most of the js side.

[trbs]

i understand that this is an example post, but please escape the sql query so it cannot lead to an sql injection attack with something like mysql_real_escape.

    //save data to database
    if($field=='name') //the field name is being updated
        $result = mysql_query("UPDATE `names` SET `name` = '$value' WHERE `id`='$id[$row]';");

[vibez]

Thanks for writing this guide, I do have this problem when editting the cells

syntax error
http://localhost/grid/ext/ext-all.js
Line 38

This is the line

Ext.util.JSON=new(function(){var _1={}.hasOwnProperty?true:false;var _2=function(n){return n<10?"0"+n:n;};var m={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r","\"":"\\\"","\\":"\\\\"};var _5=function(s){if(/["\\\x00-\x1f]/.test(s)){return"\""+s.replace(/([\x00-\x1f\\"])/g,function(a,b){var c=m[b];if(c){return c;}c=b.charCodeAt();return"\\u00"+Math.floor(c/16).toString(16)+(c%16).toString(16);})+"\"";}return"\""+s+"\"";};var _a=function(o){var a=["["],b,i,l=o.length,v;for(i=0;i<l;i+=1){v=o[i];switch(typeof v){case"undefined":case"function":case"unknown":break;default:if(b){a.push(",");}a.push(v===null?"null":Ext.util.JSON.encode(v));b=true;}}a.push("]");return a.join("");};var _11=function(o){return"\""+o.getFullYear()+"-"+_2(o.getMonth()+1)+"-"+_2(o.getDate())+"T"+_2(o.getHours())+":"+_2(o.getMinutes())+":"+_2(o.getSeconds())+"\"";};this.encode=function(o){if(typeof o=="undefined"||o===null){return"null";}else{if(o instanceof Array){return _a(o);}else{if(o instanceof Date){return _11(o);}else{if(typeof o=="string"){return _5(o);}else{if(typeof o=="number"){return isFinite(o)?String(o):"null";}else{if(typeof o=="boolean"){return String(o);}else{var a=["{"],b,i,v;for(i in o){if(!_1||o.hasOwnProperty(i)){v=o[i];switch(typeof v){case"undefined":case"function":case"unknown":break;default:if(b){a.push(",");}a.push(this.encode(i),":",v===null?"null":this.encode(v));b=true;}}}a.push("}");return a.join("");}}}}}}};this.decode=function(_18){return eval("("+_18+")");};})();Ext.encode=Ext.util.JSON.encode;Ext.decode=Ext.util.JSON.decode;

While the table does update, I dont get any message informing me that it has done so.

[kayegil.hauan]

My Grid shows no data using this method, probably due to the php function 'json_encode()' not being installed on my server (PHP version 5.1.6).
Can anyone tell me what a call to the 'sample.php?ac=showData' should ideally output in the above example so I could work my way around the json_encode function?

[Mark]

I'm not sure what you need? Perhaps a sample of the JSON-output helps you along...

({"totalProperty":"3","results":[{"name":"Max"},{"name":"Moritz"},{"name":"Struwelpeter"}]})

Greets, Mark

[lake]

this is what i looking for,thx man!

[nunez]

YES! thanks for your code... however I could not get it to work either... I do not get any errors, but nothing happens and I don't see the 'saving data' or either of the alerts in the updateDB function... any ideas?

I test this sample and is working just fine.

The only error in the source is not returning

 {success: true/false } 

at the end of the

function saveData($field, $row, $value) 

Dont' forget to include the
ext-base.js
ext-all.js
and the css files for the grid.

Thanks bd318 for this example.
Keep the good work.

[nunez]

I edit your updateDB function to update the field by id and not by rowindex, and pass the var by post.

        function updateDB(grid, e){
            id = ds.data.items[grid.row].id;

            gridForm.submit(
                {
                    url: 'sample.php?ac=saveData',
                    
                    params: {
                        id: id,
                        field: grid.field,
                        value: grid.value
                    }, 
                    success:function(form, action) {
                        alert('Congrats!  Your changes were saved!!!!');
                    },
                    failure: function(form, action) {
                        alert('Oops the delete did not work out too well!');
                    }
                }
            );
        }

In the sample.php :

    saveData($_POST['field'], $_POST['id'], $_POST['value']); 

Then in your PHP you only need to do the

UPDATE `names` SET `name` = '$value' WHERE `id`='$id' 

[nunez]

After editing all this example, I try to use this in another app.
But the firebug is showing this error

this.el has no properties
BasicForm(null)ext-all.js (line 208)
Form(Object dom=div#teste id=teste visibilityMode=1)ext-all.js (line 210)
buildGrid()actions.js (line 113)
init()actions.js (line 120)
EventManager(function(), Object, true)ext-all.js (line 18)

[IMG]chrome://firebug/content/blank.gif[/IMG]Ext.form.BasicForm=function(el,_2){Ext.apply(this,_2);this.items=new Ext.util.Mi...

in the

gridForm.submit(...)

and the

gridForm.render('editGrid');

if I delete the gridForm.render, the error is resolve, but in the afteredit when the submit is fire, the firebug show the error again.

Anyone know what is the problem?

Is amazing, I edit the example pass from get to post and change to httpproxy and work just fine, when I copy and paste without editing anything to my app the error appear again.

If anyone can help, I appreciate.

[bd318]

Are you sure you copied the code to make the form? And make sure the id from the DIV tag in your htmlfile is set correct (editGrid)

var gridForm = new Ext.form.Form({}); 

<div id="grid-panel" style="width:1024px;height:668px;">
<div id="editor-grid"></div>

<div id="editGrid">
</div>

</div>