PDA

View Full Version : Why is Sencha Cmd not adding most of my ExtJS 4.2 app into app.js.



xjscrafter
10 Feb 2014, 10:42 PM
I'm looking into using Sencha Cmd 4.0.2.67. I generated a skeleton app with generate, created a workspace and a package, and sencha app build runs fine, no errors or warnings.

But when I look in the /workspace/build/production/AMC/ folder, minified app.js has only 19 Ext.define, but my app has at least 250 Ext.define for all my classes.

I thought when I define app.js in my dev environment, dependencies would be resolved, and all mode code would be minified and put in app.js in production.

Here is an example of my app.js in my dev enviroment:


Ext.Loader.setConfig({
enabled : true
});


Ext.application({
name: 'AMC',
appFolder: 'app',


requires: [
'atlas.model.Pool',
'atlas.model.Volume',
'base.model.Job',
'atlas.model.Performance',
'atlas.utilities.CommonUtil',
'atlas.utilities.CommonVTypes'
],


views: [
'atlas.view.login.Login'
],


controllers: [
'atlas.wizard.impl.hanode.controller.WizardHaNodeController',
'atlas.wizard.impl.agg.controller.WizardAggController',
'atlas.wizard.impl.disk.controller.WizardDiskController',
'atlas.wizard.impl.mem.controller.WizardMemController',
'atlas.wizard.impl.ads.controller.WizardAdsController',


'atlas.wizard.base.controller.WizardReviewController',
'atlas.wizard.base.controller.WizardWindowController',
'atlas.wizard.base.controller.WizardPanelController',
'atlas.wizard.base.controller.WizardFormTypeTierController',
'atlas.wizard.base.controller.WizardFormTypeOptimizeController',
'atlas.wizard.base.controller.WizardFormTypeInMemoryController',
'atlas.wizard.base.controller.WizardFormTypeMemoryPureController',
'atlas.wizard.base.controller.WizardLookupDataStoreController',
'atlas.wizard.base.controller.WizardLookupImportsController',
'atlas.wizard.base.controller.WizardLookupHostDatastoreController',


'atlas.controller.ha.HaNodeController',
'atlas.controller.portlet.GraphiteController',
'atlas.controller.setting.VcenterController',
'atlas.controller.setting.SettingController',
'atlas.controller.PerspectiveController',
'atlas.controller.cluster.AssignVolumeToClusterController',
'atlas.controller.cluster.AssignPoolToClusterController',
'atlas.controller.login.LoginController',
'atlas.controller.ha.DeleteHAConfigController',
'atlas.controller.ha.CreateHAConfigController',
'atlas.controller.pool.AddAggregatorToPoolController',
'base.controller.HeaderLinkController',
'atlas.wizard.base.controller.WizardOptionsController',
'base.controller.task.TaskListController',
'base.controller.TabPanelController',
'atlas.controller.cloud.CloudGettingStartedController',
'atlas.controller.cloud.CloudOverviewController',
'atlas.controller.aggregator.AggregatorHostListController'
],


models: [
'atlas.model.Pool',
'atlas.model.Volume',
'base.model.Job',
'atlas.model.Performance',
'base.model.Task'
],


stores: [
'atlas.wizard.base.store.WizardHaConfigStore',
'atlas.store.PerformancePoolTypeStore',
'atlas.store.PerformanceVolumeTypeStore',
'atlas.store.PerformanceChartTypeStore',
'atlas.store.TimeRangeStore'
],


init: function()
{
var me = this;
me.setRestWebServiceUrl();


delete Ext.tip.Tip.prototype.minWidth;


// This statement is disabling browser default context menu when right-clicking in ExtJS.
Ext.getBody().on("contextmenu", Ext.emptyFn, null, {preventDefault: true});
},


launch: function()
{
//Ext.create('atlas.view.login.LoginForm');
Ext.create('atlas.view.login.Login');
//Ext.create('atlas.view.Viewport');
},


onAddController : function(index, controller, key)
{
controller.init(this);
},


getPerspective: function()
{
return this.perspective;
},


getPerspectiveId: function()
{
return this.perspectiveId;
},


getPerspectiveController : function()
{
return this.getController('atlas.controller.PerspectiveController');
}
});

xjscrafter
10 Feb 2014, 11:53 PM
I thought this might be a namespace issue, so I made some tweaks.

But now sencha app build gives this error:

Requirement had no matching files (AMC.model.base.model.Job)

In app.js I have this is requires: [...]

'AMC.base.model.Job'

xjscrafter
11 Feb 2014, 1:03 AM
I wonder if this is because we don't have this app structure:


MyApp
/app
/controller
/model
/store
/view


But instead we have this app structure:


MyApp
/app
/feature1
/controller
/model
/store
/view
/feature2
/controller
/model
/store
/view


Here is a sample define:


Ext.define('base.model.Job', {


Here is from app.js


Ext.application({
name: 'AMC',
appFolder: 'app',


requires: [
'base.model.Job',

xjscrafter
11 Feb 2014, 7:06 AM
Can anyone comment on this?

burnnat
11 Feb 2014, 7:18 AM
I've not seen this behavior before, so I'm not sure what could be causing it. One thing to try is to specify the --debug flag for Sencha Cmd to log additional debugging information (you'll probably want to pipe the output to a file, since there's a lot of it - e.g. sencha --debug app build > log.txt). There may be helpful information in there about why your classes aren't being picked up.

xjscrafter
11 Feb 2014, 7:33 AM
Well, I went through the guide here, and after building, then changing the name of the controller, then building again, the compressed build folder app.js did not change. Now I'm totally confused about using Sencha Cmd.

xjscrafter
11 Feb 2014, 8:32 AM
I see a lot of lines like this:

accumulating symbols for file D:\atlantis\amc\gui\src\main\webappnew\workspace\extApps\usx\app\base\view\TreePanel.js

and this:

[DBG] Detected active instantiation reference to base.view.TreePanel in file D:\atlantis\amc\gui\src\main\webappnew\workspace\extApps\usx\app\base\view\TreePanel.js
[DBG] Adding dynamic requirement on base.view.TreePanel to TreePanel.js as a GenericAutoDependency


and this:

[DBG] Enabling transitive dependencies for D:\atlantis\amc\gui\src\main\webappnew\workspace\extApps\usx\app\base\view\TreePanel.js

So Sencha Cmd seems to be aware of my files, but it does not seem to compress them.

xjscrafter
11 Feb 2014, 10:33 AM
anyone

burnnat
11 Feb 2014, 10:55 AM
So Sencha Cmd seems to be aware of my files, but it does not seem to compress them.

When you say Sencha Cmd "does not seem to compress" your files, you mean they're missing entirely from the built output, right? Or are they there but not compressed?

And what does your index.html file look like?

xjscrafter
11 Feb 2014, 11:04 AM
The content of my app files are not in the output.

Here is index.html in the build dir:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>AMC</title>
<link rel="stylesheet" href="resources/AMC-all.css"/>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

burnnat
11 Feb 2014, 11:27 AM
Well, if that's the output it looks like your <!-- <x-compile> ---> comments are set up correctly. I'm running out of ideas; your original post says your minified app.js contains 19 "Ext.define" statements... can you figure out which classes these are and what they have in common? For example, your "requires" block looks like this:

requires: [
'atlas.model.Pool',
'atlas.model.Volume',
'base.model.Job',
'atlas.model.Performance',
'atlas.utilities.CommonUtil',
'atlas.utilities.CommonVTypes'
],

Are any of those classes present in the 19 included in app.js?

xjscrafter
11 Feb 2014, 12:10 PM
The way I see the 19 Ext.define() is to do a search/replace of Ext.define with Ext.define\n

Here are the results, (only beginning of line displayed because the lines are many chars long):

Ext.define(a.name+".$application",Ext.apply({extend:"Ext.app.Application"},a)
Ext.define("Ext.dom.AbstractElement_static",{override:"Ext.dom.AbstractElement"
Ext.define("Ext.dom.AbstractElement_insertion",{override:"Ext.dom.AbstractElement"
Ext.define("Ext.dom.AbstractElement_style",{override:"Ext.dom.AbstractElement"}
Ext.define("Ext.dom.AbstractElement_traversal",{override:"Ext.dom.AbstractElement"
Ext.define("Ext.dom.Element_anim",{override:"Ext.dom.Element",
Ext.define("Ext.dom.Element_dd",{override:"Ext.dom.Element",initDD
Ext.define("Ext.dom.Element_fx",{override:"Ext.dom.Element"},functi
Ext.define("Ext.dom.Element_position",{override:"Ext.dom.Element"},
Ext.define("Ext.dom.Element_scroll",{override:"Ext.dom.Element",
Ext.define("Ext.dom.Element_style",{override:"Ext.dom.Element"},
Ext.define("Ext.fx.Easing",{singleton:true,linear:Ext.identityFn,ease
Ext.define("Ext.layout.container.border.Region",{override:"Ext.Component",
Ext.define(c,b)}this.types[c]=a;return a},unregisterType:function(a){delete thi
Ext.define("Ext.data.reader.Json-Model"+Ext.id(),{extend:"Ext.data.Model",fie
Ext.define("Ext.data.Store.ImplicitModel-"+(c.storeId||Ext.id()),{extend:"Ext.da
Ext.define("Ext.grid.plugin.BufferedRendererTableView",{override:"Ext.view.Ta
Ext.define("Ext.grid.plugin.BufferedRendererTreeView",{override:"Ext.tree.Vie
Ext.define("Ext.overrides.tab.Panel",{override:"Ext.tab.Panel",add:function(){th

I'm tempted to say the entry with this is my code, but with names obfuscated:
Ext.define(c,b)