PDA

View Full Version : ExtJs 4 MVC inside of Salesforce



softelephant
21 Mar 2012, 8:20 PM
Hello,

I have created a simple form with a grid to work with salesforce. I created the layout with Sencha Designer 2 using MVC. When I deploy the files to a regular web server everything works fine. When I take the app directory, zip it up, and then deploy to salesforce as a static resource it does not work.

The visualforce page I use is:


<apex:page >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PackageManager</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all-debug.js"></script>

<apex:includeScript value="{!URLFOR($Resource.app, '/designer.js')}"/>
</head>
</apex:page>


When the page loads it fetches the designer.js file without problem but when it goes to grab the MyController.js and ViewPort.js files they are 'corrupt'. Instead of being feed as straight javascript files their contents are feed out wrapped in the standard salesforce header/footer. To extjs it's getting html data instead of javascript data.

I wrapped all of the designer generated code with <script> tags to ensure the extjs part is read a javascript but I did not get any further.

I think the problem is that the MVC architecture is looking to be initiated off a simple page. I want to embed it within a more complicated page. What do I need to do to convert the designer project to one large file?

Or, what do I have to do to get the MVC framework to fire up correctly when running within a page that already has other javascript code?

Thanks!

mitchellsimoens
22 Mar 2012, 6:48 AM
When you deploy, you should be doing a build to build all the JS files into one JS file and not use the dynamic loading.

softelephant
22 Mar 2012, 7:54 AM
Using the Sencha SDK Tools does not seem to work.

designer.html


<!DOCTYPE html>

<!-- Auto Generated with Sencha Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PackageManager</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext.js"></script>
<script type="text/javascript" src="designer.js"></script>
</head>
<body></body>
</html>


Executing the following does nothing.


sencha create jsb -a designer.html -p test.jsb3


There is no test.jsb3 file created. Am I running things in the correct order or did I miss something?

softelephant
23 Mar 2012, 3:57 PM
I have finally got some progress with the SDK tools to work:


Don't use SDK 2.0 Beta tools as they don't work at all. Very frustrating to see posts from Sencha about them not working but no answer on how to make them work. I think it would have been best for the 2.0 beta tools to be pulled until they work to some degree.
You need to remove the 'ext-debug-all.js' line from the designer.html and change it to 'ext-debug.html'
You need to copy designer.js to app.js (because the JSB3 file created refers to opp.js and not designer.js even though it should figure things out

Now that's done I get the flowing JSB3 file:



{
"projectName": "Project Name",
"licenseText": "Copyright(c) 2011 Company Name",
"builds": [
{
"name": "All Classes",
"target": "all-classes.js",
"options": {
"debug": true
},
"files": [
{
"path": "../extjs4/src/util/",
"name": "Observable.js"
},
{
"path": "../extjs4/src/data/",
"name": "Association.js"
},
{
"path": "../extjs4/src/data/",
"name": "IdGenerator.js"
},
{
"path": "../extjs4/src/data/",
"name": "Operation.js"
},
{
"path": "../extjs4/src/data/",
"name": "validations.js"
},
{
"path": "../extjs4/src/util/",
"name": "HashMap.js"
},
{
"path": "../extjs4/src/data/",
"name": "SortTypes.js"
},
{
"path": "../extjs4/src/data/",
"name": "Connection.js"
},
{
"path": "../extjs4/src/util/",
"name": "Filter.js"
},
{
"path": "../extjs4/src/util/",
"name": "Sorter.js"
},
{
"path": "../extjs4/src/data/writer/",
"name": "Writer.js"
},
{
"path": "../extjs4/src/util/",
"name": "KeyMap.js"
},
{
"path": "../extjs4/src/util/",
"name": "Memento.js"
},
{
"path": "../extjs4/src/data/",
"name": "ResultSet.js"
},
{
"path": "../extjs4/src/fx/",
"name": "CubicBezier.js"
},
{
"path": "../extjs4/src/panel/",
"name": "Proxy.js"
},
{
"path": "../extjs4/src/",
"name": "Template.js"
},
{
"path": "../extjs4/src/fx/",
"name": "Queue.js"
},
{
"path": "../extjs4/src/dd/",
"name": "StatusProxy.js"
},
{
"path": "../extjs4/src/",
"name": "ZIndexManager.js"
},
{
"path": "../extjs4/src/",
"name": "ComponentQuery.js"
},
{
"path": "../extjs4/src/util/",
"name": "KeyNav.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "Target.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Color.js"
},
{
"path": "../extjs4/src/layout/",
"name": "Layout.js"
},
{
"path": "../extjs4/src/util/",
"name": "Floating.js"
},
{
"path": "../extjs4/src/layout/container/boxOverflow/",
"name": "None.js"
},
{
"path": "../extjs4/src/util/",
"name": "Offset.js"
},
{
"path": "../extjs4/src/util/",
"name": "Animate.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "AbstractContainer.js"
},
{
"path": "../extjs4/src/util/",
"name": "ClickRepeater.js"
},
{
"path": "../extjs4/src/util/",
"name": "TextMetrics.js"
},
{
"path": "../extjs4/src/state/",
"name": "Provider.js"
},
{
"path": "../extjs4/src/app/",
"name": "Controller.js"
},
{
"path": "../extjs4/src/app/",
"name": "EventBus.js"
},
{
"path": "../extjs4/src/",
"name": "AbstractManager.js"
},
{
"path": "../extjs4/src/",
"name": "ModelManager.js"
},
{
"path": "../extjs4/src/",
"name": "ComponentManager.js"
},
{
"path": "../extjs4/src/data/",
"name": "Types.js"
},
{
"path": "../extjs4/src/data/",
"name": "Field.js"
},
{
"path": "../extjs4/src/",
"name": "Ajax.js"
},
{
"path": "../extjs4/src/util/",
"name": "AbstractMixedCollection.js"
},
{
"path": "../extjs4/src/util/",
"name": "Sortable.js"
},
{
"path": "../extjs4/src/util/",
"name": "MixedCollection.js"
},
{
"path": "../extjs4/src/data/",
"name": "StoreManager.js"
},
{
"path": "../extjs4/src/data/",
"name": "Errors.js"
},
{
"path": "../extjs4/src/data/writer/",
"name": "Json.js"
},
{
"path": "../extjs4/src/data/reader/",
"name": "Reader.js"
},
{
"path": "../extjs4/src/data/reader/",
"name": "Json.js"
},
{
"path": "../extjs4/src/data/proxy/",
"name": "Proxy.js"
},
{
"path": "../extjs4/src/data/proxy/",
"name": "Server.js"
},
{
"path": "../extjs4/src/data/proxy/",
"name": "Ajax.js"
},
{
"path": "../extjs4/src/data/",
"name": "Model.js"
},
{
"path": "../extjs4/src/",
"name": "XTemplate.js"
},
{
"path": "../extjs4/src/fx/",
"name": "Easing.js"
},
{
"path": "../extjs4/src/",
"name": "FocusManager.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "Element.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "CompositeElement.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "Sprite.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "CompositeSprite.js"
},
{
"path": "../extjs4/src/fx/target/",
"name": "Component.js"
},
{
"path": "../extjs4/src/fx/",
"name": "Manager.js"
},
{
"path": "../extjs4/src/fx/",
"name": "Animator.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Draw.js"
},
{
"path": "../extjs4/src/fx/",
"name": "PropertyHandler.js"
},
{
"path": "../extjs4/src/fx/",
"name": "Anim.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Component.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "AbstractDock.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Dock.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Tip.js"
},
{
"path": "../extjs4/src/util/",
"name": "Region.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DragDropManager.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "Container.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "Auto.js"
},
{
"path": "../extjs4/src/layout/container/boxOverflow/",
"name": "Scroller.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DragDrop.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DD.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DDProxy.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DragSource.js"
},
{
"path": "../extjs4/src/panel/",
"name": "DD.js"
},
{
"path": "../extjs4/src/state/",
"name": "Manager.js"
},
{
"path": "../extjs4/src/state/",
"name": "Stateful.js"
},
{
"path": "../extjs4/src/",
"name": "AbstractComponent.js"
},
{
"path": "../extjs4/src/",
"name": "Component.js"
},
{
"path": "../extjs4/src/container/",
"name": "AbstractContainer.js"
},
{
"path": "../extjs4/src/container/",
"name": "Container.js"
},
{
"path": "../extjs4/src/panel/",
"name": "Header.js"
},
{
"path": "../extjs4/src/toolbar/",
"name": "Fill.js"
},
{
"path": "../extjs4/src/toolbar/",
"name": "Item.js"
},
{
"path": "../extjs4/src/toolbar/",
"name": "Separator.js"
},
{
"path": "../extjs4/src/menu/",
"name": "Manager.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Button.js"
},
{
"path": "../extjs4/src/button/",
"name": "Button.js"
},
{
"path": "../extjs4/src/layout/container/boxOverflow/",
"name": "Menu.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "Box.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "HBox.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "VBox.js"
},
{
"path": "../extjs4/src/toolbar/",
"name": "Toolbar.js"
},
{
"path": "../extjs4/src/panel/",
"name": "AbstractPanel.js"
},
{
"path": "../extjs4/src/panel/",
"name": "Panel.js"
},
{
"path": "../extjs4/src/tip/",
"name": "Tip.js"
},
{
"path": "../extjs4/src/tip/",
"name": "ToolTip.js"
},
{
"path": "../extjs4/src/tip/",
"name": "QuickTip.js"
},
{
"path": "../extjs4/src/tip/",
"name": "QuickTipManager.js"
},
{
"path": "../extjs4/src/app/",
"name": "Application.js"
},
{
"path": "../extjs4/src/util/",
"name": "Point.js"
},
{
"path": "../extjs4/src/",
"name": "Layer.js"
},
{
"path": "../extjs4/src/data/",
"name": "Batch.js"
},
{
"path": "../extjs4/src/data/",
"name": "Request.js"
},
{
"path": "../extjs4/src/",
"name": "PluginManager.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Auto.js"
},
{
"path": "../extjs4/src/",
"name": "LoadMask.js"
},
{
"path": "../extjs4/src/resizer/",
"name": "Resizer.js"
},
{
"path": "../extjs4/src/panel/",
"name": "Tool.js"
},
{
"path": "../extjs4/src/util/",
"name": "CSS.js"
},
{
"path": "../extjs4/src/",
"name": "ElementLoader.js"
},
{
"path": "../extjs4/src/dd/",
"name": "DragTracker.js"
},
{
"path": "../extjs4/src/layout/component/",
"name": "Draw.js"
},
{
"path": "../extjs4/src/menu/",
"name": "Item.js"
},
{
"path": "../extjs4/src/menu/",
"name": "KeyNav.js"
},
{
"path": "../extjs4/src/menu/",
"name": "Separator.js"
},
{
"path": "../extjs4/src/data/",
"name": "AbstractStore.js"
},
{
"path": "../extjs4/src/util/",
"name": "Grouper.js"
},
{
"path": "../extjs4/src/draw/",
"name": "CompositeSprite.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "AbstractFit.js"
},
{
"path": "../extjs4/src/",
"name": "ComponentLoader.js"
},
{
"path": "../extjs4/src/util/",
"name": "ComponentDragger.js"
},
{
"path": "../extjs4/src/window/",
"name": "Window.js"
},
{
"path": "../extjs4/src/data/",
"name": "Store.js"
},
{
"path": "../extjs4/src/data/",
"name": "ArrayStore.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Surface.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Component.js"
},
{
"path": "../extjs4/src/layout/container/",
"name": "Fit.js"
},
{
"path": "../extjs4/src/menu/",
"name": "CheckItem.js"
},
{
"path": "../extjs4/src/menu/",
"name": "Menu.js"
},
{
"path": "../extjs4/src/resizer/",
"name": "ResizeTracker.js"
},
{
"path": "../extjs4/src/data/reader/",
"name": "Array.js"
},
{
"path": "../extjs4/src/",
"name": "ShadowPool.js"
},
{
"path": "../extjs4/src/data/proxy/",
"name": "Client.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Matrix.js"
},
{
"path": "../extjs4/src/draw/",
"name": "SpriteDD.js"
},
{
"path": "../extjs4/src/",
"name": "Shadow.js"
},
{
"path": "../extjs4/src/data/proxy/",
"name": "Memory.js"
},
{
"path": "../extjs4/src/draw/",
"name": "Sprite.js"
},
{
"path": "../extjs4/src/draw/engine/",
"name": "Svg.js"
},
{
"path": "../extjs4/src/draw/engine/",
"name": "Vml.js"
},
{
"path": "PackageManager/view/",
"name": "PackageManager.js"
},
{
"path": "PackageManager/model/",
"name": "OppLineItem.js"
},
{
"path": "PackageManager/model/",
"name": "PackageComponent.js"
},
{
"path": "PackageManager/model/",
"name": "PackageBundle.js"
},
{
"path": "PackageManager/store/",
"name": "PackageComponent.js"
},
{
"path": "PackageManager/store/",
"name": "PackageBundle.js"
},
{
"path": "PackageManager/store/",
"name": "OppLineItem.js"
},
{
"path": "PackageManager/view/",
"name": "Viewport.js"
},
{
"path": "PackageManager/controller/",
"name": "MyController.js"
}
]
},
{
"name": "Application - Production",
"target": "app-all.js",
"compress": true,
"files": [
{
"path": "",
"name": "all-classes.js"
},
{
"path": "",
"name": "app.js"
}
]
}
],
"resources": []
}


I run



sencha build -p myApp.jsb3 -d .


And the all-classes.js and opp-all.js files are created. I make an index.html that looks like:



<!DOCTYPE html>

<!-- Auto Generated with Sencha Designer -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PackageManager</title>
<link rel="stylesheet" type="text/css" href="/poim/extjs4/resources/css/ext-all.css"/>
<script type="text/javascript" src="/poim/extjs4/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>


I then load the page and I can see it downloading the various files. I can see it go off to get the data from a Store, but nothing renders to the screen.

What am I missing? Do I need to create some sort of onLaunch function? I have tried the autoCreateViewport:true and it does not seem to work.

When I deploy things on a test server there are no issues.

Please help.

Thanks.

fadishami
25 Jun 2012, 9:58 PM
is there a way to invoke an MVC structured application from a visual force page??
I have been trying for a while but no success yet !! Please update if you have figured this out.

sandeesh123
15 Mar 2014, 1:27 AM
Just thought of adding this here. This is a cool article which tells us the best practices to follow when you use Extjs with Salesforce
http://extjswithsandeesh.blogspot.in/2012/07/extjs-with-salesforce-best-practices.html