1. #1
    Sencha User
    Join Date
    Jul 2009
    Location
    Jakarta, Indonesia
    Posts
    8
    Vote Rating
    0
    hariardi is on a distinguished road

      0  

    Default Extjs 4 + Codeigniter

    Extjs 4 + Codeigniter


    Hello,

    first of all, im sorry for the lack of my english, Im not good at it,

    have anyone ever try to integrate Codeigniter + Extjs 4 ? Im doing it now and Im having a alot of error, here are the steps that I try.

    1. I create an Application from Extjs 4 using simple html page.
    2. I prepare Codeigniter + HMVC and I Extend MX_Loader to MY_Loader so I can move view folder to 'theme' folder in Codeigniter root folder.
    3. then I copy Extjs 4 Application to theme folder, here's the structure :

    Application
    -- System
    -- Assets
    ---------------------------------
    -- Theme
    ---- app
    ------ controller
    ------ model
    ------ view
    ------ store this is Extjs 4 application
    ---- ext
    ------ src
    ------ resource
    ---- app.js
    ---- index.php
    ---------------------------------
    -- index.php
    -- .htaccess

    ======================================================
    file : index.php
    Code:
    <html>
    <head>
        <title>untitled</title>
    
        <link rel="stylesheet" type="text/css" href="theme/ext/resources/css/ext-all.css">
    
        <script type="text/javascript" src="theme/ext/ext-debug.js"></script>
    
        <script type="text/javascript" src="theme/app.js"></script>
        
     </head>
    <body></body>
    </html>
    error :

    Code:
    XML tag name mismatch (expected link)  -- ext-debug.js
     XML tag name mismatch (expected link)  -- app.js
       
     uncaught  exception: The following classes are not declared even if their files  have been loaded: 'CORE.view.Viewport'. Please check the source code of  their corresponding files for possible typos: 'app/view/Viewport.js'
    I did declare that class in viewport.js then I found a solution in sencha forum,

    Code:
    Ext.application({
         name: 'frontend',
         autoCreateViewport:false, <<< I put this in...
         appFolder: 'app',
         
         controllers: [
             'Main'
         ],
         
         launch: function() {
             Ext.create('Ext.container.Viewport', {
                 layout: {
                     type: 'border',
                     padding: 5
                 },
                 items: [{xtype:'user'}]
             });
         }
     });
    -----------------------------------------
    the error is gone, but now I have this error ....

    Code:
    uncaught  exception: The following classes are not declared even if their files  have been loaded: 'CORE.controller.User'. Please check the source code of  their corresponding files for possible typos: 'app/controller/User.js'
    and Im stuck... anyone help me please....

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
    Nickname is on a distinguished road

      0  

    Default


    Perhaps you can share the view/Viewport file, but I think its a problem in your app definition.

    Your app is named "frontend" (config statement "name"), but your views/Viewport are named "CORE"
    Try to change the app "name" config to "CORE" or rename all the View/Viewport to Ext.define('frontend.view...."...

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Location
    Jakarta, Indonesia
    Posts
    8
    Vote Rating
    0
    hariardi is on a distinguished road

      0  

    Default


    Quote Originally Posted by Nickname View Post
    Perhaps you can share the view/Viewport file, but I think its a problem in your app definition.

    Your app is named "frontend" (config statement "name"), but your views/Viewport are named "CORE"
    Try to change the app "name" config to "CORE" or rename all the View/Viewport to Ext.define('frontend.view...."...
    this is viewport.js
    Code:
    Ext.define('frontend.view.Viewport', {
        extend: 'Ext.container.Viewport'
    });
    and I fix that config statement "name", but still not working...

    thx for your help...

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Location
    Germany
    Posts
    198
    Vote Rating
    1
    Nickname is on a distinguished road

      0  

    Default


    After rereading your post, I think this was a false understanding on my side. The second error message is not for a view, than for the controller "User". Sorry for that.

    I'm a bit confused, why your error message says that the "CORE" namespaced files and not "frontend" ones and why the "User" Controller is loading, even though you configured the "Main" Controller in the app.

    Perhaps this is a mix of a code. Please try something like :

    PHP Code:

    // app.js

    Ext.Loader.setConfig({
        
    enabledtrue
    });

    Ext.application({
        
    name'frontend',
        
    appFolder'app',
        
    autoCreateViewporttrue,
        
    controllers: [
            
    'Main'
        
    ],
        
    views: [
            
    'frontend.view.Viewport'
        
    ],
        
    launch: function() {
            
    //console.info('launched ' + this.name);
        
    }
    });

    // Controller file: app/controller/Main.js

    Ext.define('frontend.controller.Main' ,{
        
    extend'Ext.app.Controller',
        
    init: function(app) {
            
    //console.info('init ' + this.$classname);
            
    this.control({
                
    '.main_viewport' : {
                    
    render: function() {
                        
    //console.info('rendered viewport');
                    
    }
                }
            });
        }
    });


    // Viewport in app/views/Viewport.js

    Ext.define('frontend.view.Viewport', {
        
    extend'Ext.container.Viewport',
        
    alias'widget.main_viewport',
        
    requires: [
            
    'frontend.view.MyFirstView'
        
    ],
        
    initComponent: function() {
            
    Ext.apply(this, {
                
    items: {
                    
    xtype'MyFirstView'
                
    }
            });
            
    this.callParent();
        }
    });

    // View MyFirstView that is embedded with the xtype == alias in the viewport
    // in app/view/MyFirstView.js

    Ext.define('frontend.view.MyFirstView', {
        
    extend'Ext.panel.Panel',
        
    alias'widget.MyFirstView',
        
    initComponent: function() {
            
    Ext.apply(this, {
                
    borderfalse,
                
    html'<h1> This is the main panel</h1>',
                
    layout'fit'
            
    });
            
    this.callParent();
        }
    }); 
    (not tested, just used copy and paste)

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Location
    Jakarta, Indonesia
    Posts
    8
    Vote Rating
    0
    hariardi is on a distinguished road

      0  

    Default


    Thx for your help Nickname, the error about di controller is gone. what I did was.. I remove the controller in App class. Now,

    Is there any other way on dynamically create and launch a controller ?
    Do I have to deploy/build the application while Im developing it ?

    thx again for your help.


    PHP Code:
    name'frontend',
    autoCreateViewport:false// I put this in...
    appFolder'app',
    controllers: [], // and remove the controller
    ... 
    edited --

    PHP Code:
    name'frontend',
    autoCreateViewport:false// I put this in...
    appFolder'app',
    controllers: ['Main'], // if I Wanna put the controller I have to set the path
    ... 
    I use this
    PHP Code:
    Ext.Loader.setConfig({
        
    enabled:true,
        
    paths:{'frontend.controller.Main':'http://localhost/core/frontend/app/controller/Main.js'}
    }); 

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    5
    Vote Rating
    -1
    panega is an unknown quantity at this point

      0  

    Post hai, hariardi...

    hai, hariardi...


    can you give a link to download the application that you do, example-extjs4-with-codeigniter.zip (like this) for learning

    thanks...

  7. #7
    Sencha User frankeys's Avatar
    Join Date
    Dec 2010
    Posts
    10
    Vote Rating
    0
    frankeys is on a distinguished road

      0  

    Default Me too!

    Me too!


    I would love that also, a copy of that, just the basic setup for extjs and codeigniter

  8. #8
    Sencha User
    Join Date
    Jul 2009
    Location
    Jakarta, Indonesia
    Posts
    8
    Vote Rating
    0
    hariardi is on a distinguished road

      0  

    Default link

    link


    hmm... sure
    actually I'm so new to this Extjs stuff
    so what I did here is just somethin that works for me,

    http://www.mediafire.com/?80e9gm9284x88uu

    thx

  9. #9
    Sencha User frankeys's Avatar
    Join Date
    Dec 2010
    Posts
    10
    Vote Rating
    0
    frankeys is on a distinguished road

      0  

    Wink


    Many thanks hariardi!

  10. #10
    Sencha User bclinton's Avatar
    Join Date
    Nov 2007
    Posts
    286
    Vote Rating
    11
    bclinton will become famous soon enough bclinton will become famous soon enough

      0  

    Default


    I'm a little confused about what advantages there are to trying to integrate ExtJS into codeigniter. I'm not really sure what you guys are trying to do.

    Codeigniter is a PHP framework. I've been using it without feeling any need for extra integration. I overwrote CI_Controller with a MY_Controller class, but that was just for some utility methods like formatting my responses in JSON or JSONP depending on if a callback parameter is sent.

    Am I missing something here or are you guys making this more complex than it needs to be?

    edit: I guess I can see what you are trying to do with HMVC. I would just caution that it's not necessary so unless you are using HMVC for another reason, you can just have your codeigniter controllers spit out JSON rather than load views.