How to add Custom UX into Sencha touch

Question

Might be basic question, but can some one please clarify how can i include custom ux into my Sencha touch application.

Here are the details 1. I'm adding youtubeplayer into sencha touch (http://code.google.com/p/ext-ux-youtubeplayer/downloads/detail?name=ext-ux-youtubeplayer-0.5.rar&can=2&q=)

I've downloaded and placed in root folder of my app (C:\xampp\htdocs\Sencha_New\touch-2.2.0\kids\ux)
i added this entry in app.js

// Ext.Loader.setPath({ 'Ext': 'touch/src', 'kids': 'app', 'Ext.ux.YoutubePlayer': './ux/ext-ux-youtubeplayer' //Pavan - added for Youtube player EXTJS });
added this entry in app\sencha.cfg

app.classpath=${app.dir}/app.js,${app.dir}/app,ux

When i try to instantiate this, getting an error

Uncaught TypeError: Cannot read property 'YoutubePlayer' of undefined

Thanks Pavan

Jordan Kasper Jordan Kasper · Accepted Answer · 2013-02-21T00:10:55

Hmmm... in my app.js I have a Ux plugin I use, but my call to setPath looks like this:

Ext.Loader.setPath({
  'Ext': 'touch/src',
  'MyApp': 'app',
  'Ux': 'vendor/Ux'
});

The class of the plugin is Ux.layout.Accordion and my folder structure is like this:

root
|_app
|_resources
...
|_vendor
 |_Ux
  |_layout
   |_Accordion.js

The corresponding line in my sencha.cfg is:

app.classpath=${app.dir}/vendor,${app.dir}/app.js,${app.dir}/app

I'm wondering if your setPath arguments are correct, perhaps you should not fully expand the class name? Also the paths should be relative to your index.html file I'm pretty sure.

How to add Custom UX into Sencha touch

1 Answers