I am new to extJS and met a serious problem described as follows:
I used the Sencha Architect to build my client-side UI. After finishing it, I copy the generated app folder and app.js to my asp.net mvc project(located in ROOT/Scripts/app and ROOT/Scripts/app.js), and I also copy some dependencies(exr-all.js .etc) from the SDK directory to ROOT/Scripts/extjs.I was using Ext.Loader.setPath() method in my ROOT/Scripts/app.js file to indicate the mapping from specific class name to the specific location, but It does not work.
In my asp.net mvc project, I have a controller class and the Index action method just return a View(ROOT/Views/RepairList/Index.cshtml) whose code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>RepairList</title>
<script type="text/javascript" src="../../Scripts/extjs/ext-all.js"></script>
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="../../Scripts/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../../Scripts/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../Scripts/app.js">
</script>
</head>
<body>
</body>
</html>
In my ROOT/Scripts/app.js, the code is as follows:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('repairList', '../../Scripts/app');
Ext.application({
name:'RepairList',
requires: [
'Ext.Loader'
],
models: [
'LineChart',
'RadarChart'
],
stores: [
'MenuStore',
'LineChart',
'RadarChart'
],
views: [
'MainEntry',
'chartPanel'
],
controllers: [
'management',
'forms',
'Info',
'content'
],
name: 'repairList',
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});
I dont know why the setPath does not work. I think it is because the view file is in ROOT/Views/RepairList/Index.cshtml, while the app.js and the app directory is in ROOT/Scripts/app. Moreover, the name of my class generated in the sencha architect is repairlist.model.foo while now they were placed under Scripts folder instead of a directory named repairlist.
//the file is in the original repairlist/app/view/MainEntry.js file when creating in the sencha architect while now I copy it in the ROOT/Scripts/app/view/MainEntry.js
Ext.define('repairList.view.MainEntry', {
extend: 'Ext.container.Viewport',
alias: 'widget.fillerentry',
requires: [
'repairList.view.headerPanel',
'repairList.view.treeMenu',
'repairList.view.contentPanel',
'Ext.tree.Panel',
'Ext.tab.Panel'
],
margin: 0,
layout: {
type: 'border',
padding: 0
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'repairheader',
region: 'north'
},
{
xtype: 'repairtree',
region: 'west'
},
{
xtype: 'repaircontent',
region: 'center'
}
]
});
me.callParent(arguments);
}
});
![enter image description here][1]

the error message is as follows
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:27845/app/view/MainEntry.js?_dc=1434385119180 ......
![enter image description here][2]
could anyone tell me why this does not work? Thanks very much
Two things:
1 - You have set the name config in your application twice.
2 - When using Ext.application set your paths in the paths config.
Ext.application({
name: 'repairList',
paths : {
'repairList' : '../../Scripts/app'
},
//...
launch: function() {
Ext.create('repairList.view.MainEntry');
}
});
Related
Curious. Is Framework7 really adapted to function with Cordova on a local server? If I run the kitchen sink from npm core, I'm able to navigate through pages and open links. When I create projects with framework7-cli and run cordova run browser, I am unable to trigger opened any page or linked. Is this caused by Webview? Any solution? I've looked into page events but nothing happens and no error in the console.
app.js (with routes)
function initFramework7(){
var $$ = Dom7;
var device = Framework7.getDevice();
var app = new Framework7({
name: 'My App', // App name
theme: 'auto', // Automatic theme detection
el: '#app', // App root element
id: 'io.framework7.ragg', // App bundle ID
// App store
store: store,
//view
view : {
stackPages: true
},
// App routes
routes: [
{
path: '/',
componentUrl: './pages/home.html',
name: 'home',
master(f7) {
return f7.theme === 'aurora';
},
},
{
path: '/about/',
url: './pages/about.html',
name: 'about',
},
{
path: '/messages/',
url: './pages/messages.html',
name: 'messages',
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
],
popup: {
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
// Input settings
input: {
scrollIntoViewOnFocus: device.cordova && !device.electron,
scrollIntoViewCentered: device.cordova && !device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
// Init cordova APIs (see cordova-app.js)
cordovaApp.init(f7);
}
},
},
});
}
this wont event work (app.main.router returns undefined)
$$('.p').on('click', function(){
app.views.main.router.navigate('/messages/', {reloadCurrent: true});
});
index.html
<body>
<div id="app">
<div class="view">
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page">
<!-- Scrollable page content -->
<div class="page-content">
preview page content
<a class="p" href="/messages/">messages</a>
</div>
</div>
</div>
</div>
</body>
<!-- Framework7 library -->
<script src="framework7/framework7-bundle.min.js"></script>
<!-- Cordova APIs -->
<script src="js/cordova-app.js"></script>
<script src="cordova.js"></script>
<!--custom app-->
<script src="js/app.js"></script>
pages/messages.html
<div class="view">
<div data-name="messages" class="page">
...Im the messages page
</div>
</div>
I was trying using SystemJS to load React but it didn't loaded instead throwing an error message in Console > 'React is not defined'
I've read their documentation also searching through similar questions but doesn't satisfy my need, did i miss something?
Here's is what I was tried
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React 18 with SystemJS</title>
<script src="dependencies/systemjs-6.12.1.min.js"></script>
<script type="systemjs-importmap"> {
"imports": {
"react" : "/react.production-18.min.js"
, "reactDOM" : "/react-dom.production-18.min.js"
} }
</script>
</head><body>
<div id="root">
<script type="systemjs-module">
System.import('react');
System.import('reactDOM');
class Hello extends React.Component {
render() {
return React.createElement('div', null, `Hello ${this.props.toWhat}`);
} }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>
</div></body></html>
Edit1: I'm using SystemJS version 6.12.1
You need a bit more configuration to get it going. It is also recommended to keep react code in separate files.
Full working example here.
SystemJS configuration for react:
System.config({
baseURL: '//npm.jspm.io/',
// CDN resolves
paths: {
'npm:*': '//npm.jspm.io/*',
'unpkg:*': '//unpkg.com/*',
'jsdelivr:*': '//cdn.jsdelivr.net/g/*',
'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*'
},
meta: {
'*.scss': { loader: "sass" }
},
map: {
// The Application path
'index': INDEX + '?' + Date.now(),
// SystemJS plugins
'plugin-babel': 'unpkg:systemjs-plugin-babel#0/plugin-babel.js',
'systemjs-babel-build': 'unpkg:systemjs-plugin-babel#0/systemjs-babel-browser.js',
// 'scss': 'npm:scss',
// Application modules
'react': 'jsdelivr:react#15/react.js',
'react-dom': 'jsdelivr:react#15/react-dom.js'
},
packages: {
'https://npm.jspm.io/' : { defaultExtension: 'js' },
'https://cdn.rawgit.com/*' : { defaultExtension: false },
'https://unpkg.com/' : { defaultExtension: false },
'./index.scss' : { defaultExtension: false },
},
transpiler: 'plugin-babel',
babelOptions: {
sourceMaps: false,
stage0: true,
react: true
}
});
index.html
<html>
<head>
</head>
<body>
<script src="js/main.js"></script>
<script src="js/vfs_fonts.js"></script>
</body>
</html>
This main.js has pdfMake library.
createPdf.js
var pdfContent = function() {
content: [
{ text: 'This paragraph will have a bigger font', fontSize: 15 }
],
defaultStyle: {
italics: true,
font: 'openSans'
}
};
pdfMake.fonts = {
openSans: {
normal: 'OpenSans-Light.ttf',
bold: 'OpenSans-Bold.ttf',
italics: 'OpenSans-Italic.ttf',
bolditalics: 'OpenSans-BoldItalic.ttf'
}
};
pdfMake.createPdf(pdfContent).download();
This createPdf.js file is linked with pdfMake library. vfs_fonts.js file generated using grunt dump_dir task with openSans font file source. I'm getting the above error! Can any one help me? thank you.
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.
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