View Full Version : Is it possible to use Sencha SDK and Sandbox mode

10 Oct 2011, 5:30 AM
I want to use Sencha SDK to deploy my app but I need to use the Sandbox version of ExtJS4. I keep getting an error saying that 'Ext is not defined'. The app and the build worked perfect when I was including ext-debug.js, but when I switch to any of the sandbox files, I just get the error on the build.
Does anyone know if this should be possible or not?

20 Oct 2011, 10:43 PM
Did anybody tried to modify existing ext-debug.js file in order to work in sandbox mode?

21 Oct 2011, 12:00 AM
I have not tried to modify this. JSBuilder definitely does not support Sandbox mode at present, I'm hoping Sencha will provide this is a future release.

26 Oct 2011, 1:40 AM
Hi ,

I managed to use ext-debug.js in sandbox mode. All you need to do is to add around the existing source code with the following :

if (typeof Ext === 'undefined') {
this.Ext = {};

Ext.buildSettings = {"baseCSSPrefix":"x4-","scopeResetCSS":true};
Ext.isSandboxed = true;

//ext-debug.js content

})(this.Ext4 || (this.Ext4 = {}));

Hope this helps

28 Aug 2012, 11:35 AM

I wonder if this problem persists in version 2.0.0-beta3.

I am awaiting.


29 Nov 2013, 3:51 AM
After almost an entire day of trying to achieve it manually I discovered there is a sandbox build command in Sencha Cmd v4.0.1.45!

There are loads of ways you could set this but adding the following line to ${app.dir}/.sencha/app/sencha.cfg is pretty simple:


(These options are used with the compile "concatenate" command.)

It's a shame Sencha failed to document this option; although I appreciate sandboxing isn't recommended for release for transitional reasons we're doing it anyway.

2 Dec 2013, 8:46 AM
Thank you! This works for me.

9 Jan 2014, 4:43 PM
Thanks wajb, very fruitful indeed!


So Ext4 becomes the name of the Ext global object.

And x4 becomes Ext.buildSettings.baseCSSPrefix

Then I set $prefix: 'x4' in sass/var/all.scss. Perfect.

3 Mar 2015, 7:03 AM
Then I set $prefix: 'x4' in sass/var/all.scss. Perfect.

I'm not clear on how to change the final output CSS to include the 'x4' prefix. I tried creating an all.scss in the folder you mentioned then do 'sencha app build'. The output resources/appname-all.css doesn't contain the 'x4-'. Could you tell me where am I doing wrong?

4 Mar 2015, 3:17 AM
Good spot! There were some changes made in Sencha Cmd 5.1 release.

Now additionally, you must open .sencha/app/sencha.cfg

Add a new line in there like this: build.optimize.cssPrefix=false

Sencha have documented it as an optimization change affecting Ext.baseCSSPrefix, see:

http://www.sencha.com/blog/announcing-ext-js-51-beta/ (CTRL+F for basecssprefix)