Extjs Bundle Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require amstaffix/extjs-bundle
   

   Ensure jms/serializer-bundle, doctrine/orm (or doctrine/mongodb-odm), and sensio/generator-bundle are installed.

2. Enable the Bundle Add to AppKernel.php:

   new AmsTaFFix\ExtJsBundle\AmsTaFFixExtJsBundle(),
   

3. Configure Add to config.yml:

   ams_taffix_extjs:
       entities:
           - AppBundle\Entity\YourEntity
       rest_controller:
           enabled: true
   

4. First Use Case Generate a REST controller for an entity:

   php app/console generate:extjs:rest YourEntity
   

   This creates a controller with CRUD endpoints (GET, POST, PUT, PATCH, DELETE) for your entity.

Where to Look First

• Generated Code: Check src/AmsTaFFix/ExtJsBundle/Resources/views/ for templates.
• Configuration: config.yml under ams_taffix_extjs for entity mappings.
• Doctrine Entities: Ensure entities are properly annotated for JMS Serializer (e.g., @Serializer\ExclusionPolicy).

Implementation Patterns

Dynamic Model Generation

1. Entity-to-ExtJS Model Mapping The bundle auto-generates ExtJS Ext.data.Model configurations based on Doctrine entities. Example:

   # config.yml
   ams_taffix_extjs:
       entities:
           AppBundle\Entity\User:
               model_name: 'UserModel'
               fields:
                   - { name: 'id', type: 'int' }
                   - { name: 'username', type: 'string' }
   

   • Workflow: Define fields in config.yml or let the bundle infer them from Doctrine metadata.

2. ExtJS Remoting Integration Use Symfony controllers as ExtJS remoting endpoints. Example:

   // src/AppBundle/Controller/UserController.php
   use AmsTaFFix\ExtJsBundle\Controller\ExtJsController;
   
   class UserController extends ExtJsController
   {
       public function getUsersAction()
       {
           return $this->getEntityManager()->getRepository('AppBundle:User')->findAll();
       }
   

   • URL Routing: Annotate routes with @Route and ensure they match ExtJS proxy configurations:

     // ExtJS Proxy Example
     proxy: {
         type: 'rest',
         url: '/api/users',
         reader: { type: 'json', root: 'data' }
     }
     

3. REST Controller Generation Generate a full REST controller for an entity:

   php app/console generate:extjs:rest User
   

   • Output: Creates a controller with methods like getUsersAction(), postUserAction(), etc.
   • Integration: Extend the generated controller to add business logic.

4. Twig Integration Render ExtJS views with Twig:

   {% render 'AmsTaFFixExtJsBundle:Default:index.html.twig' %}
   

   • Dynamic Assets: Use {{ asset('bundles/amstaffixextjs/js/extjs.js') }} for ExtJS JS/CSS.

Workflows

1. Entity Changes → Update ExtJS Models

   • Modify config.yml or entity annotations.
   • Regenerate models:

     php app/console cache:clear
     

2. API Development

   • Use generate:extjs:rest for boilerplate.
   • Customize generated controllers for validation/business logic.

3. Frontend Development

   • ExtJS proxies point to Symfony routes (e.g., /api/users).
   • Use Ext.data.Store with auto-generated model names (e.g., UserModel).

Gotchas and Tips

Pitfalls

1. Serializer Compatibility

   • Ensure entities are annotated for JMS Serializer (e.g., @Serializer\ExclusionPolicy("ALL")).
   • Fix: Add @Serializer\Expose() to properties you want to expose to ExtJS.

2. Route Conflicts

   • Generated REST routes may clash with existing ones.
   • Fix: Customize route names in the generator command or override routes in routing.yml.

3. ExtJS Version Mismatch

   • The bundle assumes a specific ExtJS version. Check Resources/public/js/extjs.js for compatibility.
   • Fix: Manually include your ExtJS version and update proxy configurations.

4. Caching Issues

   • ExtJS model generation relies on Doctrine metadata cache.
   • Fix: Clear caches after entity changes:

     php app/console cache:clear --env=prod
     

5. FOSRestBundle Dependency

   • REST controller generation requires FOSRestBundle.
   • Fix: Install it if using the generator:

     composer require friendsofsymfony/rest-bundle
     

Debugging

1. Check Generated Models

   • Inspect var/cache/dev/ams_taffix_extjs/models/ for auto-generated ExtJS model configs.

2. Symfony Profiler

   • Use the profiler to debug controller actions and serializer output.

3. ExtJS Console

   • Enable ExtJS debug mode in your app:

     Ext.onReady(function() {
         Ext.Loader.setConfig({ enabled: true, disableCaching: false });
     });
     

Tips

1. Custom Model Templates

   • Override the default ExtJS model template by copying Resources/views/ExtJs/model.js.twig to your bundle.

2. Partial Entity Mapping

   • Exclude fields from ExtJS models using config.yml:

     fields:
         - { name: 'id', type: 'int' }
         - { name: 'username', type: 'string' }
         - { name: 'password', type: 'string', exclude: true }
     

3. ExtJS Theming

   • Integrate custom ExtJS themes by extending the bundle’s asset pipeline.

4. API Versioning

   • Use Symfony’s api_platform or api route prefixes to version your ExtJS endpoints:

     # config.yml
     ams_taffix_extjs:
         rest_controller:
             route_prefix: 'api/v1'
     

5. Testing

   • Test ExtJS remoting endpoints with PHPUnit:

     $client = static::createClient();
     $crawler = $client->request('GET', '/api/users');
     $this->assertEquals(200, $client->getResponse()->getStatusCode());