Current status

Logic used to parse parameters within an RPC HTTP request coming from ExtJs is currently located in KJSencha\Controller\DirectController#getRPC().

Proposal

This logic can be decomposed into a simple Zend\Mvc\Router\Http\RouterInterface that will be able to accept requests and produce standard controller and action parameters, along with an RPC object stored in the returned RouteMatch.

This unlocks a set of interesting features:

1. can add guards at route level (security)
2. allows usage of standard controller and action parameters in MVC
3. allows usage of standard controllers in RPC context
4. can use the mapper service to already avoid matching on non-mapped services (404 instead of 5xx error)
5. can use guards at dispatch level (since we'll have the actionparameter, this is important if we need to integrate with tools like BjyAuthorize)

Problems

If the controller key is already valued DirectController by the router, we cannot use it for route guards. Same applies for action. We can anyway integrate with our own Route or Controller Guard assuming the end user is using BjyAuthorize. We can then trigger any checks on the Route or Controller guard with our custom parameters.

How can I handle exceptions thrown by php? Let's say I would like to inform the user nicely there was an error.

example:

<?php
/**
 * Zend Framework (http://framework.zend.com/)
 *
 * @link      http://github.com/zendframework/ZendSkeletonApplication for the canonical source repository
 * @copyright Copyright (c) 2005-2012 Zend Technologies USA Inc. (http://www.zend.com)
 * @license   http://framework.zend.com/license/new-bsd New BSD License
 */

namespace Application\Controller;

//use Zend\Mvc\Controller\AbstractActionController;

use JaztecAcl\Controller\AuthorizedController;
use KJSencha\Direct\Remoting\Api\Api;
use Zend\Http\Headers;
class IndexController extends AuthorizedController
{
    public function indexAction()
    {
        $sm = $this->getServiceLocator();
        $bootstrap = $sm->get('kjsencha.bootstrap');
        return $bootstrap->getViewModel();
    }

    public function apiAction()
    {
        $this->layout( 'layout/api' );        
        $headers = new Headers();
        $headers->addHeaderLine('Content-Type', 'text/javascript');
        $headers->addHeaderLine('Access-Control-Allow-Origin','*');
        $this->getResponse()->setHeaders($headers);        
        $sm = $this->getServiceLocator();
        $dr = $sm->get('kjsencha.api');
        $dr->setType('rpc');
        $dr->setUrl( (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $dr->getUrl());        
        echo sprintf('Ext.ns(\'Ext.mbDirect\'); Ext.mbDirect.APIDesc = %s;', $dr->buildRemotingProvider()->toJson());

    }    
}

Add composer support

Hello,

I'm trying to use the KJSencha Module, specially to display nice Ext.JS Forms.
In my Application Module I have a \Direct\Form\UserForm.php which provides some user informations in my Ext.JS Form.

Thats working great, BUT in my UserForm Service I don't have access to ServiceManager, EventManager, etc...

I would like to dispatch a Controller Action and returning the response.
In KJSencha\Controller\DirectController::dispatchRPC you call

$response['result'] = call_user_func_array(array($object, $rpc->getMethod()), $rpc->getData());

and I would have something like this:

$retVal = $this->forward()->dispatch('Application\Controller\User', array("action" => "getUserProfile"));

Is this possible? I'm a beginner with Ext.JS and ZF2.

Thanks for your help!

Hi I have been trying to make a simple application involving a form submit
I have managed to create the view and see a form on my screen
I want to call a method named createTemplate in my IndexController
But the data does not reach the method
I believe that the error is due to formHandler: undefined
I have followed the docs and added the annotation but still no progress

Please help
Thanks

Hello,

I need to know, where the /public folder (who contain my ExtJS app) must be placed in the zend skeleton. In the module or outside the module ?

If i take the kjsenchaexample the folder /public is placed outside the module.
If i take another application like https://github.com/4orever/prompc_v2.git the folder /public is placed in the module.

In the module.config.php, if i want to use my Ext librairy, what is the best way to define? like this? :

return array(
'kjsencha' => array(
'library_path' => '/public/resources/ext/',
'js' => array(
'ext' => 'ext-all.js',
),
'css' => array(
'ext' => 'resources/css/ext-all-gray.css'
),
'direct' => array(
'modules' => array(
'Poems' => array(
'namespace' => 'Poems\Controller',
'directory' => DIR . '/../src/Poems/Controller',
),
),
)
....

and in my layout.phtml to my module :
i have nothing to do ?

Thank you in advance

It is currently possible to create instances of the various components and have them in an inconsistent state since setter injection is used.
Also, some service IDs are hardcoded in objects implementing ServiceLocatorAwareInterface, making override of factories very tricky.

Currently, KJSencha isn't really friendly with the Sencha CLI.

That's because AssetManager splits JS files all over the modules in a manner that is hard to track.

A solution may be to crawl assets, copy them into a library and then run Sencha CLI there.

Still not sure about the best approach though.

ping @fduarte42

Do you have any example for uploading a file. I have some problems.

My javascript looks likee

    var fileInfo = Ext.create('Ext.form.Panel', {
        title:'Upload a Photo',
        width:400,
        bodyPadding:10,
        frame:true,
        fileUpload:true,
        items:[
            {
                xtype:'filefield',
                name:'photo',
                fieldLabel:'Photo',
                labelWidth:50,
                msgTarget:'side',
                allowBlank:false,
                anchor:'100%',
                buttonText:'Select Photo...'
            }
        ],
        success:function () {
            console.log(arguments);
        },
        failure:function () {
            console.log(arguments);
        },
        api:{

            // The server-side must mark the submit handler as a 'formHandler'
            submit:Application.Direct.form.Profile.updateBasicInfo2
        },

THe problem seems to be here:

$result = new JsonModel($result);

    // Wrap the result when its a form request
    if ($this->isForm() && $this->isUpload()) {
        $result = '<html><body><textarea>' . JsonFormatter::encode($result) . '</textarea></body></html>';
    }

    $e->setResult($result);

Unfortunately the response is not as I would expect:

When $result is string, the html reandered is smth similar to:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>KJSencha Example Application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Le styles -->
        <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" media="screen" rel="stylesheet" type="text/css">
<link href="http://cdn.sencha.io/ext-4.1.1-gpl/examples/shared/example.css" media="screen" rel="stylesheet" type="text/css">
<link href="/zend/kj-sencha-example/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
        <!-- Scripts -->
            </head>
    <body>
                <script type="text/javascript" src="/zend/kj-sencha-example/public/js/app/app.js"></script>    </body>
</html>

ServiceLocator services as RPC (WIP)

Current logic

Currently, APIs are simple mappings from FQCN to published APIs via ExtJs Direct.

For example, mapping a directory that contains following classes under namespace MyStuff.example:

• My\SimpleClassName
• My\Other\RpcClass

Allows usage of following (js-side):

• MyStuff.example.SimpleClassName.*
• MyStuff.example["Other\\RpcClass"].*

While the concept works very well for simple use cases that don't involve dependencies, this approach doesn't fit the current ZF2 philosophy nor complex approaches, since the FQCN itself does not define what an object looks like.

New logic

My idea is to migrate everything to service IDs. Instantiation of the services themselves would still be based on the main ServiceLocator, so it would work out of the box.

For example, defining following services:

• my_test_service
• another_service
• My\FQCN\Named\Service
• yet.another.naming.convention

And mapping them as following:

return array(
    'my_test_service',
    'another_service',
    'My\FQCN\Named\Service',
    'yet.another.naming.convention',
    'test1' => 'my_test_service',
    'test2' => 'another_service',
    'test3' => 'My\FQCN\Named\Service',
    'test4' => 'yet.another.naming.convention',
);

Would give access (js-side) to following direct methods:

• my_test_service.*,
• another_service.*,
• My.FQCN.Named.Service.*,
• yet.another.naming.convention.*,
• test1.*
• test2.*
• test3.*
• test4.*

This also defers all the instantiation of direct services to the service manager, giving us much more power

Automatical name conversions

I think it would be still possible to use \ and . as namespace separator in the PHP to JS conversion, though I'd prefer to have the end user define it manually. Anyway, this method removes any "grouped" namespacing, by giving direct alias to multiple aliases for a single user to a service.

@Rovak need to add GIT tags for packagist... Tagging via editing README.md does not work :)

Hi,

Could you please update https://github.com/Rovak/KJSenchaExample ? I think that is not working correctly. Correct me if I'm wrong coz I'm new in Zend 2 and ExtJS.

Thanks in an advance.

I want to make Object->update() to be a form handler.

I spent some hours to find the reason, but apiBuilder still doesn't append 'formHandler: true' to my method.

Are there any things to do except this?

namespace Backend\Direct\Model;

class Object extends \Backend\Direct\Entity
{

    /**
     * @KJSencha\Annotation\Formhandler
     *
     */

    public function update($entity, $id)
    {
        // TODO: Implement update() method.
        return array();
    }

}

And this is the module.config.php

'kjsencha' => array(
    'direct' => array(
        'services' => array(
            'Direct.Tree' => 'Backend\Direct\Model\Tree',
            'Direct.Single' => 'Backend\Direct\Model\Object',
            'Direct.Collection' => 'Backend\Direct\Model\Collection',
        ),
    ),
)

The javascript component KJSencha.data.Factory is able to generate multiple store configurations allowing additional program flows.

However when you analyse the PHP objects, given route kjsencha/data/[:action] the action should be processed in KJSencha\Controller\DataController, only the componentloader seems to has reason to work; it's the only action provided. The routes for 'rest', 'service' and 'polling' are non-existent. RPC requests are ofcourse handled by the DirectController. That is all clear.

Shouldn't these actions be completed as well for the services to work or am I missing something?

How can I update the version of Sencha ExtJs used in this module?

There are to ways to work with forms using KJSencha:

1. Set 'api.submit' config option and then do form.submit() and @FormHandler annotation. So the main question:
   What is the correct way to get form POST data?
2. Use getForm().getRecord() and then call create/update direct method.

Is there any advantages of first variant?