Code Monkey home page Code Monkey logo

ext-application-bundle's Introduction

ext-application-bundle

A Symfony bundle to integrate Sencha Ext JS into a Symfony application

Build Status

Installation

You can install this bundle using composer

composer require teqneers/ext-application-bundle

or add the package to your composer.json file directly.

After you have installed the package, you just need to add the bundle to your AppKernel.php file:

// in AppKernel::registerBundles()
$bundles = array(
    // ...
    new TQ\Bundle\ExtJSApplicationBundle\TQExtJSApplicationBundle(),
    // ...
);

Configuration

The ext-application-bundle requires some initial configuration so that it can find the correct files.

# Default configuration for extension with alias: "tq_ext_js_application"
tq_ext_js_application:
    app_path:             ~ # Required
    builds:               # Required
        # Prototype
        name:
            development:          # Required
                build_path:           ~ # Required
                microloader:          /bootstrap.js
                manifest:             /bootstrap.json
                app_cache:            null
            production:           # Required
                build_path:           ~ # Required
                microloader:          microloader.js
                manifest:             app.json
                app_cache:            cache.appcache

Because the bundle provides its own controller to serve micro-loader, manifest and application cache manifest, you also need to configure your routing to include the bundle routes at a given prefix. Edit your app/config/routing.yml:

# ...
ext_app:
    resource: "@TQExtJSApplicationBundle/Resources/config/routing.yml"
    prefix:/
# ...

Example

Given the following directory structure of a fictitious Symfony application

./
|-- app/            Application configuration and assets
|-- src/            Application source code
|-- web/            Public web-facing directory (document root)
|   |-- app.php     Symfony production front controller
|   |-- app_dev.php Symfony development front controller
|   |-- app/        Root folder for Ext JS application production build
|-- ExampleApp/     The Ext JS application source folder

your configuration might look like this

tq_ext_js_application:
    app_path: '%kernel.project_dir%/ExampleApp'
    builds:
        default:
            development:
                build_path:  build/development/ExampleApp
                microloader: /bootstrap.js
                manifest:    /bootstrap.json
                app_cache:   ~
            production:
                build_path:  build/production/ExampleApp
                microloader: microloader.js
                manifest:    app.json
                app_cache:   cache.appcache

Usage

Using the Twig extension provided by the bundle you can easily integrate the Ext JS application resources into your application templates.

<!DOCTYPE HTML>
<html manifest="{{ extjsAppCachePath() }}" lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Welcome!</title>

    <script type="text/javascript">
        var Ext = Ext || {};
        Ext.manifest = '{{ extjsManifestPath()|e('js') }}';
    </script>
    <script id="microloader" data-app="{{ extjsApplicationId() }}" type="text/javascript" src="{{ extjsBootstrapPath() }}"></script>
</head>
<body>
</body>
</html>

License

The MIT License (MIT)

Copyright (c) 2015 TEQneers GmbH & Co. KG

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

ext-application-bundle's People

Contributors

ogmueller avatar sgehrig avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ext-application-bundle's Issues

Twig Functions not applying

Moved from moved from teqneers/ext-application#2

I tried your tutorial with symfony 2.8 and followed every step. My problem now is that the twig functions extjsAppCachePath(),extjsManifestPath(),extjsApplicationId(),extjsBootstrapPath() are not executing. I always get a 500 error. If I remove those twig from the ext.html.twig file the template gets rendered.

My suspicion is that the methods ar not found. Are there any other nessessary steps that If have forgotten?

Anyway a good tutorial thank you for working on this.

Typo in README.md

The example addition to routing.yml is missing a space on the prefix: line. Need a space between the colon and the slash to be valid YML.

Twig Functions not applying: moved from https://github.com/teqneers/ext-application/issues/2

I tried your tutorial with symfony 2.8 and followed every step. My problem now is that the twig functions extjsAppCachePath(),extjsManifestPath(),extjsApplicationId(),extjsBootstrapPath() are not executing. I always get a 500 error. If I remove those twig from the ext.html.twig file the template gets rendered.

My suspicion is that the methods ar not found. Are there any other nessessary steps that If have forgotten?

Anyway a good tutorial thank you for working on this.

Support classic/modern Ext Apps

If we omit the -classic option to "sencha generate app", we get Sencha's new unified application which want's to get different manifest files; classic.json or modern.json. They also add some logic to their index.html to set Ext.manifest which is then used throughout the generated bootstrap.js. I wonder if you'd considered a way to support this new style app instead of limiting use only classic apps.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.