WP-ExtJS Chart Example

Here’s an example of the wp-extjs plugin in action. The wp-extjs plugin creates a new custom WordPress post type called ExtJS Snippets. It also creates a shortcode that you can use in your posts or pages to include the working examples from your ExtJS Snippets.

To create this example, I first created a new ExtJS Snippet with the following content:

Ext.onReady(function() {

	var store = new Ext.data.JsonStore({
		baseParams: {
			symbol: 'GOOG'
		},
		autoLoad: true,
		url: 'http://www.mlynn.org/wp-content/plugins/wp-extjs/example1/data1.php',
		root: 'data',
		fields: ['date', 'close']
	});

	new Ext.Window({
		title: 'GOOG',
		width: 400,
		height: 300,
		items: new Ext.chart.LineChart({
            store: store,
            xField: 'date',
			yField: 'close'
        })
	}).show();
});

Next, we create this post as we would create any normal post or page and include the following shortcode:

[wp-extjs snippet_id=958]

WP-ExtJS makes it easy to insert the shortcode. You can use the handy ExtJS Snippet Insertion tool in the WordPress Editor.

Here’s what the finished ExtJS product looks like:
[wp-extjs snippet_id=958 border=’1′ style=’background: #333333′ title=’example’ height=400 width=100%]

As you can see, this example is native ExtJS Window with a Chart Component. This is not an image or screenshot of the ExtJS Component – You can drag the window around inside the rendered post.

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: