Thread

This is my first ExpressionEngine forum post.

I purchased a “FreeLancer” license about four weeks ago and have built a number of test applications as a learning exercise. EE is wonderful!

And now I am ready to upgrade to a multi-site license and begin working on some real client websites.

My favorite JavaScript library is ExtJs from Sencha. So, I decided to explore their latest release (ExtJs 4.0) at the same time as learning EE.

The result is an app that I call “EECI Studio” which extends some of the functionality of the EE control panel. So far, there are two functions available:

—a “Project Browser” which can edit information in a custom “project” channel
—a “Template Browser” which can edit EE templates

The app uses the ExtJs “desktop” metaphor which allows multiple application “windows” within the browser.
There is a screenshot attached which will give a better idea.

I intend to use this as my main development environment for EE and I plan to add more capabilities as time permits (channel browser, account browser, GUI designer, etc).

My impression is that ExtJs 4 is a good library to use with ExpressionEngine - a sophisticated user interface matched with a very capable CMS.

I’ll post some more info as the project develops…

—Peter

This has a lot of potential! It has some similarity to Mountee but it’s great since this is for Windows as I see from the screenshot. Very promising work 😊 congrats!

Just out of curiosity are you using the new Ext Designer to build this project?

No, I don’t use any desktop tools at all - except Notepad++ when I need to improve formatting.

The entire GUI is built on the server in PHP. Here is a sample of the code:

$namegrid = array(
        'xtype' => 'grid',
        'region' => 'center',
        'listeners' => array(
            'itemClick' => 'showTemplateDetail'
        ),
        'forceFit' => true,
        'columns' => array(
            array(
                'header' => 'Template Name',
                'dataIndex' => 'template_name',
                'componentCls' => 'listHeader'
            )
        ),
        'store' => 'getTemplateStore',
                'viewConfig' => array(
                     'stripeRows' => false,
            'componentCls' => 'nameList'
                )
    );
    $namefield = array(
        'xtype' => 'textfield',
        'region' => 'south',
        'fieldCls' => 'templateCode'
    );

Once the configuration is created, it is sent to the client in JSON format:

<?php
$window=cmp_window('Template Browser', 575, 625, 'cmp_template_content');
$this->EE->output->send_ajax_response($window);
?>

And this is the EE template for the client-side code that generates the widget:

{eecis_constants}
Site.fns.openWindow = function(name) {
    Ext.Ajax.request({
        method:'POST',
        url: '/index.php/{site_root}_cmp/'+name,
        success: function(x) {
            var cfg = Ext.decode(x.responseText);
            Site.fns.resolve(cfg);
            Ext.ComponentMgr.create(cfg);
        }
    });
};

The goal is to eliminate “hand-coded” JavaScript as much as possible and maintain an inventory of GUI widget configs in the database.