PDA

View Full Version : PHP & JSON architecture?



rob_howe
17 Feb 2011, 2:21 PM
I'm starting a large new project using Ext3 (or Ext4 soon) with PHP back-end.

We've decided to dynamically generate the Ext config code purely as JSON data arrays in PHP, and then only convert to text just before outputting the HTML and Ext bootstrap code to the browser.
We'll have other .js files to register xtypes via Ext.extend

I'm running into difficulty since I don't know how to embed js code into my PHP JSON structure. I can use xtypes for components, but can't seem to generate Actions or Stores that contain js handler code.
Is it even possible to safely have PHP dynamically generate js code and put it in a JSON structure somehow?

Has anyone successfully implemented an app in this way?

Sample code:


<html>
<body>
<script type="text/javascript" src="/extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs3/ext-all.js"></script>
<script type="text/javascript">
//<!--

// THIS IS WHERE PHP CONVERTS ITS JSON ARRAY TO TEXT:

var MY_PHP_JSON_ENCODED_CONTENT = {"layout":"border","items":[{"region":"north","autoHeight":true,"items":[{"xtype":"panel","text":"Header area","ite\
ms":[{"xtype":"button","text":"Example Button"}]},{"html":"Banner area"}]},{"region":"center","autoHeight":true,"items":[{"html":"Center content"}]},{"region\
":"south","autoHeight":true,"items":[{"html":"Footer here"}]}]};

//-->
</script>

<script type="text/javascript" src="Some_Useful_Xtypes_Defined_Here.js"></script>

<script type="text/javascript">
Ext.onReady(function() { new Ext.Viewport( MY_PHP_JSON_ENCODED_CONTENT ); });
</script>
</body>
</html>

carl23934
17 Feb 2011, 2:40 PM
Sure you can do this, but I don't understand why you would want to. It would add a lot of unnecessary complexity.

Your issues with the handlers are probably scoping related. You just have to master scoping and referencing and you should be able to get there.

rob_howe
18 Feb 2011, 8:23 AM
The idea is to have a UI dynamically-generated by PHP. Using OO style, we'd have a templating concept that creates and includes whatever UI widgets are needed on a page.
But we're having problems getting a prototype to work, since we can't figure out a safe (non "js eval") way to inject js code into the JSON templating structure built by PHP.
Here's a better code sample:

<html>
<body>
<script type="text/javascript" src="/extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs3/ext-all.js"></script>
<script type="text/javascript">
//<!--

// THIS IS WHERE PHP CONVERTS ITS JSON ARRAY TO TEXT:
var MY_PHP_JSON_ENCODED_CONTENT = {"layout":"border","items":[{"region":"north","autoHeight":true,"items":[{"xtype":"panel","text":"Header area","items":\
[{"xtype":"button","text":"Example Button",
\
// THE FOLLOWING JSON LINE DOES NOT WORK:
"handler": "function(btn) { Ext.MessageBox.alert('Hello', 'You clicked me.'); }"
// BUT IF THE QUOTES ARE REMOVED, IT DOES WORK (BUT IS NOT JSON-ENCODEABLE FROM PHP).
// "handler": function(btn) { Ext.MessageBox.alert('Hello', 'You clicked me.'); }

}]},{"html":"Banner area"}]},{"region":"center","autoHeight":true,"items":[{"html":"Center content"}]},{"region":"south","autoHeight":true,"items":[{"html":"\
Footer here"}]}]};
//-->
</script>
<script type="text/javascript" src="Some_Useful_Xtypes_Defined_Here.js"></script>
<script type="text/javascript">
Ext.onReady(function() { new Ext.Viewport( MY_PHP_JSON_ENCODED_CONTENT ); });
</script>
</body>
</html>