We Keep Coding

Vue-Router Duplicate Page

I'm in trouble with vue-router :) I create a simple map for router :
module.exports = {
'/': {
component: require('./views/home')
},
'/auth/login': {
component: require('./views/auth/login')
},
'/auth/register': {
component: require('./views/auth/register')
},
'/resumes': {
component: require('./views/resumes')
},
// 404 NotFound
'*': {
component: {
template: "not found"
}
}
};
And define router to vue and it works perfectly. My home page js codes :
module.exports = {
inherit: true,
template: require('./template.html'),
ready: function() {
if(this.isLoggedIn)
this.$route.router.go('/resumes');
}
};
I want to load resumes page if user logged in.
When I use it in any event or with v-link directive, it works normal.
But if I use it on ready function, it duplicates pages. It calls home page and appends second page on it.
IMG : http://imageshack.com/a/img540/9409/3DK1ZL.jpg
Whats wrong? How can I solve it? I am dealing about 4 days with this problem. Please help me guys.

this.$route.router.go('/resumes') has already been removed since Vue 2.0.

Any hacks to use wrapper js lib instead of Extjs 5.x by Sencha CMD 5.x?

In respect of Extjs 4.1.x I was able to use custom/wrapper library to manipulation model, store, view, controller as well as other utilities. So my demand is to replace boiler plate of code through my custom/wrapper library. Regarding the code as bellow:-
var Lib = Lib || {
$class : 'Lib',
$package : 'Default',
version : '1.0.00',
getName : function(){
return Lib.$class;
},
define : function(name, config){
return Ext.define(name, config);
}
};
is my custom library, right now I would like to replace the following code
Ext.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
as bellow the replacement/wrapper of Extjs code:
Lib.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
But here is the problem cause Sencha CMD 5.x build error where previous version of Sencha SDK, CMD support to use 3rd party library simply use it in index.html
<script id="extwrapper" type="text/javascript" src="Lib.js"></script
but latest Sencha CMD 5.x with Extjs 5.x occurred compilation error. Any way I would like to use custom/wrapper library instead of Extjs 5.x use directly. Do you have any hacks? While I tried by adding my customer/wrapper library in app.json as
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "${ext.dir}/Lib.js",
"bootstrap": true
},
{
"path": "app.js",
"bundle": true
}
],
still its appear Sencha CMD 5.x build error. Any kind of reference does not support on className even java script closure/inline function. for example
Ext.define((function(){ return 'Myapp.view.main.MainModel';})(), {
extend: 'Ext.app.ViewModel',
alias: alias,
data: {
name: 'Myapp'
}
});
on data it's support simple java script closure/inline function but no reference. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
even when I am going to use simple reference it does not work. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
var data = {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
};
return data;
})());
Build Failure for code as above I mentioned
Sencha Cmd v5.0.2.270
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[ERR] C2008: Requirement had no matching files (Myapp.view.main.MainModel) -- g:\j
s\extjs\myapp\app\view\main\Main.js:12:50
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Failed to find any files for g:\js\extjs\my
app\app\view\main\Main.js::ClassRequire::Myapp.view.main.MainModel
[ERR]
[ERR] Total time: 7 seconds
[ERR] The following error occurred while executing this line:
g:\js\extjs\myapp\.sencha\app\build-impl.xml:376: The following error occurred whi
le executing this line:
g:\js\extjs\myapp\.sencha\app\init-impl.xml:292: com.sencha.exceptions.ExBuild: Fa
iled to find any files for g:\js\extjs\myapp\app\view\main\Main.js::ClassRequire::
Myapp.view.main.MainModel
Where is the problem? There was no restriction with Extjs 4.1.3 with previous version Sencha SDK/CMD. but why they added such type of feature?
By Extjs-4.1.3 I was able to write and compile as the code as bellow
Ext.define(Lib.view.getAbsView('V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : Lib.app.getAlias('V01I001001X01'),
id : 'V01I001001X01'.toLowerCase(),
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});
Which one work as like as hard code as bellow
Ext.define('Myapp.view.m01001.m0i001.v01i001001.V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : 'widget.v01i001001x01'
id : 'v01i001001x01',
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});

Part of your problem is that Sencha Command does not just run JavaScript it also parses and compiles it in order to do a lot of "clever" stuff. This means that there are some restrictions on how your code should be formed. See:
http://www.sencha.com/forum/showthread.php?261509-Unsupported-Ext.define-syntax-%28function-does-not-return-object-literal%29
You have this code:
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
Which it seems CMD is parsing and seeing the second argument as something other than an object literal (which makes sense since it's not, it's a function). Obviously the following would work:
Ext.define( 'Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
I don't understand why you would ever want to use the first form, it seems to have no advantage over the standard method of doing it. Either way though, it looks like you would be better trying to work with Ext JS and CMD rather than hacking around this issue.

list isn't loading in panel in sencha touch

I am trying to load a List in a Panel but i am getting following error
Uncaught TypeError: Cannot call method 'substring' of undefined
here is my ProfileContainer.js which contains the List
Ext.define('demo.view.ProfileContainer', {
extend: 'Ext.Panel',
xtype: 'profilecontainer',
// requires: [ 'Ext.TitleBar', 'demo.view.ProfileList' ],
requires: [ 'Ext.TitleBar' ],
config: {
items: [{
xtype: 'titlebar',
title: 'demo',
cls: 'bms-bg'
}, {
xtype: 'profilelist'
}]
}
});
here is the code of ProfileList.js
Ext.define('demo.view.ProfileList', {
extend: 'Ext.dataview.List',
alias: 'widget.profilelist',
requires: ['demo.store.ProfileStore'],
config: {
store: 'ProfileStore',
itemTpl: '{name}',
}
});
here is my ProfileStore.js
Ext.define('demo.store.ProfileStore',{
extend:'Ext.data.Store',
config: {
model: 'demo.model.ProfileModel',
data:[
{ name: 'John Rambo' },
{ name: 'Brad Pitt'}
]
}
});
and ProfileModel.js
Ext.define('demo.model.ProfileModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' }
]
}
});
but my list isnt loading into panel and i am getting above mentioned error

xtypes are alias defined as widget
So you need to define them like:
alias:'widget.profilecontainer',
or
alias:'widget.profilelist',
Some information on require and uses:
You have dependencies between your classes which need to be resolved. This is normally done by the buildtool or if you don't run it by yourself.
Dependencies are one of the reasons why you use require or uses where require can be threated as strict because it ensure that the class is there as soon as it get required
And here comes a the difference: because this is not valid if you lazy load. At this time the required class will be available after the
class is defined. The build tool cleans this up places the required
classes before the class definition
while uses can be treated as lose because it only ensure that the class exist the time the Ext.onReady get called.
Normally this wan't give you headache but if the class definition requires that dependencies get resolved at definition time it will blow up when lacy loaded. If you now the dependency (xtype) that is causing this you can try to load it manually by using
Ext.require('class');
which need to get placed before the class definition.

Implementing Childbrowser in Sencha Touch using Phone Gap

I am currently deploying for Android OS in Sencha Touch 2.
I have included the path for "cordova-2.2.0.js" ,"ChildBrowser.js" in the app.json file
I am developing it in Windows PC with Chrome browser and deploying using Sencha tool and phonegap build to android device.
My sample code is
window.plugins.childBrowser.openExternal("http://www.google.com");
I get following error in my webkit browser.
Uncaught TypeError: Object # has no method 'exec'
And in my native app I am not getting any response.
Please Help ...i am Including my Main.js file
Thank you
Main.js file
Ext.define('Children.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
items: [
{
xtype: 'button',
text: 'Open Google',
handler: function(button) {
window.plugins.childBrowser.openExternal('http://www.google.com');
}
}
]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});

This is simply a very big big big question:
To do that you need several technical skills: javascript, sencha touch, java (for Android OS) and phonegap plugin
Are you able to write a phonegap plugin?
A short receipt to do that but I do not include the Java code, because I need more details from you:
in config.xml under res/xml put your plugin config (InfoP is a Java class):
add InfoPlugin.java in your src folder;
add infopl.js under assets/www; (infopl.js is the javascript wich call the Java plugin)
in index.html (for example) the plugin:
In the webapp you can call the plugin:
<script type="text/javascript">
document.addEventListener('deviceready', function() {
window.plugins.infoPl.getInfo(
function(info) {
alert(info);
//( you can see what you log on console with ADB console log)
console.log('MYINFO: '+info);
}, function() {
console.log("fail");
}
);
}, false );
</script>
In Sencha use (better if you use a controller with MVC capabilities of sencha touch):
listeners: {
tap:
function() {
alert('something');
}
instead of:
handler: function(button) {
alert('something');
}
You suggest you to check:
http://docs.phonegap.com/en/2.6.0/guide_plugin-development_index.md.html#Plugin%20Development%20Guide
http://docs.sencha.com/touch/2.2.0/#!/video/mvc-part-1

Sencha touch 2 native build not loading

After generating the default app with:
sencha generate app Sencha ../Sencha
I decided to test the app on the iOS simulator
cd ../Sencha/
sencha app build native
It loads the app but gets stuck on the loading icon:
Below is the code for the main application (App.js):
Ext.application({
name: 'Sencha',
requires: [
'Ext.MessageBox'
],
views: ['Main'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('Sencha.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Below is the code for the main view (Main.js):
Ext.define("Sencha.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
}
});

Change the "logger": "no" to "logger": "false" in app.json. When you're done it should look like this:
"buildOptions": {
"product": "touch",
"minVersion": 3,
"debug": false,
"logger": "false"
},
Then rebuild again with sencha app build native. You can reproduce the same error in the browser with sencha app build production then point your browser to http://localhost/path/to/myapp/build/production. If you do, you'll have to clear your browser cache before it'll work (on chrome: wrench->tools-developer tools->local storage->hostname->X (for delete).

The build process creates the minified version during the build process. Start it in the browser and check what the error console says.

so this is really late, but it looks like you haven't marked your question as answered, and I've just spent a couple of hours trying to figure this out, and it turns out that all of this is because of discrepancies between the Sencha Docs, the Sencha SDK Tools for downloading, and the actual Sencha SDK.
Hopefully this will help someone -
A basic app needs to be started with Sencha Command 3.0.0 (not the SDK Tools, which worked for Sencha 2.0) if you're SDK is version 2.1.0 or above. If you get the Sencha Command bit working properly (installing it didn't put it in the PATH for me, so I had to manually add it) everything works like a charm.
http://docs.sencha.com/touch/2-1/#!/guide/command
Hope that helps some stragglers!