Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine??
please help me how?, ..
I have followed step by step here .. and #Abdel Olakara help
but there is still an error ... here my firebug
[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding
Ext.require('AM.controller.Users') above Ext.onReady
[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding
Ext.require('AM.store.Users') above Ext.onReady
this.getView('Viewport') is null
When i read this at the forum ... there are still some bug with MVC guide ...
so, if you ever make it works.. how?
this is my Application.js :
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
i'm trying to learn MVC in Extjs...
sorry if my english bad..
Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!
Here is the working code:
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
autoCreateViewport: false,
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!
I will keep updating this answer going forward.
Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!
Solution to Viewport problem Here are two ways to solve it.
Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:
Uncaught TypeError: Cannot call method 'create' of null
I do use ExtJS 4.1.
In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding
Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place
stores: [
'News',
],
in my app/Application.js file instead of app/controller/OOO.js file.
So put stores:[], in controller file.
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
We are using Extjs 3.1 and we are trying to integrate reactjs into.
we have vendor library which has react, reacr-dom, redux and other libs are packed and included as script.
Here is my extjs code
var CompositeViewer = Ext.extend(Ext.BoxComponent, {
itemId: 'CompositeViewer',
requires: [
'ReactDOM' //my lib file name is vendor.lib.js
],
initComponent: function() {
Ext.apply(this, {
autoEl: {
tag: 'div',
cls: 'normalize'
}
});
CompositeViewer.superclass.initComponent.apply(this, arg);
},
onRender: function(ct, position) {
CompositeViewer.superclass.onRender.apply(this, arg);
console.log(ReactDOM); //OFCOURSE ReactDOM is undefined
/// HOW TO LOAD/Render REACT APP AND OTHER LIBS
},
beforeDestroy: function() {
CompositeViewer.superclass.onDestroy.apply(this, arg);
}
});
Need help in how to load reactjs/javascript libs into extjs container.
EDIT:clarifying bit more.
Since I don't have option to load external dependencies (react,redux etc) from cdn , how do I bundle it separately and what type (commonjs,umd or var)
How do I bundle my app , so that ExtJS can import it (as separate lib ?? )
Here is how you can do it.
Using ExtJS 3.4.1 working example:
Ext.onReady(function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
title: 'ExtJS Panel',
items: [{
xtype: 'label',
text: 'ExtJS Compoent'
}, {
xtype: 'panel',
listeners: {
afterrender: function () {
const e = React.createElement;
ReactDOM.render(
e('div', null, 'ReactJS Component'),
this.el.dom
);
console.log('afterrender');
}
}
}]
});
});
Link to Fiddle(ExtJS 3.4.1) : https://fiddle.sencha.com/#view/editor&fiddle/2l12
Using ExtJS 5 and Above Working example:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
renderTo: Ext.getBody(),
requires: [
'ReactDOM'
],
title: "Some ExtJS Panel",
items: [{
xtype: 'label',
text: "ExtJS Component"
}, {
xtype: 'panel',
id: 'react-panel',
height: 400,
initComponent: function () {
console.log('do some extjs stuff here');
this.superclass.initComponent.apply(this, arguments);
},
listeners: {
afterrender: function () {
console.log();
const e = React.createElement;
ReactDOM.render(
e('div', null, 'ReactJS Component'),
this.el.dom
);
console.log('afterrender');
}
}
}]
});
}
});
Link to Fiddle (ExtJS 5 & above): https://fiddle.sencha.com/#view/editor&fiddle/2l11
So, it was a bit of a complicated process figuring this out initially. Lots of research across the web. Fortunately, I was able to put together a working example which I outlined in a Medium article here. In this outline I go over:
Building a Basic React Library (with JSX)
Transpiling the Library
Using the library in a browser using a script tag
Serving a demo with a simple http server
Bundle with webpack
Integrate into an Ext JS app
React in ExtJS
Create a simple React library usable within a Sencha Ext JS application
Adding React to an existing Ext JS application can be challenging. As of today (Aug 14, 2020) there are only a few solutions present in the wild for how best to incorporate a React application into an existing Ext application. That said, however, there are no great methods for incorporating components at a more module level or in a way that allows for the common use of JSX.
Recently, I approached this exact problem. While we would all love to throw away a project and start something new, that is unfortunately not the reality under most circumstances. Often the best solution, when possibly, is to allow for the integration of new content into an existing system. The goal, in this particular case, was to allow front-end engineering teams to develop new content in React while integrating into the existing application and a paced conversion of legacy content.
In this guide, I am going to create a React library that loads a basic header with a couple sub-components. Then I will take that code and turn it into a re-usable npm package that can be used in the browser and node with webpack, babel, and typescript. From that point we can easily integrate the React library into Ext containers via the React vanilla JS library.
I am trying to clean up and restructure my javascript in my app, but once I change it it stops working. I am using ext scheduler in my app so that might be the problem. Here is how I want to set up
/ext/scheduler-3.0.0(all core code for schedule components go here)
/ext-all.js
/myscheduler(custom code for schedule components go here)
--/global/
----/view/
------globalscheduling.js
/model/
And This is how I start my app
ExtLatest.Loader.setConfig({enabled: true});
ExtLatest.define("scheduler.Application", {
extend: "Ext.app.Application",
requires: ["myscheduler.global.view.globalschedulegrid"],
name: "scheduler",
appFolder: "",
launch: function () {
getData()
}
});
However extjs still trying to go to https://c.na17.visual.force.com/apex/myscheduler/global/view/globalschedulegrid.js to find my view file what I doing wrong here?
Ext.Loader.setPath('myscheduler.global.view.globalschedulegrid', 'path to my scheduler');
OR
Ext.Loader.setConfig({
paths: {
'myscheduler': 'myscheduler',
}
});
Link to 5.0 Doc (Not sure which version you are using but it's the same)
5.1 as noted in the title. I didn't have to set the path for globalschedulegrid. Just specifying the paths in setConfig like this
ExtLatest.Loader.setConfig({enabled: true,
paths: {
'scheduler': "{!URLFOR($Resource.ConnectWeb, 'scripts/libs/scheduler')}"
}
});
i try migrate a developement environment to production with SDK Sencha tool.
But the proccess of building exclude of the "app-all.js" all models and stores defined in my App folder.
Only loads views and controllers. Any ideas why does this happen ?
Regards !.
Edit form more info:
For example mi cocina.js works as an app.js:
Ext.Loader.setConfig({
enabled : true,
paths: {
Ext: 'vendor/ext/src',
My: 'app'
}
});
Ext.application({
name: 'Alnitak',
appFolder: 'app',
controllers: ['Env','Cocina'],
launch: function(){
...
}
});
An the cocina controller:
Ext.define('Alnitak.controller.Cocina', {
extend: 'Ext.app.Controller',
store: [
'PlatosArmados',
'Niveles',
'Submenues',
'AlumnosPlato'
],
model: [
'PlatoArmado',
'Nivel',
'Submenu',
'AlumnoPlato'
],
views: [
'grid.PlatoArmado',
'grid.AlumnoPlato'
],
init: function() { ...}
});
What i have modify ?
Assuming you mean Sencha Command and not SDK, you have to change a few things:
Specify all your js paths in .sencha/app/sencha.cfg (parent folder is enough)
Build a new template app (http://docs.sencha.com/cmd/) and follow the pattern, not the Sencha Architect pattern for the Loader you use above. Sencha Cmd has its own way of handling javascript loading. You would not need to specify the paths with Ext.Loader.setConfig()
If you want to use the Architect pattern though, here's the guide.
I wanna implement the Name Space concept in my JavaScript code, I am using ExtJS, but I don't know where to start, anyone could help me? The site example is very short.
Here is a good sample How do I declare a namespace in JavaScript?
and here is too https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/JavaScript_Object_Management
Actually in ExtJS4 the App name is your name space. So for example if you define your app this way:
Ext.application({
name: 'MyApp',
appFolder: 'app',
autoCreateViewport: true,
controllers: [
'MyController'
],
launch: function() {
console.log('hello');
// This is fired as soon as the page is ready
}
});
then all of your components you define need to be namespaced with MyApp. So a controller becomes MyApp.controller.MyController and a view becomes MyApp.view.InboxGrid