ExtJS 4 Problem with MVC concept - javascript

i'm trying to use the new MVC concept and therefore started witht the AccountManager Example (examples/simple). Everything works fine as far as I stick to the tutorial, but I tried to extend it a bit.
I define a border layout in 'Viewport.js' and assign a header component (views/Header.js) to 'north'
and a tab-Panel (views/MainPanel.js) which contains the 'views/user/List.js' as a tab.
Until now everything is ok.
But now i added another store (Profiles.js) and model (Profile.js),
changed the references in code to use profile-store instead of user-store.
I also updated the column-definition, imports ('requires') and everything es that is relevant(at least i think so...).
When i run my app i get a js-error in Observable.js -> addManagedListener-> 'item is undefined' when he tries to invoce the on-method of 'item'.
At first i tried hard to find the mistake i made in the code but I could not find anything,
so i started to play around a little bit and found out,
that it works as soon as I rename the folder 'user' in views/ to 'profile' (of course i had to fix some references in code too).
Is this behavior a bug or is it volitional?
If so can anybody please tell me how this is exactly working?
Thank you very much!

ExtJS looks for the Javascript files based on your model/view/controller declarations.
i.e. if in your tell your controller that you have a store called Profile (via the stores attribute) by default, it is going to look for a file at app_name/stores/Profile.js

The problem was that i had to give my controller a reference to the store and the model.
I didn't do that from the beginning, after my controller had a reference to the view, the view had a reference to the store and the store had a reference to the model.
So I assumed everything is ok.
But it seems to be mandatory to provide this information redundant as far as understand and i can live with that...

Related

How to start building a Custom Component in Formio.js? Where are docs?

I am trying to get a custom component working in Formio.js. I would love a complete, nontrivial working example.
I am not using angular, ng, react or the form.io service.
The documentation is terrible. I can copy out the Checkmatrix example code and run it (after much fiddling) but even it doesn't work correctly: in the formbuilder, the edit and delete controls don't show up. (There an bug issue open on this, but no resolution, which is distinctly worrisome.)
There are dead links all over the SDK reference documentation.. like for example for "Component" which seems particularly important.
There is no documentation of any of code used by the example. For example, it uses the 'renderTemplate' call, but the arguments are not described anywhere.
It appears that the only way to understand any part of this system to try to figure out all of the source code. There are no instructions for adding code.
It's not even clear what the best way to proceed is: whether I should fork the formio.js repo, learn TypeScript, and add components directly (creating a hassle if I ever want to keep formio.js up to date) or continue trying to work by registering components from add-on scripts in the browser.
** Can anyone give concrete advice on the best way to go? **
#nathaniel Tagg I couldn't find form.io proper form examples, so i would like to see your form.io examples if you are like to provide. Here is my email 'udara#staff.medicalwizard.com.au'

Accessing javascript variables inside partial in handlebars.js / express-handlebars

First of all, sorry to ask a question that has been asked in similar ways before. I just can;t get any of the solutions to work for me.
I am using handlebars.js with the express-handlebars library in node.js. I have both server and client rendering set up correctly and can render partials with data passed in through routers with no problem.
However I am struggling to access the page context and render javascript data declared in a script in the page.
Page snippet:
<script type="application/javascript">var hash = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'}</script>
<div id="thisdiv">
{{> blag this.hash}}
</div>
Partial 'blag':
<div class="blag-partial">
{{this.var1}}
{{this.var1}}
</div>
I cannot get the value var1 in my hash variable to render.
If i pass a hard coded string to the partial then it works with no problem, but I can never seem to access what i would call 'page context'.
What am I doing wrong that I can never seem to get this to work?
I have tried...
Passing 'this' as the context into the partial
Using the '../variablename' syntax to pass it into the partial
Send key value pairs into the partial
Accessing variable from context using the # symbol in both the partial call and inside the partial itself
...and many other combinations of these things. With 100% failed attempts except when I pass in a hard-coded string.
Any help would be really appreciated. I feel like this should be simple.
OK, so to resolve this problem I needed to change the JavaScript to actually grad a reference to the div i wanted the output in and inject then call the template with the data I wanted passed as an argument to the template
var hash1 = {
var1:'this is the data I want to render',
var2: 'this is some more data i want to render'};
document.querySelector('#thisdiv').innerHTML = blagTemplate(hash1);
And I changed my partial definition to :
<div class="blag-partial">
{{#with this}}
{{var1}}
{{var2}}
{{/with}}
</div>
My second mistake was that I thought I could inline this script inside a script tag in the page but it doesn't work at all.
I think my biggest mistake was in thinking that the 'express-handlebars' npm module was actually doing more for me than it actualy is doing.
In reality...it automatically compiles my templates and partials in any of the directories I specify and that's about it.
So when I look at tutorials like like https://www.youtube.com/watch?v=4HuAnM6b2d8 for example, I still need to do the same process really...I can just skip the compilation process because thetemplates / partials were already compiled in my express node server.
Now I realize this it's ok, I just misunderstood what I should expect.
If anybody has any knowledge to the contrary, please feel free to share.
I hope this can help at least 1 person, because it frustrated me for hours! :)

I'm trying to get form validations to work with an Angular Wizard

I am using an angular wizard for my app's registration process.
Angular Wizard -
https://github.com/mgonto/angular-wizard
However, no matter what I try, each step of the wizard is not allowing for form validation (which basically comes out of the box with angular and the use of forms with the FormController and the $error object.
I have posted on the project's issues page regarding form validation, but I have not heard from the owner of the project or from any other users with examples of working code, so I'm hoping some more advanced users here can help.
Oh and to help isolate the problem, I have only included the html for the first step in my jsfiddles.
Validation Issue - https://github.com/mgonto/angular-wizard/issues/41
The validation issue page links to my jsfiddles and other efforts.
Is this a scoping problem???? If so, how do I get around it? Currently when I click the Next button, it just progresses through the wizard, and when I try to send the $error object to the console, all I get is "undefined".
Angular docs (form properties and reference to $error) - https://docs.angularjs.org/api/ng/type/form.FormController
It's definitely a scoping problem. I was able to get things to work by reaching into the scope of a child element (in the controller) and by defining the variables in the view (html) as being part of the $parent element. This means that all of the variables are set in HTML as
ng-model="$parent.variableName";
Changing this variable's value from the controller requires a call as follows:
$scope.$$childTail.variableName = 'something that you want to change the value to';
But reaching into $$childTail is a no-no. This whole project needs to be reworked to fix the scoping problem if you ask me. And there needs to be documentation on how to access validation variables if the revised project uses anything outside of typical angular data binding.
My solution code is attached in gists, below.
Controller Setup
https://gist.github.com/Shawful/a4f8ff5097eabc5306f4
HTML Setup
https://gist.github.com/Shawful/f8dc97d6fd88bbb111f9
I think part of your problem is the lack of dotted notation on your ng-models. In general you want ng-model="container.piece". There are numerous articles on the problem of writing to a child scope if your models do not contain a dot in them. Have a look at Understanding scopes.

SugarCRM: Putting a image data type in 'Cases' module

I use SugarCRM CE. I'm trying to create an image data type on the Cases module. The purpose of this is so that the employees of my company can attach images that can better explain the cases that they submit. However, I seem to have a hard time implementing this.
I tried to follow the guide at: https://www.atcoresystems.com/blog/adding-a-photo-to-a-contact-record
This apparently does not work for me as when I navigate to the detail view and the edit view of the record, it displays a mess of code instead of the expected output.
On my own, I also tried creating a custom field trying to emulate the 'file' data type of the "Documents" module and using a javascript to display it on the Detail View but no luck at all.
I am able to display something similar to the browse file on the "Documents" Edit View but as soon as I save it, it doesn't show.
Also to include in my worries, even after I successfully use it to accept files and display them, how do I filter them to accept only image files?
Please help!!!
Finally solved this question last Friday and I thought I'd share what worked for me. I revisited https://www.atcoresystems.com/blog/adding-a-photo-to-a-contact-record and decided to give it another shot. However, on Section 4.2, I changed this:
elseif($_FILES[$this->field_name]['size']
to this:
elseif($_FILES[$field_name]['size']
I cleared the cache but mostly what really grounded me was that even after doing so, I still got the same results. So to solve this, I modified my search query and picked other random records to edit. Problem solved!

second level ember route not rendering

I've been having a good deal of trouble recently trying to get sub templates to render in Ember. The jsbin below doesn't work because I'm trying to use the REST adapter and just can't figure it out how to get mockjax and ember working together -- anyway, I think the REST adapter critical to the problem, as I will explain.
So I have a contact item. I can see ember calling my /api/contacts route to grab the model for all the contacts for listing. After this, I'm trying to create a link to an individual contact and have that render within the same template. In other words, I would still see the list of contacts, but I also see information on the individual contact that I just clicked on. That individual contact contains many contactPoints. Basically, what's happening is that I never see ember looking for the contactPoints. I see the "contact" template render, but it never has any contactPoints.
If this unclear, I can clarify. But the link below should help. Thanks!
http://emberjs.jsbin.com/xacuyalu/6/edit
I've simplified a bit your JsBin to highlight the solution
http://emberjs.jsbin.com/xacuyalu/7
With what you are trying to achieve, there's no need to name outlets.
The main problem in your code is the way you use variables inside loops and templates.
In your contacts template, you write
{{#each contact}}
But then forget to use contact as a variable when passing values
The same way, in your contact template, you use contactItem that doesn't exist. You can simply use the attribute of your model here.
The problem with mockajax was the url you were mocking /api/contacts instead of /contacts. This works in my modified JsBin.
Also please note that your payload won't work with contactPoints
EDIT: I've updated the JsBin to display the contact points.
http://emberjs.jsbin.com/xacuyalu/9
First thing, I would recommend you to read this https://github.com/emberjs/data/blob/master/TRANSITION.md. It will show you how to prepare your data to work nicely with Ember Data.
I have extracted your payload to be more readable. Here are the things that I've done:
Sideload contact points
Change the name of the attribute in the json from contactPointsIds
to contactPoints
add the address attribute on the ContactPoint model
Rename the attribute on the Contact model from contactPoint to
contactPoints

Categories

Resources