I have built my test app using the Zend Framework for the back end, and made an extjs4 & a ST2 version for the front end. Up until yesterday, I was using the SDK tools to create a minified JS version of my app, until I discovered Cmd. I LOVE IT.

So I read about it, create a ST & EXTJS generate app, moved my code over into the appropriate folders, and created a build. Everything worked great.

However the Cmd generates static HTML files. I noticed when reading the docs on creating a single page extjs app, it's compiled a little differently, it says to use an index.php and build/index.php as your output.

In Zend Framework, the index.php is just a bootstrap file. Whether the desktop or mobile version is loaded on the front end is determined by a little piece of PHP code I have:

PHP Code:
/* if desktop do nothing, so use standard layout file names */
        
if ($userAgent->getBrowserType() === 'desktop') {
            return 
null;
        }
        
/** @var $renderer Zend_Controller_Action_Helper_ViewRenderer */
        
$renderer $this->_helper->viewRenderer;
        
$renderer->setViewScriptPathNoControllerSpec(':action.:device.:suffix');
        
$renderer->setViewScriptPathSpec(':controller/:action.:device.:suffix');
 
        switch (
$userAgent->getBrowserType()) {
            default:
            case 
'mobile':
                
$renderer->getInflector()->setStaticRule('device''mobile');
                break;
        } 

What this is basically doing for me is determining what layout.phtml should be rendered on the front end by the User Agent. I have 4 possibilities:
  • default.phtml (DEV DESKTOP)
  • default.mobile.phtml (DEV MOBILE)
  • prod.phtml (PROD DESKTOP)
  • prod.mobile.phtml (PROD MOBILE)


Default is my dev environment, and prod is....production. The php code above will append the mobile to the file name to load for me. So within this single page app, the browser user agent is necessary to return the correct layout. Something not possible with Sencha Cmd. (Right?)

I also notice there are other necessary files it seems necessary to be in the root web folder, like app.appcache, app.json, etc. Since I am working towards a mobile & desktop version of my app, and Sencha Cmd generates all these files with essentially the same names, I can't keep the app.json, etc all in the same root folder.

I would like to be able to write a simple build script that runs sencha command, alters my layouts, moves app.json, appcache files, etc. wherever they should be. Hopefully, I can get some good direction on what is the best possible solution for this. I just don't know exactly what needs to move where after the "sencha app build production" command is run.

Do need to move certain files into subdir's to keep the project files separate? like:
web/desktop/
web/mobile/

Is that even possible?
What kind of alterations need to happen to my layout files? (I noticed there is something placed in the manifest property, I am guessing for versioning. And there is a bunch of javascript inserted to the head section in the flat html file, that references the app.json. Can that generation be altered?

DO I want to just take the output of each raw index.html file and paste it into each appropriate phtml layout file? If so, how would I rename or reposition each app.json, appcache, and all the other files necessary so the ST files don't overwrite the EXTJS files, and vice versa.

How would you handle all of this?

Finally, I have listed below what my two dev desktop & mobile layouts look like currently, before making the complete switch to Cmd.


default.phtml (desktop dev version)

Code:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test App</title>
    
    <link rel="stylesheet" href="/js/lib/extjs-4.1.1/resources/css/ext-all.css" type="text/css">
        
    <!-- Firehose Styles -->
    <link rel="stylesheet" href="/css/dashboard.css" type="text/css">
        
    <script type="text/javascript" src="/js/lib/extjs-4.1.1/ext-all-dev.js"></script>
    
    <!-- Application Registration -->
    <script type="text/javascript" src="/app.js"></script>
    <!-- Adding Custom Validation   -->
    <script type="text/javascript" src="/js/app/ux/VType.js"></script>
    
</head>
<body>
</body>
</html>

default.mobile.phtml (mobile dev version)

Code:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Test Mobile App</title>
    <link rel="stylesheet" href="/js/lib/st-2.1.0/resources/css/sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="/css/mobile.css" type="text/css">
    <link rel="stylesheet" href="/css/mobile2.css" type="text/css">
    <link rel="stylesheet" href="/css/Ext.ux.grid.View.css" type="text/css">
    
    <script type="text/javascript" src="/js/lib/st-2.1.0/sencha-touch-all-debug.js"></script>
    
    <script type="text/javascript" src="/mobile/app.js"></script>
</head>
<body></body>
</html>