PDA

View Full Version : I need help with some basics! data binding, or CRUD and basic app structure



rolaaus
9 Jul 2012, 5:19 PM
I downloaded ExtJS4 about a week ago, and have been playing around with it for a little while, and yesterday ran across the Sencha Architect design studio, and just started playing around with that.

My problem is, I can't find any simple and easy to understand (that last part being key) help or tutorial about linking my app to data. I don't have any particular favorite data store yet, I don't care if I use SQLLite or XML. What I would love to have - if possible is data this is available to my app user off-line, so that can continue to use the application when not connected, but will sync when they are connected. If that's not possible, than could someone please just point me to the best option to use with ExtJS as far as data goes.

Also, I have looked at the MVC examples that came with the API, and while I understand the basic concept, I tried taking the existing example application and modifying it for my own needs, but haven't been able to get anywhere with it.

I'm not really the type of programmer that maps out their application ahead of time, planning on how many forms I'll need, and which dataset I will need a detail form for and which one I'll need a record list for (as in, a list of employees on one form that opens up an employee detail form). But I would like to know how to use the MVC model in my application ... if that is the best practice, or if there is a more preferred practice, a URL reference to that would be greatly appreciated.

I've been a database programmer for the past 15 years, and I am wanting to update my skills with JavaScript in order to have the option of creating web based database available to anyone that hires me, or contracts me for a special project. So, really I have the existing knowledge of designing databases, but I just don't know how to apply what I know to JS and ExtJS specifically, and the examples/demos that I have aren't that good at helping out newbies.

Thanks in advanced, I appreciate the assistance/references.

rolaaus
9 Jul 2012, 5:58 PM
I have read through the documentation and understand that there are several components needed to link to data, such as Store, View, Proxy, and as I mentioned, I looked at the example(s) that tie them together, but have not been able to take an existing example and utilize my own data. And, I haven't found any generic documentation that shows how each of these components tie together in order to produce a form that displays data pulled from anything other than an static array.

scottmartin
9 Jul 2012, 6:18 PM
Here are a few quick examples I posted that will help with the data aspect: (mysql/php)
http://www.sencha.com/forum/showthread.php?229410

I am not sure of your background for server side, but frameworks like CodeIgniter are good options for handling the backend.

You will want to use JSON for transferring data between client/server.

Here is a good article on MVC
http://www.sencha.com/learn/the-mvc-application-architecture/

Just realize that MVC is basically for organizing your code. There are a few nuances, but it will start to click.

For data sync, you may want to look at Sencha.IO

Regards,
Scott

rolaaus
9 Jul 2012, 6:42 PM
Scott,

Thanks for posting, but the link to the thread you posted is to a premium forum and I can't view. I can see you have some zip'd files, but I couldn't even download those :-(

Could you possible re-post those zip files to this thread, or is there some other alternative for me to see this info?

scottmartin
10 Jul 2012, 7:25 AM
Here are the files

37025
37026

Scott.

rolaaus
10 Jul 2012, 11:31 AM
I managed to walk through the documentation/tutorial. I got everything to work (eventually), right up until the very last sync() portion. I was actually changing all the various names of the Stores, Proxy's etc. and figured out that I needed to change the object name that was calling the sync to reflect my new name. I also had problems because I've been working on my Windows7 laptop running IIS, but I eventually got the JSON/XML data to load. The problem with the sync() was an error in the JS console that came back from the POST with "405 (Method Not Allowed) "<br><br>I've tried doing some searching on Google for this error, but couldn't find anything specific for this situation (found some results for Dynamics and what-not)<br><br>Any ideas? I mean, other than switching to LAMP? I do have a portable version of Apache on a USB device, but prefer to at least attempt to fix things and keep the configuration the way things are before jumping ship and giving up on IIS.

scottmartin
10 Jul 2012, 11:40 AM
I am a Apache person myself ... I found this article:
http://www.somacon.com/p126.php

There may be a few other options to try if this does not work.

Scott.

rolaaus
14 Jul 2012, 4:45 PM
I just wanted to thank you for posting, especially going out of your way and uploading the files from the paid support post you previously referenced.

As I mentioned in my previous post, I did get some of the data functionality working, though I eventually ran into some roadblocks with saving/updating changes to existing records ... which meant I was going to have problems with adding records as well - since I am trying to figure out things in stages, I hadn't even gotten to that yet.

FYI, I did get the error resolved regarding the 405 resource not allowed, but my sample stuff still wasn't changing, and it may have been (most likely) because the data was (I believe it's called) "in-line". Instead of being an XML file or an external database, the data itself was in the JS file(s).

Anyways, taking a look at the examples you gave me (and actually taking the steps needed to look at them) helped me out tremendously.

I know that I will most likely end up using MySQL for my underlying data, I was trying to play around with XML, and with the idea of using local storage and syncing with an on-line database. I'm going to look into some other resources for this scenario, but without this information, I wouldn't have been able to proceed.

Not only did you show me what I was needing in order to proceed, but the example files give me an idea of where the off-line sync is headed. Basically, you've helped me, though indirectly, with the next step as well.

Oh yeah, and one last thing, I managed to take the MVC application example and "make it my own", which is what I was doing when I walked through the Documentation's example. There was a lot of problems with typo's in name changing and with code format (semi-colon's, bracket's, etc.) but I eventually got it all worked out - except for the data changes, as I mentioned. But now I'll have to covered as well. I should have no problems taking these examples you uploaded and making them my own as well.

scottmartin
14 Jul 2012, 6:46 PM
No problem. Glad I was able to help.

Scott.

habib.maa22
15 Jul 2012, 5:10 AM
same to you..................

louql
12 Aug 2012, 1:58 AM
Here are the files

37025
37026

Scott.

I have read codes in the file. It seems that we have to explicitly use store.load() to reload the data from server in order to get it correctly displayed in the grid panel.

but in the MVC example: http://www.sencha.com/learn/the-mvc-...-architecture/
s (http://www.sencha.com/learn/the-mvc-application-architecture/)tore.sync() is the only thing there.

I am confused about these two differences. Actually I met a problem about the sync() function.
I use store.add() following by store.sync(). The server will process the request and return the ID of the new created item in this format:


{
'success': true,
'id': 8
}

Then I found the new item in the Grid will turn in to blank line.
Do I have to use load() to make it ok in Grid?
I feel reluctance to do so, because it seems like an additional waste communication with server. I hope I can set up a callback function to attach the return ID to the new item and then everything is fine.

scottmartin
12 Aug 2012, 8:24 AM
Sync will sync the data with the store and the grid will see that changes. I have load() in there for simplicity.

Scott.

papasilo
10 Oct 2012, 1:23 AM
Hi I was reading with your thread, I download your sample file attach by scott though i tried to recreate it into my project but it seems in the php file an error occur.

it says

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\InnosoftCRM\php\PersonelAdd.php on line 21

Notice: Undefined variable: arr in D:\xampp\htdocs\InnosoftCRM\php\PersonelAdd.php on line 25
{"success":true,"action":null}

it seem in the $jasonData portion doesnt get any data from the database ..

btw here's my code


<?php

include 'connection.php';


function getInputParms()
{
// $result = NULL;
// if(function_exists('json_decode')) {
$jsonData = json_decode(trim(file_get_contents('php://input')), true);
$result = $jsonData['data'][0];
// }
return $result;
}


function getPersonel($personelID)
{
$sql = 'Select * From Personel=' . $personelID;

$result = mysql_query($sql); // result set

while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};


return $arr; //encode the data in json format
}


try {
// $params = json_decode(file_get_contents('php://input'));
// unset($params->PersonelID);


$jsonData = getInputParms();


$statement = "insert into personel (FirstName, LastName, Position, Department, ImageUrl) values('" . $jsonData['FirstName'] . "','" . $jsonData['LastName'] . "'";
$statement .= ",'" . $jsonData['Position'] . "','" . $jsonData['Department'] . "','" . $jsonData['ImageUrl'] . "')";


$jsonResult = mysql_query($statement);
$id = mysql_insert_id();


echo $id;


$data = getPersonel($id);


$jsonResult = array(
'success' => true,
'action' => $data
);


} catch(Exception $e) {
$jsonResult = array(
'success' => false,
'message' => $e->getMessage()
);
}


echo json_encode($jsonResult);


?>

papasilo
10 Oct 2012, 1:54 AM
also I tried your sample data. still it has the same errors: :(

Notice: Undefined variable: id in D:\xampp\htdocs\extjs\examples\Sencha MySql\save_product.php on line 47

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in D:\xampp\htdocs\extjs\examples\Sencha MySql\save_product.php on line 65

Notice: Undefined variable: arr in D:\xampp\htdocs\extjs\examples\Sencha MySql\save_product.php on line 69
{"success":true,"data":null}



<?php

function getInputParms()
{
$result = NULL;
if(function_exists('json_decode')) {
$jsonData = json_decode(trim(file_get_contents('php://input')), true);
$result = $jsonData['data'][0];
}
return $result;
}


//database parameters
$user='root';
$pw='';
$db='sencha';
$table='products';

//make database connection
$connection = mysql_connect("localhost", $user, $pw) or
die("Could not connect: " . mysql_error());
mysql_select_db($db) or die("Could not select database");


saveProduct();

function saveProduct()
{
$jsonData = getInputParms();


//print_r($jsonData);


if (is_array($jsonData)) {


if ($jsonData['idProduct'] > 0) {
$id = $jsonData['idProduct'];


$sql = 'UPDATE products SET productName = "'.$jsonData['productName'].'",qty = '.$jsonData['qty'].',rate = '.$jsonData['rate'].',total = '.$jsonData['total'];
$sql .= ' WHERE idProduct = '.$jsonData['idProduct'];
$result = mysql_query($sql); // result set
} else {
$sql = 'INSERT INTO products (productName,qty,rate,total) VALUES ("'.$jsonData['productName'].'",'.$jsonData['qty'].','.$jsonData['rate'].','.$jsonData['total'].')';
$result = mysql_query($sql); // result set
$id = mysql_insert_id();
}
}


$data = getProduct($id); // already encoded


$return = array(
'success' => TRUE,
'data' => $data // this should be be data returned from new/updated record in table
);

$return = json_encode($return);
echo $return;
}




function getProduct($idProduct)
{
$sql = 'SELECT * FROM products WHERE idProduct = '.$idProduct;

$result = mysql_query($sql); // result set

while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};


return $arr; //encode the data in json format
}


?>


Though in the list_product.php its working.. :>

I hope scott will reply soon..

Thanks in advance!

scottmartin
10 Oct 2012, 4:34 AM
What version of PHP are you using? It sounds like you may need to use $_GET/$_REQUEST
instead to get params.

Scott.

papasilo
10 Oct 2012, 4:40 AM
Thanks scott.. Ill try to check it tomorrow. Cause im with my bed right now hehehe... Hope ur still here . :)

papasilo
10 Oct 2012, 2:53 PM
Hi Scott,

My Php version is 5.3.8.. also the sample that you have provided is running right now..
I tried to convert your codes into sencha touch, it says that :

[WARN][Ext.data.reader.Reader#process] Unable to parse the JSON returned by the server: Error: You're trying to decode an invalid JSON String: <br /><b>Fatal error</b>: Cannot use object of type stdClass as array in <b>D:\xampp\htdocs\InnosoftCRM\php\PersonelAdd.php</b> on line <b>10</b><br />


and here is my code in Php:

<?php


include 'connection.php';


function getInputParms()
{
$result = NULL;
if(function_exists('json_decode')) {
$jsonData = json_decode(file_get_contents('php://input'));
$result = $jsonData['data'][0];
}
return $result;
}


function getPersonel($personelID)
{
$sql = 'Select * From Personel=' . $personelID;

$result = mysql_query($sql); // result set

while($rec = mysql_fetch_array($result, MYSQL_ASSOC)){
$arr[] = $rec;
};


return $arr; //encode the data in json format
}


try {
// $params = json_decode(file_get_contents('php://input'));
// unset($params->PersonelID);


$jsonData = getInputParms();


$statement = "insert into personel (FirstName, LastName, Position, Department, ImageUrl) values('" . $jsonData['FirstName'] . "','" . $jsonData['LastName'] . "'";
$statement .= ",'" . $jsonData['Position'] . "','" . $jsonData['Department'] . "','" . $jsonData['ImageUrl'] . "')";


$jsonResult = mysql_query($statement);
$personelID = mysql_insert_id();


$data = getPersonel($personelID);


$jsonResult = array(
'success' => true,
'action' => $data
);


} catch(Exception $e) {
$jsonResult = array(
'success' => false,
'message' => $e->getMessage()
);
}


echo json_encode($jsonResult);


?>


Model:


Ext.define('InnosoftCRM.model.PersonelModel',
{
extend: 'Ext.data.Model',
config:
{
// idProperty: 'PersonelID',
fields:
[
{ name: 'PersonelID' },
{ name: 'FirstName' },
{ name: 'LastName' },
{ name: 'Position' },
{ name: 'Department' },
{ name: 'ImageUrl' }
],


proxy:
{
type: 'ajax',
actionMethods: 'POST',
api:
{
create : 'php/PersonelAdd.php',
read : 'php/Personel.php',
update : 'php/PersonelUpdate.php'
},
reader:
{
type: 'json',
rootProperty: 'action',
messageProperty: 'message'
},
writer:
{
type: 'json',
writeAllFields: true,
allowSingle: false,
rootProperty: 'action'
}
}
},


fullName: function()
{
var d = this.data,
names = [d.FirstName, d.LastName];
return names.join(" ");
},
getID: function()
{
var d = this.data,
PersonelID = [d.PersonelID];
return PersonelID.join(" ");
},
getFirstName: function()
{
var d = this.data,
FirstName = [d.FirstName];
return FirstName.join(" ");
},
getLastName: function()
{
var d = this.data,
LastName = [d.LastName];
return LastName.join(" ");
},
getPosition: function()
{
var d = this.data,
Position = [d.Position];
return Position.join(" ");
},
getDepartment: function()
{
var d = this.data,
Department = [d.Department];
return Department.join(" ");
},
getImg: function()
{
var d = this.data,
ImageUrl = [d.ImageUrl];
return ImageUrl.join(" ");
}
});


and the controller.


updatePersonelInfo: function(button) // Button
{
var personelModel = Ext.create('InnosoftCRM.model.PersonelModel'); // Get Model
var PersonelEdit = this.getPersonelAddEdit().getValues(); // Get Form Values
var store = Ext.StoreManager.get('personeldata'); // Get Store
console.log(store);
console.log(PersonelEdit);


personelModel.beginEdit();
personelModel.save({
params: { },
sucess: function(record, operation)
{
if (operation.action === 'create')
{
console.log('Record Save' + PersonelEdit.data.FirstName);
store.add(PersonelEdit);
store.sync();
store.load();
}
},
failure: function(record, operation)
{
console.log("Action : Failure to communicate with the server..");
console.log(action);
}
})
}


Where did I go wrong? :(

papasilo
10 Oct 2012, 5:04 PM
I finally solve my problem! :))

The problem was too simple... I was using a PDO connection in my php which I think cause of the errors in my php proxy..

HURRAY!