rovak / kjsencha Goto Github PK
View Code? Open in Web Editor NEWExt-JS / Sencha Touch Integration Module for Zend Framework 2
License: Other
Ext-JS / Sencha Touch Integration Module for Zend Framework 2
License: Other
Logic used to parse parameters within an RPC HTTP request coming from ExtJs is currently located in KJSencha\Controller\DirectController#getRPC()
.
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:
route
level (security)controller
and action
parameters in MVCdispatch
level (since we'll have the action
parameter, this is important if we need to integrate with tools like BjyAuthorize)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:
<textarea>..</textarea>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>
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.
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
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:
Is there any advantages of first variant?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.