Sencha EXT JS making Ext.ux.panel.PDF to work - pdf

I have planned to use the Ext.ux.panel.PDF extension https://github.com/SunboX/ext_ux_pdf_panel for my app but cannot make it to work inside my Sencha Architect 3.0.
I have downloaded the files and put the js file in my project directory /ext/src/ux/panel/PDF.js. In the apllication I have put the require line on the top level under Application
Ext.application({
requires: [
'Ext.window.MessageBox',
'Ext.ux.panel.PDF'
], ...
But when I want to instantiate the pdf panel with the code from the example I keep getting this error:
Uncaught Error: The following classes are not declared even if their files have been loaded: 'Ext.ux.panel.PDF'. Please check the source code of their corresponding files for possible typos: 'ext/src/ux/panel/PDF.js
Please advise.
EDIT: I have tried using a loader but the error is still present
Ext.Loader.setConfig({
enabled: true,
paths: {
Ext: 'ext/src'
}
});

The error you get means, that the file ext/src/ux/panel/PDF.js does not contain valid javascript. I tested this extension, and I don't get that error.
It the file is empty, you will get this error only, if it contains invalid javascript, this should be the second error, while the first will complain about the syntax error.
If the file is missing, you'll get another error.
Have a close look at the file, maybe it got corrupted while downloading or unzipping the extension. Or you edited it by error and introduced an error.

try to add below code on top of your Ext.application({ ~~~ source
Ext.Loader.setPath({
'Ext.ux' : 'YOURPATH(ABSOLUTE OR RELATIVE)/ext/src/ux'
});

Related

Linting Nested Comment Erorr Vue VS Code

Developing a vue application with the eslint-plugin-vue, I am getting the following error when trying to use the comment shortcut in VS code over a template section that contains a nested comment:
Parsing error: nested-comment. eslint-plugin-vue
Is there a setting in the linter config file that I can change to allow commenting over nested comments or do I need to restart the linter somehow?
Update: it would appear if I added the following line to my .eslintrc.js file, from this site https://eslint.vuejs.org/rules/no-parsing-error.html#vue-no-parsing-error I should not be seeing this error:
'vue/no-parsing-error': ["error", {
'nested-comment': false
}]
However, it still remains. I do not have the option to run ESLint restart lint server in my command palette.
If you do have a .eslintrc.cjs file or anything alike, you could probably put that in there
/* eslint-env node */
module.exports = {
[...],
rules: {
'vue/html-comment-indent': 'off',
},
}
off is to say that you don't even want to hear about it anytime soon.
Otherwise, you can also use 'warn', if you want a warning.
Here is an official reference: https://eslint.vuejs.org/rules/html-comment-indent.html#vue-html-comment-indent

vue-google-charts error n.load is not a function

I'm using the vue-google-charts package (https://www.npmjs.com/package/vue-google-charts) to display google charts in my application (vuejs2.x) and until now it worked perfectly fine.
But now i get the following error:
Uncaught (in promise) TypeError: n.load is not a function
at vue-google-charts.common.js:1
at new Promise (<anonymous>)
at vue-google-charts.common.js:1
and in my code the following messages shows up:
I read in several articles that i can create a file vendor.d.ts and put the following inside:
declare module 'vue-google-charts';
I created this file and placed it in the "src" folder but it still doesn't work. The problem is, that when I test it locally the application works perfect, all graphs are displayed etc. but as soon as I deploy the application to firebase the graphs don't work anymore.
I also read that the problem can be solved by put the following setting in the tsconfig.json file:
"noImplicitAny": false
But I don't have a tsconfig.json file I only have package.json and vue.config.js. so don't know where to put this setting.
Thanks for your help
I couldn't find any answer to this problem but I figured out that this problem only exists in the index.vue page. If I use another page the problem vanishes.
So i created a second page with the graph inside and redirected the index-site to the second page with the graphs.
I know it doesn't answer the problem but it is a workaround I can live with.

Creating multi-page application with Vue CLI3.0, how to handle this error?

I am a beginner of Vue and I am trying to build a multi-page web application with Vue for practice. But I am having this problem below:
Failed to compile.
./src/index/views/Home.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/index/views/Home.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '#/components/HelloWorld.vue' in '/home/Username/Web/wk_front_end/src/index/views'
Here is the file tree of my project, every file is generated by Vue because I only want to test the multi-page, so I think it wouldn't be a coding problem.
Here is what I did:
I created a folder called the index under the src folder, I then move all the files and folders that originally under src to index because I wish the components and assets are only used in the corresponding page.
My vue.config.js is:
module.exports = {
pages: {
index: {
entry: "src/index/main.js",
template: "src/index/index.html",
filename: "index.html",
title: "Index Page"
},
}
}
When I try to run it, I got the error above on the chrome window. And actually, the error is:
I think it might be caused by missing of configurations, but I really cannot figure out what those other configurations I need.
Does anyone have similar problem before? Does anyone know how to solve it? Or, does anyone have some successful multi-page example that I could take a look?
Really thanks for the help.
I believe # is a shortcut for the src folder. Which would mean your current path resolves to src/components/HelloWorld.vue.
You could try doing #/index/components/HelloWorld.vue, which should be the correct path.
From my sight you may be importing your Vue components incorrectly. If you want to make multi-page-app why don't you try vue-router ? Maybe it's not the direct solution for your problem but it will help you to better manage your pages (routes) in the future.

Can't get es6 to work with Gulp

This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.
I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with
{
"presets": ["es2015"]
}
I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.
I thought the es2015 npm packages I have should be taking care of that ES6 syntax?
In the gulp file the task that I thought was suppose to take care of that is;
// convert jsx to JS
gulp.task('babelFiles', function() {
return gulp.src('js/*.(jsx|js)')
.pipe(babel({
compact: false
}))
.pipe(gulp.dest('js'))
.pipe(browserSync.reload({
stream: true
}))
});
The gulp task that is responsible for launching this is:
// Default task
gulp.task('default', ['babelFiles', 'browserSync']);
I am puzzled as to what could be wrong here?
Any ideas would be much much appreciated!
There are two problems:
Gulp seems like doesn't support you syntax for file extension mask:
gulp.src('js/*.(jsx|js)') // not working
gulp.src('js/*.{js,jsx}') // working
You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working
Update
Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid
gulp.src('js/*.#(js|jsx)')
where # means match exactly one occurrence of pattern after #.
In your case there was no qualifier presented

Ploblem including a file- Titanium

I get an error while i try to include the js file which is in the same folder. I tried cleaning my project but was of no use.
The console says "error loading path".
Please help.
var db={}
Titanium.include('windows/gallery');
var displayButton= Ti.UI.createButton({
title:'Display',
onClick:function(){
db.gallery.open();
}
});
I have used open function which opens the file. The open file works has no problem.
usually, we use require('files/myFile'), where :
Resources/files/myFile.js is the path (note that require doesn't use the .js)
The js file is NOT at the same level that app.js, but included in Resource folder.
So here, you should do
Titanium.require('windows/gallery');
instead of
Titanium.include('windows/gallery');
By the way, the previous method was Titanium.include('windows/gallery.js');
Note the .js at the end of the include version.
Is it a mobile or desktop version ?