WP-ExtJS

Background

WP-ExtJS is a WordPress Plugin that enables bloggers to leverage the power and flexibility of the ExtJS Javascript framework directly within pages or posts.

If you’re not familiar with ExtJS – head on over to Sencha.com and check out this awesome Javascript framework.

Why Do I Need This?

Publishing content via WordPress and designing web based applications using Javascript are very different approaches to publishing web data.  Wordpress is typically used by bloggers as a Content Management System for publishing articles.  We know that it makes the process of publishing and maintaining blog articles extremely fast and easy.   The issue arises however, when I want to display data from an outside source using some of the beautiful and powerful Javascript components such as the datagrid, treepanel and listview.  This plugin enables you to do just that from right inside a page or post on your WordPress blog.

How Do I Use the Plugin?

First, you need to download and install ExtJS somewhere on your web server.  You can get a copy from http://sencha.com.  Unzip and install the files from the archive into a web accessibly directory on your web server.  Take note of the path to the directory where you place the files – you will need this when installing and configuring the wp-extjs plugin.

Once the plugin is installed and activated it enables a new custom post type called “ExtJS Snippets” which you can use to store your ExtJS scripts. After creating a snippet, take note of the numeric id assigned by WordPress.

These javascript snippets can be referenced within pages and posts through use of several shortcodes.  A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

The shortcode for WP Extjs looks like this:

[wp-extjs snippet_id=958 border=’1′ style=’background: #333333′ title=’example’ height=400 width=100%]

When WordPress processes the content of a page or post and finds that shortcode, it transfers control to my plugin which calls a special renderer to display the content of your Javascript snippet and you end up seeing something like this:

[wp-extjs snippet_id=958 border=’1′ style=’background: #333333′ title=’example’ height=400 width=100%]

Screenshots

How do i get the plugin?

You may download the plugin from the WordPress.org Plugin Repository.

Advertisements

10 thoughts on “WP-ExtJS

  1. Jay Garcia says:

    pssssssst. Sencha is the company name, not the product name. By the looks of it, your plugin has issues with managing scrolling with Ext JS.

  2. wregen says:

    @Jay: you could say something nice sometime.

    @merlynn: Good job.

  3. Floris says:

    I encountered an error in the admin backend.
    “You do not have sufficient permissions to access this page.”
    I’ve tried a lot of different solutions, but none of them have worked so far. I’m using WordPress 3.0.3.
    Can you please help me?

  4. Wayne says:

    I also got “You do not have sufficient permissions to access this page.” when I clicking “settings” in plugin page, I’m using wordpress 3.0.4 and WP-ExtJS 1.0.3

    • mike says:

      This is a bug – I will fix this in a next release. However, you don’t need to use that link to get to the settings… you can get to the settings using the link in the left side administrative menu in the Settings section labeled “WP Extjs”

  5. Stephan says:

    Hi Mike .. the link to your homepage in the plugin description has a typo. But more important in renderer.php the additional header lines are printed inside the script snippet (see print_r($addl_head);). In my view it should be inserted before the script – not inside. Thank you for the plugin. Very nice work.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: