codeigniter and EXTjs

[eluser]raimon[/eluser]
hello,

I'm very confused about lots of options about web 2.0 app, frameworks, ...

I really like EXTjs, and I think it's 'only' a scripting for the client-side (user's browser).

I suppose it can be fit nicely in code igniter, doesn't it ?

thanks!


raimon fernandez

[eluser]xwero[/eluser]
Of course it's no problem. As far javascript is concerned the output of CI is all that matters.

[eluser]Namulator[/eluser]
I myself use both ExtJS and CI, and I find the compliment each other very well. They both have a lot of structure in their design, documentation which is easy to understand... ExtJS2.0 is a little confusing to me right now, but ExtJS 1.x is very well structured. Being able to interact between ExtJS and CI makes normally large amounts of code, very small, and precise, which makes coding that much better.

Here's what I did to access all the front end APIs.

this file should be application/models/scriptsmodel.php

Code:

<?
class ScriptsModel extends Model {
    var $title   = '';
    var $content = '';
    var $date    = '';

    function ScriptsModel() { // {{{
        // Call the Model constructor
        parent::Model();
    } // }}}
    function GetScripts() { // {{{
        $this->load->helper('directory');
        $ScriptList = array();
        $ScriptsDir = './application/views/scripts/';
        $Scripts = directory_map($ScriptsDir, TRUE);
        foreach ($Scripts AS $Script) {
            $ScriptList[$Script] = array();
            $Name="";
            $Versions=array();
            $Description="";
            $Homepage="";
            $License="";
            include($ScriptsDir.$Script."/info.php");
            $ScriptList[$Script]['Name']=$Name;
            $ScriptList[$Script]['Versions']=$Versions;
            $ScriptList[$Script]['Description']=$Description;
            $ScriptList[$Script]['Homepage']=$Homepage;
            $ScriptList[$Script]['License']=$License;
        }
        return($ScriptList);
    } // }}}
    function GetScript($Name, $Version) { // {{{
        $Scripts = $this->GetScripts();
        $Script = array();
        foreach ($Scripts AS $ScriptName => $ScriptInfo) {
            if ($ScriptInfo['Name']==$Name) {
                $Script = $ScriptInfo;
            }
        }
        $Return = array();
        foreach ($Script['Versions'] AS $Ver => $VInfo) {
            if ($Ver == $Version) {
                $Return = $Script;
            }
        }
        return $Return;
    } // }}}}
?>

This is just a draft version, but you should be able to see what's going on, and how to use it... But here's a description of how the scripts Dir is set up.

Code:

application/views/scripts/
  extjs
    ext-1.1.1/
    ext-2.0-rc1/
    info.php
  prototype_scriptaculous
    scriptaculous-js-1.8.0/
    info.php
  yui
    yui-2.3.1/
    info.php

And so on, and so forth...

And here is the info.php file from the extjs folder...

Code:

<?
$Name="ExtJS";
$Versions=array(
    "1.1.1"=>array(
        "folder"=>"ext-1.1.1",
        "js"=>"
            ",
        "css"=>"<link rel=\"stylesheet\" type=\"text/css\" href=\"/application/views/scripts/extjs/ext-1.1.1/resources/css/ext-all.css\"></link>"
    ),
    "2.0-rc1"=>array(
        "folder"=>"ext-2.0-rc1",
        "js"=>"
            ",
        "css"=>"<link rel=\"stylesheet\" type=\"text/css\" href=\"/application/views/scripts/extjs/ext-2.0-rc1/resources/css/ext-all.css\"></link>"
    )
);
$Description="Ext JS Framework";
$Homepage="http://extjs.com/";
$License="http://extjs.com/license";
?>

Then within your controllers, you can call it like so...

Code:

$this->load->model('ScriptsModel');
$Script = $this->ScriptsModel->GetScript('ExtJS', '1.1.1');
$PageData = array();
$PageData['CSS'] = $Script['Versions']['1.1.1']['css'];
$PageData['JS'] = $Script['Versions']['1.1.1']['js'];
$this->load->view('YourPage', $PageData);

This is what I did to get started. Feel free to use it, and change it to suite your needs if you want.

You can set up a controller to serve the script files as well, but adding variables to the info file, which list the files and locations, so that you could do something like so...

http://www.yoursite.com/scripts/MyScript

which would allow for dynamic script management as well as other uses.... Well, hope my two cents helps

[eluser]raimon[/eluser]
thanks for your info, now I feel better ...

:-)


regards,


r.

[eluser]raimon[/eluser]
Hello again,


I'm trying to play with EXTjs and CodeIgniter, but at this moment, they don't want ...

I did all what you said in your previous post, but when I'm using this from a controller, I'm getting lots of errors ...

[quote author="Namulator" date="1195592171"]
Then within your controllers, you can call it like so...

Code:

$this->load->model('ScriptsModel');
$Script = $this->ScriptsModel->GetScript('ExtJS', '1.1.1');
$PageData = array();
$PageData['CSS'] = $Script['Versions']['1.1.1']['css'];
$PageData['JS'] = $Script['Versions']['1.1.1']['js'];
$this->load->view('YourPage', $PageData);

This is what I did to get started. Feel free to use it, and change it to suite your needs if you want.[/quote]

here are the errors:

Code:

A PHP Error was encountered

Severity: Warning

Message: Invalid argument supplied for foreach()

Filename: models/scriptsmodel.php

Line Number: 16

A PHP Error was encountered

Severity: Notice

Message: Undefined index: Versions

Filename: models/scriptsmodel.php

Line Number: 41

A PHP Error was encountered

Severity: Warning

Message: Invalid argument supplied for foreach()

Filename: models/scriptsmodel.php

Line Number: 41

So, maybe I'm doing something wrong ...

My extjs folder is located:

Code:

http://127.0.0.1/igni/system/application/views/scripts/extjs/

My scriptsmodel.php:

Code:

http://127.0.0.1/igni/system/application/models/scriptsmodel.php

I'm only using EXTjs 2.0.

and in my views, I have my .html or .php pages, that inside call the .js file, that is also located into the views folder.

maybe I have to tell to the scripts where is the extjs folder, I'm struggling my brain for some hours and couldn't find where the problem is ...


regards,


raimon

[eluser]raimon[/eluser]
I need more fresh ideas where to lookfor where the problem is...

I'm completely lost ...

I tried with a fresh install and copy the files as the post suggests, but not avail ...

Namulator, any idea why your code from the controler throughs those errors ?

thanks again!

raimon

[eluser]esra[/eluser]
I use EXT JS 2.0 and CodeIgniter 1.5.4 in conjunction with the Matchbox extensions (formerly Modular Separation by Zacharias) and the Proposed View library (View library X3 from Coolfactor).

Sample Contact controller extended from a base controller called Application.

Code:

<?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

require(APPPATH.'libraries/application'.EXT);

class Contact extends Application {
    
    public function __construct()
    {
        parent::__construct();    
        $this->lang->load('contact', 'en-us');    
        $this->load->model('contact_model');
    }
    
    public function index()
    {
        $module = $this->lang->line('contact_module');
        $page = $this->lang->line('contact_title');
        
        $this->view->set('title', $page);
        $this->view->set('module', $module);
        $this->view->part('west', 'west');
        $this->view->part('north', 'north');
        $this->view->part('center2', 'center2');
        $this->view->part('center1', 'center1');
        $this->view->part('east', 'east');
        $this->view->part('south', 'south');
        $this->view->load('complex');
    }
}

Template: complex.php

Code:

<html>
<head>
  <title><?=$title?></title>
  
     <!-- Global Style -->
      <link rel="stylesheet" type="text/css" href="<?=javascript_url();?>extjs/resources/css/ext-all.css" />
     <!-- End Global Style -->

     <!-- Libraries -->
     < script type="text/javascript" src="<?=javascript_url();?>extjs/adapter/ext/ext-base.js">
    < script type="text/javascript" src="<?=javascript_url();?>extjs/ext-all.js">
     <!-- End Libraries -->

     <!-- Current Template -->
    <link rel="stylesheet" type="text/css" href="<?=template_url();?>complex/css/complex.css" />
    < script type="text/javascript" src="<?=template_url();?>complex/js/complex.js">
     <!-- End Current Template -->
    
</head>
<body>
    < script type="text/javascript" src="<?=javascript_url();?>common.js">
    <?=$west?>
    <?=$north?>
    <?=$center1?>
    <?=$center2?>
    <?=$east?>
    <?=$south?>
</body>
</html>

The html for the North, West, Center1, Center2, East, and South views can be cut and pasted into separate view files from the Complex layout example. Coolfactor's View library is called in the index method to embed the various views in the template.

common.js is a renamed version of the EXT JS examples.js file. In the template above, I added a space between '<' and 'script' to prevent the EE forum from truncating those lines. The space needs to be removed. The above should work without Matchbox.

javascript_url() and template_url() are two functions in a helper that I use to set the paths to the directories where I store Javascript libraries and the templates/ directory under APPPATH.

In the above, module name and title are strings in the module's language file. Variable replacement is used by the View library to embed the various views and strings in the template.

If you need a copy of the helper and my modified MY_Loader that supports templates/ and blocks/ (partials) directories for use with Matchbox, leave me a PM with an email address. You will also need a copy of the constants.php file that I use in the helper to set application constants and other defines.

[eluser]raimon[/eluser]
Well, in the hard-coded-way it works ...


I have to write this way into the view file...

but of course, I want to use relative paths, not absolute ones ...

so, if I use this code:

Code:

in controllers:
$PageData['js_path'] =APPPATH.'views/scripts/';

in view file:


in browser's page I get:

and the extjs folder is located in a folder called SCRIPTS inside the views folder.

and I don't understand why this relative path doesn't work:


thanks,

raimon

[eluser]WolfgangA[/eluser]
@esra
seems that you work really hard on finding a design pattern to bring together the php and js world.
I am also trying to find away to bring those both together.

My general approach as follows:

In CI, i create a sort of main page that:
- loads all required JS, CSS
- provides required html elements (mostly DIVs to house EXT components)
I think this is pretty similar to your example using complex.php and basically one can refer to this as the "application".
(So EXT JS takes over the View part of an MVC model.)

Once this main page is loaded, all actions are created in the EXT JS world.
This means, usally CI responds "only" to an XHR requests and returns just data in JSON (or XML).
(So CI takes over the MC part)

In fact this is not fully true, bc EXT itself is used in the C of the MVC as well.

So far so good:
But:
- modularzation is uneasy in the JS world. (i.e. a grid requires a datamodel and a colummodel that must match the data)
- multilanguage support is uneasy in the JS world. (i.e. a grid header label needs to be defined at construction time)
...given one wants an integration with CI / PHP backend wise

In other words: the JS code should be separated from the CI / PHP code, but on the other hand needs to interface to setup the JS components.
This really caused headaches to me.

Now looking to Matchbox and CFs viewlibray that helped a bit but does not solve those core issues:

Also i dislike writing tons of wrappers in php for EXT to build EXT components from PHP.

So my current approch as follows. Have a 2 stage loading process:

First Stage
==========
- Create a main page in the CI / PHP world that includes required JS, CSS and HTMl elements like DIVs as EXT UI container. (Which in fact is the application)

-- To do this use tools like to matchbox / modular separation. This would require a sort of modulemanger.

-- Each module can requests an UI (EXT) resource like a region, menu or tabpanel.

-- Each module provides UI components like a TreePanel, GridPanel, Contentpanel or menuItem which will be added/integrated to the requested UI resource.

-- the modulemanager takes care that the JS code gets loaded, together with resources like CSS and that the required HTML elements are created. Again the modulemanager gets this information from the modules.

At this stage, the page will not be initialized, because we miss some config options.

Second Stage:
=============
Now that the page and the JS files are loaded, the JS components needs to be initialized.
However, we need the config options for the UI elements, bc these are not part of the 1st stage loader.

- Because EXT 2.0 allows the creation of components using config objects in JSON notation, after this happend the main page sends an XHR request to get all configuration options. This is in the responsibilty of the modulemanager to ask the modules what they need. Response will be JSON stored in a JS object.

-- All JS code including core layout and module is written to reference the global config object that is populated via XHR. This includes also language specific strings like panel header, gridheader etc.

-- The JS world gets initialized.

From this point, the "application" has started and the will send only requests to the php world via XHR. In other words, CI controller methods will be called that in turn will usally respond with JSON or XML.


Note: Of cause one could create a JSON string in the first stage that contains config and language options. But i would not want them to be visible in a script tag. Also, the XHR method would be more flexible IMHO.

Any comments are welcome

Regards

Wolfgang

[eluser]WolfgangA[/eluser]
Example of such an config option in JSON (to work with EXT 2.0 not 1.1.1):

Code:

{
"items":[{
    "layout":"card",
    "title":"CardLayout Container"
  },{
    "xtype":"tabpanel",
    "activeTab":0,
    "items":[{
        "xtype":"panel",
        "title":"H1"
      },{
        "xtype":"panel",
        "title":"H2"
      },{
        "xtype":"panel",
        "title":"H3"
      },{
        "xtype":"panel",
        "title":"H4"
      }]
  },{
    "xtype":"textfield",
    "fieldLabel":"Text",
    "name":"textvalue"
  },{
    "xtype":"numberfield",
    "fieldLabel":"Number",
    "name":"numbervalue"
  },{
    "xtype":"checkbox",
    "fieldLabel":"Label",
    "boxLabel":"Box label",
    "name":"checkbox",
    "inputValue":"cbvalue"
  },{
    "xtype":"radio",
    "fieldLabel":"Label",
    "boxLabel":"Box label",
    "name":"radio",
    "inputValue":"radiovalue"
  }]
}