I'm trying to get a basic custom property editor sorted out for an Umbraco 7.0.1 solution but it looks like I've missed something somewhere because Angular can't recognise the controller function being called. I need another pair of eyes over this.
I've pretty much copied and pasted the example provided on Umbraco's site to start with and was intending to flesh it out afterwards. Here's what I have so far:
package.manifest
{
//you can define multiple editors
propertyEditors: [
{
/*this must be a unique alias*/
alias: "AcuIT.Multidate",
/*the name*/
name: "Multidate Picker",
/*the html file we will load for the editor*/
editor: {
view: "~/App_Plugins/Multidate/multidate.html"
}
}
]
,
//array of files we want to inject into the application on app_start
javascript: [
'~/App_Plugins/Multidate/multidate.controller.js'
]
}
multidate.html
<div ng-controller="AcuIT.MultidateController">
<textarea ng-model="model.value"></textarea>
</div>
multidate.controller.js
angular.module("umbraco")
.controller("AcuIT.MultidateController",
function () {
alert("The controller has landed");
});
Finally, here is the error I'm seeing in the browser console:
Error: Argument 'AcuIT.MultidateController' is not a function, got
undefined
at Error ()
It's probably a name or a path I've missed somewhere but I can't spot it yet. Any pointers appreciated.
Restart app pool and refresh browser to include the files from the manifest
Related
I'm trying to create a search form view based on the following example of Sencha :
http://try.sencha.com/touch/2.0.0/examples/list-search/viewer.html
I made a few changes just not to create the view by code but export it in a view.
To set up the store, i use this in the config :
store: Preconisations.app.getStoreAdherents(),
where Preconisations is my project name and getStoreAdherents the function set in the app.js:
getStoreAdherents: function () {
if (!this.storeAdherents) {
var gestionAdherent = new DAL_Adherent(); // custom classes
var tc = gestionAdherent.GetAll(); // and functions which returns a json string with data
this.storeAdherents = Ext.create('Ext.data.Store', {
model: "Preconisations.model.ADHERENT",
data: tc,
sorters: 'nom',
groupField: 'code'
});
}
return this.storeAdherents;
}
Now, everything works fine but when i make the testing or the production build, i've got this error :
Uncaught TypeError: Cannot call method 'getStoreAdherents' of undefined
at the store definition...
Maybe, there's a better way to set up the store by code but i can't understand why it's working in developpement and not with the production or testing build...
Is anyone had this problem ? Or how do you set up dynamically a store with a function ?
Thanks... I'm banging my head on the wall on this one...
It is clear that you have a build dependency issue in Ext Build. In the code snippet posted, there is a chance that you missed to add "Preconisations.model.ADHERENT" to a class path. If so, please add the following to your app.js
requires: ["Preconisations.model.ADHERENT"]
If the issue persist, Please do the following diagnostics :
Run your app (development mode) in Google Chrome with the Console open; Look for warnings that states a particular class is being synchronously loaded and add requires statement for those classes.
In fact i think there's a bug in setting a store dynamically in the config.
I found this workaround which work in developpement and in build production :
I don't specify a store : xxxx in the view.
Instead, in a controller i put this code in the launch function :
this.getMainView().setStore(this.getStoreAdherents());
where getMainView is a reference to my view.
That's all !
I have question about the best way to implement correctly my code.
I have this in app.js
/*** EXT LOADER ENABLE & PATH ***/
Ext.Loader.setConfig(
{
enabled : true,
application : 'MyApp'
});
Ext.log('--- APPLICATION --- Loading Elasticsearch configuration');
Ext.define('MyApp.configuration.elastic',
{
singleton : true,
...
loadElasticConfiguration: function()
{
// ExtDirect or ajax call in order to set configuration
}
});
MyApp.configuration.elastic.loadElasticConfiguration();
Ext.onReady(function()
{});
Ext.create('MyApp.Application');
This is working well but I do not like to have lots of code is app.js.
Is there a way to "export" the "MyApp.configuration.elastic" code to a specific file and call it. I have tried via Ext.require but others files which needs this config are loaded before ...
If anyone has a clue.
Have a good day !
If you want to use Ext.require you will need to create your application within the Ext.onReady listener:
Ext.require('MyApp.configuration.elastic');
Ext.onReady(function(){
Ext.create('MyApp.Application');
});
Alternatively, this should also work as it will make your application's main class require the config class:
Ext.define('MyApp.Application', {
requires: ['MyApp.configuration.elastic'],
// ...
});
I'm struggling to get DeftJs working with Sencha Cmd. At first I suspected Cmd 4, but I've also tried with Cmd 3 with exactly the same result, so I reckon I'm just missing something.
I'm getting the error "Cannot set property 'instance' of undefined" when Ext.onReady() is being called. Ext.app.Application is not being defined when it should be:
Ext.onReady(function() {
// this won't be called until App has been created and its requires have been met...
Ext.app.Application.instance = new App(); // Ext.app.Application is undefined.
});
I am following the instructions for Using Sencha Cmd (with DeftJs 0.9+ only) at https://github.com/deftjs/DeftJS/wiki/Adding-Deft-JS-to-Your-Application#using-sencha-cmd-with-deft-js-09-only
Would be very grateful for any clues as to what's going wrong.
In your Application.js file (found in the app folder of your project) make sure you include Ext.app.Application in your requires.
Ext.define("Phoenix.Application", {
extend: "Deft.mvc.Application",
requires: [
"Deft.mixin.Controllable",
"Deft.mixin.Injectable",
// other required files,
"Ext.app.Application" // <=========== HERE'S THE MISSING PIECE
],
init: function() {
this.beforeInit();
Deft.Injector.configure(this.buildInjectorConfiguration());
//Deft.promise.Deferred.enableLogging = false;
return this.afterInit();
},
// other startup code
});
I'm using the Sencha Command Line 3 tools with a newly generated Sencha Touch 2 application.
Assuming my app.js file looks like this:
Ext.application({
name: "CA",
event_code: "test123",
launch: function() {
console.log("application launched!");
}
});
My views and object stores depend on generating a URL based on CA.app.event_code equaling "test123";
During development in the browser, everything works fine, CA.app returns the variables I need.
When I compile my application with sencha app build and try to run the minified version in the browser, I get an error like this:
Error evaluating http://localhost:8888/app.js with message: TypeError: Cannot read property 'event_code' of undefined localhost:11
I'm not entirely sure why this is happening or how I can fix it. I am open to any and all ideas or suggestions, any pointers in the right direction will be greatly appreciated.
Ran into the exact same issue. You have no access to the namespaced app within the views... really sucks that they let you in development and not when built. Anyway, I got around it by adding a static helper class and using that all over my app:
In /app/util/Helper.js:
Ext.define('MyApp.util.Helper', {
singleton: true,
alternateClassName: 'Helper',
config: {
foo: "bar",
bat: "baz"
},
staticFunction: function() {
// whatever you need to do...
}
});
Then in your view or controller:
Ext.define('MyApp.view.SomeView', {
...
requires: ['Events.util.Helper'],
...
someViewFunction: function() {
var someValue = Helper.staticFunction();
// and you can use Helper.foo or Helper.bat in here
}
});
For reference, here's some documentation on Sencha Singletons. And one important note: make sure that your Helper singleton is in it's own file! If it's small, you may be inclined to put it at the bottom of your app.js, and things will work at first, and the build process will work, but the code will not. Don't worry, the build process puts all of your JS code in one big, compressed file anyway.
I need to use dynamically JSON with data.TreeStore.
With this component, there is proxy "config", it need a path to JSON file.
My problem is, i can't write Json file in my application.
I would know, if i can generated JSON dynamically and pass it to url config into proxy?
For example :
Var trStore = Ext.create('Ext.Data.TreeStore',{
... // config
proxy {
type : 'ajax',
url : { id : 'id0', task :'task0', value : 'val0', ..... }
}
});
My URL is not a file url but is JSON generated with my own method !
How to build JSON for use it with TreeStore and without make file !?
I hope you understand my problem :)
Thanks a lot to help !
Your example looks like you want to pass static "inline data" to the TreeStore.
As far as I can see this is not possible with a bare TreeStore, since it does not have a data config option as the "normal" Store has. However, it is possible with a Treepanel.
You can pass your inline data to the TreeStore using the root config option of the Treepanel (not the TreeStore). It works in a very similar manner as the data config option of a "normal" Store:
Ext.create('Ext.tree.Panel', {
root: { id : 'id0', task :'task0', value : 'val0', children: [...], ... }
// ...
});
There are two caveats related to this:
The beta3 docs say root is boolean, that's wrong.
Because of a bug in beta3 you cannot use this together with rootVisible: false.
Remember that a "json file" is really just a text string, so you can generate that with PHP or your preferred server software.
For the url in the proxy, simply put in the url you use to run that function. Eg in my web app I have http://example.org/controller/getTree?output=json
This runs the getTree() function on my controller, and the function knows to return json.