Sencha touch load plugin

I just start to learn sencha touch few week ago. I facing a problem now .I need to add image field to form panel. I find a new plugin which allow us add image to form panel.
Here is the link http://www.sencha.com/forum/showthre...orm.ImageField
But now I got a question , How can I implement the plugin to my application?
Here is my app.js

Code:

//<debug>

Code:

Ext.Loader.setPath({ 'Ext': 'touch/src',//Location of the sencha touch source files 'bluebutton': 'app',});//</debug>Ext.application({ name: 'bluebutton',//Application Path, all classes in you app. For eg blueButton.view.Main.case sensitive models: [], views: ['Main'], controllers: ['Main', 'BlueButton.MemberList'], stores: ['BlueButton.MemberList', 'TopMenuList'], requires: [ 'Ext.MessageBox' ], icon: { '57': 'resources/icons/Icon.png', '72': 'resources/icons/Icon~ipad.png', '114': 'resources/icons/Icon@2x.png', '144': 'resources/icons/Icon~ipad@2x.png' }, isIconPrecomposed: true, startupImage: { '320x460': 'resources/startup/320x460.jpg', '640x920': 'resources/startup/640x920.png', '768x1004': 'resources/startup/768x1004.png', '748x1024': 'resources/startup/748x1024.png', '1536x2008': 'resources/startup/1536x2008.png', '1496x2048': 'resources/startup/1496x2048.png' }, launch: function() { // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Initialize the main view Ext.Viewport.add(Ext.create('bluebutton.view.Main')); Ext.create('bluebutton.view.TopMenuList'); }, onUpdated: function() { Ext.Msg.confirm( "Application Update", "This application has just successfully been updated to the latest version. Reload now?", function(buttonId) { if (buttonId === 'yes') { window.location.reload(); } } ); } });

My FormPanel js file

Code:

Ext.define('bluebutton.view.BlueButton.MemberDetail', {

Code:

extend: 'Ext.Container', xtype: 'memberdetailcard', requires: [ 'Ext.form.Panel', 'Ext.form.FieldSet', 'Ext.field.Text', 'Ext.ux.Form' ], config: { title: 'Member Profile', layout: 'fit', items: [ { xtype: 'formpanel', items: [ { xtype: 'fieldset', defaults: { labelWidth: '35%' }, title: 'Information', items: [ { ///??Hw can I put image here ?????? }, { xtype: 'textfield', label: 'First Name', name: 'firstName' }, { xtype: 'textfield', label: 'Last Name', name: 'lastName' }, { xtype: 'textfield', label: 'Title', name: 'title' }, ] }, { xtype: 'fieldset', defaults: { labelWidth: '35%' }, title: 'Contact Information', items: [ { xtype: 'textfield', label: 'Telephone', name: 'telephone' } ] }, { xtype: 'fieldset', title: 'Address', defaults: { labelWidth: '35%' }, items: [ { xtype: 'textfield', label: 'City', name: 'city' }, { xtype: 'textfield', label: 'State', name: 'state' }, { xtype: 'textfield', label: 'Country', name: 'country' } ] } ] } ], listeners: { delegate: 'textfield', keyup: 'onKeyUp' }, record: null }, updateRecord: function (newRecord) { this.down('formpanel').setRecord(newRecord); }, saveRecord: function () { var formPanel = this.down('formpanel'), record = formPanel.getRecord(); formPanel.updateRecord(record); return record; }, onKeyUp: function () { this.fireEvent('change', this); }});Ext.define('Ext.ux.field.ImageField', { extend: 'Ext.field.Field', requires: [ 'Ext.Img'], xtype: 'imagefield', config: { component: { xtype: 'image' } }, updateValue: function (value, oldValue) { var me = this, component = me.getComponent(); component.setSrc(value); }, proxyConfig: { width: '100%', height: '100%' } });

Please guild me a solution. Thanks