mlynn.org

The WP-ExtJS plugin lets you insert completely functional ExtJS examples right in your word press posts. You can include ExtJS examples that render to the document body – like this treepanel example:

Or, you can even include ExtJS scripts which render to the elements in the document body. You do this using the optional Additional Content settings in the ExtJS Editor. Here’s an example which renders to a div called gridpanel.

To display this snippet in a blog post, you can use the ExtJS Snippet Selector which provides listing of the available snippets to insert into a post, or you can type the shortcode manually like this:

[wp-extjs snippet_id=”994″]

Here’s the actual ExtJS Snippet:

var sUrl = '/wp-content/plugins/wp-extjs/examples/sheldon.xml';

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        url: sUrl,

        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have an "Item" tag
               record: 'Item',
               id: 'ASIN',
               totalRecords: '@total'
           }, [
               // set up the fields mapping into the xml doc
               // The first needs mapping, the others are very basic
               {name: 'Author', mapping: 'ItemAttributes > Author'},
               'Title', 'Manufacturer', 'ProductGroup'
           ])
    });

    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {header: "Author", width: 120, dataIndex: 'Author', sortable: true},
            {header: "Title", width: 180, dataIndex: 'Title', sortable: true},
            {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
            {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
        ],
        renderTo:'gridpanel',
        width:540,
        height:200
    });

    store.load();
});

Here’s a screenshot showing use of the Additional Body Content option in the ExtJS Snippet Editor.

For more information check out the plugin on the wordpress.org plugin repository.

Related posts:

1. WP-ExtJS Chart Example
2. Publish ExtJS Snippets inside WordPress Pages or Posts
3. Create a custom sidebar for each page or post with this Graceful Sidebar WordPress Plugin
4. I know where you live – WP Geocode WordPress Plugin Ready for Release