WP-ExtJS ExtJS Examples using the WordPress ExtJS Plugin

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:

[wp-extjs snippet_id=”986″]

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.
[wp-extjs snippet_id=”994″]

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.

Advertisements

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: