ExtJS 5.0 - assistance with overrides - javascript

In an existing ExtJS 5.0 project, cannot change the original code. We are allowed to add code to an existing overrides/ directory.
I have an existing function generateTree in class Products.view.ProductsTreeViewController that I want to override.
The current function is in file PTVC.js under Useless/app/view/.
This is the code I'm using to override:
Ext.define('overrides.Products.view.ProductsTreeViewController', {
override :'Products.view.ProductsTreeViewController',
generateTree: function (data) {
if (this.isValid(data))
this.callOverridden(data);
else
this.callOverridden(this.getDefaultData());
}
};
First question, where should the code reside under overrides/? I've seen many different configurations suggested, e.g.
Everything in one file:
Useless/
overrides/
app.js
Same path as original file:
Useless/
overrides/
app/
view/
PTVC.js
Overridden class name:
Useless/
overrides/
Products/
view/
ProductsTreeViewController/
class.js
I've tried all of the above and many more approaches and confirmed through various means that the code does not get included!
So second question, how to make sure it is included?
The documentation makes it seem like it's so easy, which makes it all the more frustrating.
In the version I'm using there is no classpath variable in sencha.cfg, in any case I'd be changing an existing file, so likely can't do that, or add requires in Ext.application for the same reason.
So third question, in lieu of modifying existing files, is there a build command line switch I can use to specify an additional build directory?
I'm pulling my hair out trying to figure this out. Any advice, short of quitting my job, would be appreciated.

It's best to duplicate the directory structure, then you don't have to worry about file name collisions, but you can put the files anywhere under overrides/.
Are you running ExtJS 5.0.0? It has a regression bug whereby they forgot to include "overrides": "${app.dir}/overrides" in app.json. You can also modify a config file under .sencha but it's better to have it in app.json. You won't need requires. This is fixed in version 5.0.1.
Probably not, but it's a really small change to add that line in app.json and the only way to make overrides work in 5.0.0 (which I suspect you're using).

Related

How to exclude a subfolder of compiled resources from a Sonar analysis?

I am trying to integrate Sonarqube analysis into the JavaScript sources of my project. It is a project using Spring components for the back-end, and as a first step, we did the integration of Java sources, without problem at that point.
We are using Sonarqube v5.6.3
The problem I am finding comes with the sonar.exclusions property. Apparently, that property can't exclude a folder that has already been added as sources (see question and answer explaining that exact issue).
I have the following lines in my pom.xml, which are not working properly; and that's understandable according to the aforelinked question:
<sonar.sources>src/main/java,src/main/docker,js-sources</sonar.sources>
<sonar.tests>src/test</sonar.tests>
<sonar.exclusions>**/target/*</sonar.exclusions>
The problem is: the front-end is made of several modules which are compiled one by one under their own /target sub-folder before being deployed all together into src/main/webapp. (They work as regular target folders: when a new compilation is launched, those folders get deleted/recreated.)
Those js-sources/moduleA/target, js-sources/moduleB/target, js-sources/moduleC/target folders are being automatically included as sources, and thus ignored by the exclusions directive. Those target folder still contain a /src subfolder, which makes it hard to use the limited Sonar patterns (full xpath-like selectors are not allowed) to include or exclude only certain paths.
As I don't think that the Sonarqube team was expecting everyone to add each little subfolder one by one (that's why they made patterns in the first term), I am looking for help: How do I exclude those per-module target folders living down the folder-tree inside my sources?
Another possibility would be that it is kind of a bug forcing us to store this config at a Jenkinsfile or even directly in the Jenkins config (at a job level), but I remain unsure and still think that something can be fixed in the way I am declaring the sources and exclusions.
Try
<sonar.exclusions>**/target/**/*</sonar.exclusions>
EDIT : while inclusions are useful in other cases, the accepted answer above is the correct one. I'm leaving mine, which follows, for the record and just as an example of using inclusions.
Try using inclusions rather than exclusions, I've setup a project as close to yours as I could guess from your description and I was able to ignore the target folders of the js-sources modules :
<properties>
<sonar.sources>src/main/java,js-sources</sonar.sources>
<sonar.inclusions>**/*.java, **/src/**/*.js</sonar.inclusions>
</properties>
You can read this as : 'scan all java files no matter where they are, scan only the javascript files that are found within the src of a subfolder of root'

Is there any way to comment in or better organize a bower.json file?

I have a very large project with numerous bower dependencies. In many cases it is unclear whether these dependencies are even still in use within the application or if the version specified was chosen for a reason. Ideally, I would like to be able to put a comment for each dependency to state for which part of the application it is required, so as functionality in the application is removed, we can also remove unnecessary packages from the bower_components. Something like:
// videojs plug-in for adding navigable waveforms; used by the video component
"videojs-wavesurfer": "^1.2.2"
Unfortunately, json doesn't support commenting, but are there any possible solutions for annotating or better organizing a bower.json file to make it more understandable?
You cannot put comments in a JSON file. JSON is for data and nothing else.
If you would like to document your dependencies, consider adding a section to your README file that contains all of the information relevant to dependencies.
The classic approach to commenting JSON files is to add fake entries, which hopefully will be ignored by the consumer, such as:
"video-wavesurfer-comment":
"videojs plug-in for adding navigable waveforms; used by the video component"
For longer comments, use arrays:
"video-wavesurfer-comment": [
"videojs plug-in for adding navigable waveforms; used by the video component",
"Remove this for the non-video version."
]
Of course, you'll have to put these somewhere where someone won't try to parse them. For instance, they could not go WITHIN "dependencies":.

Create separate JavaScript bundles with a shared common library using Browserify and Gulp

For my team at work, I'm trying to set up a semi-automated JavaScript script and dependency management system with the help of Gulp and Browserify.
I'm not even sure if what I'm trying to achieve is possible with the currently available set of tools (and my limited JavaScript knowledge). I believe what I'm trying to achieve is a pretty common scenario, but I haven't been able to find the information I've been looking for.
Consider the following diagram:
The lines indicate depedencies. For shared modules, such as Module-v and Module-y, I don't want the scripts to be duplicated by being included in each of their respective bundles.
I know that using Browserify I can manually ignore or exclude modules, which is fine when the project is young - but as the project grows managing which dependencies need to be included where is going to become very cumbersome.
A similar Q&A here I think has the same essence of what I'm trying to ask, but to me, it isn't quite clear. It also references gulp-browserify which has since been blacklisted.
In my diagram, I can see that I have three Browserify entry points, but my lack of Gulp/Node/Browserify experience means I'm struggling to wrap my head around how I can try to achieve what I want to.
I'm happy to do the work to try and piece it together, as I already have been trying - however project managers are breathing down my neck so I'm having to hack together a temporary "solution" until I can implement something a little more automated and robust.
Thanks in advance.
Edit
It seems from Browserify's plugin documentation that this might be able to be achieved by using factor-bundle which substack pointed out to me; however again due to my lack of Node/Browserify/Gulp experience I am struggling to pull all the pieces together.
Related Questions
How can I use factor-bundle with browserify programmatically?
Figured it out, sharing the learns:
Code example:
var gulp = require('gulp'),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
factor = require('factor-bundle');
gulp.task('browserify', function(){
return browserify({
entries: ['blog.js', 'page.js']
})
.plugin(factor, {
// File output order must match entry order
o: ['bundle/blog.js', 'bundle/page.js']
})
.bundle({
debug: true
})
.pipe(source('common.js'))
.pipe(gulp.dest('bundle/'));
});
The key difference between this output and the diagram, is that the common.js file is automatically generated based on common depenedencies between blog.js and page.js. This is described in the factor-bundle documentation.
Notes:
I found that Node would throw an error if the output files didn't already exist. I'm unsure why as I would have assumed that factor-bundle would simply write a stream to the outputting file regardless of whether it was there or not. As a workaround, after 'cleaning' the output directory, I simply created 'placeholder' files to keep it happy.
I haven't figured out how to access the factor-bundle stream event when using it as a browserify plugin (it may not even be possible), so any further work on the output files (such as uglifying etc) would likely need to be done somewhere else in the pipeline, possibly with another browserify plugin, or even after the fact.

Extending an extension (SCP) in Magento causes JS errors?

I don't think this is an actual JS error, but the symptoms are JS related. I have a Magento 1.7.0.2 installation with SCP (Simple Configurable Products) which works 100% as I want/expect. In my early development I added some methods to 1 specific file in the SCP module, app/code/community/OrganicInternet/SimpleConfigurableProducts/Catalog/Model/Product/Type/Configurable.php.
With these methods inside of the SCP module everything works, however I realise now I really should have created an additional module in the local code pool that extends SCP and put my additional methods in there. So I created Bendart_Matrix. I cut the 3 methods out of SCP's Configurable.php and placed them in my own module, app/code/local/Bendart/Matrix/Catalog/Model/Product/Type/Configurable.php. Whilst the page still loads, there appear to be some JS errors which ultimately relate to the Product JS Object not being created correctly. It doesn't get created with the .Options method like it does when my methods are part of SCP.
I can't find a logical reason as to why this is, so I've created some gists of my module (Configurable.php, config.xml and Bendart_Matrix.xml) and the same files from SCP. Once again, if I disable or remove my module and switch the methods back to SCP files, it works. Weird?
SCP config.xml: https://gist.github.com/4327015
SCP Module Declaration XML: https://gist.github.com/4327012
SCP Configurable.php (minus the methods from my file: https://gist.github.com/4326996
My config.xml: https://gist.github.com/4326988
My Module Declaration XML: https://gist.github.com/4326986
My Configurable.php (just the methods in question): https://gist.github.com/4326909
Any help or advice is appreciated as I want to do it properly and remove my methods from the SCP module but there appears to be some dependencies I've missed or something?
Based on the information you posted, I think the most likely issue is going to be that you have made a change in your layout update that removes a template that is required. You seem to be extending the module correctly and a JS error in generally related to templates in this situation.
P.S. Slight heads up, came to our attention this morning that SCP doesn't function correctly if somebody adds a configurable product to their basket from the Wishlist page (it adds both the configurable and the simple, this may not matter to you, but with our customised exports and adminhtml updates this caused issues). If you have Wishlist enabled you should bare this in mind.
Ok, I've fixed one issue thanks to #Cags.
I noticed whilst turning template hints on that scpoptions.phtml wasn't being included in comparison to my live working version. I added the following lines (taken from simpleconfigurableproducts.xml)
<reference name="product.info.options">
<action method="setTemplate"><template>catalog/product/view/scpoptions.phtml</template></action>
</reference>
This fixed all the JS warnings about Product.Options and any other warnings I had. It also ensured that the product price was updated correctly once I started selecting custom options etc.
Now, one last issue, when I load the product page, before I select ANYTHING, the price shows as 0.00. As soon as I select a drop-down the price "kicks in" and it works from there on in, it just appears to be the initial page load. I've compared template files with my live site that works (but doesn't have my module) so again it's something to do with the inclusion of my module, but what?
Cheers.

Vim Javascript Autocompletion + Suggestions?

I'm developing on top of OpenLayers.js. My project folder is structured as follows:
project /
|-- OpenLayers.js
|-- map.html
|-- map.js
\-- etc
As you can argue, when I start a new map project, I espect suggestions from Vim on how to complete the code, reading JS classes from all the libraries in the project folder (in this case, just OpenLayers.js).
E.g.:
map = new OpenLayers. --> <C-x><C-o>
map = new OpenLayers.Bounds
.Control
.Map
Selecting one of the suggested classes I should get a kind of autocompletion, like in Aptana. I've installed AutoComplPop and I get a nice automatic menu to select suggestions, but all of them are taken from the current JS file.
Anyway, I've correctly set up Tagbar + node.js + jsctags and I've generated tags file for my project, and added set tags=./tags,./../tags,./*/tags to my .vimrc.
In this case, also, Tagbar maps the current file JS structure but doesn't offer any mapping of the classes coming from other files.
Another probably relevant line in my .vimrc:
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
I'm struggling to get class and subclass suggestions and now I'm getting a bit confused with all the plugins/piece of software available.
Any hint?
Thank you guys :)
Check out YouCompleteMe and tern_for_vim.
Here's an article about using them together.
Your expectations are a bit too high. Vim is not an IDE like Aptana and the mechanisms used to provide completion are crude.
Did you check that your tags file has OpenLayers.Bounds, OpenLayers.Control or OpenLayer.Map? I can't find OpenLayer.Map and, going through the OpenLayer.debug.js I can't find this function either.
TagBar only works with the current buffer. If you want to show tags for other windows/buffers you'll need another older plugin: TagList.
AutoComplPop doesn't support JS out of the box. How did you set it up? Here is how I did but it still uses <C-x><C-o> while completion from tags is done with <C-x><C-]>.

Categories