i am trying to redirect my page to Google from a link in Extjs
Here is the code:
Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "www.google.co.in",
tag: "a"
}
});
But instead of redirecting to page it is looking for a file in the working folder.
Please help.
This works for me:
Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "http://www.google.co.in",
tag: "a",
target: "_blank"
}
});
It does go to a new window, so you you could just remove the target config if you need to.
If you want to open new url in same tab than another option is to put this line in click handler
window.document.location="http://google.com"
This will open page in same browser tab.
Related
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'm using this tutorial to create a slide navigation using sencha touch
http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/
When implementing this in ibm worklight i dont know how to use app.js in worklight
THE app.js :
Ext.application({
name: 'SlideNav',
requires: [
'Ext.MessageBox'
],
views: [
'Viewport',
'Main',
'Navigation'
],
controllers : ['App'],
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('SlideNav.view.Viewport'));
},
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();
}
}
);
}
});
On worklight we have one main file that we use to initiate the app :
main.js:
window.$ = WLJQ;
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'Ersal',
views: ['Login','Home'],
controllers: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' },
{ xtype: 'mainmenuview' }
]);
//Ext.create('Ersal.view.Login');
}
});
}
It's not necessary to work with the app.js. You can only edit your main.js and add your medels, controllers and views.
Here is the code:
function wlCommonInit(){
initializeSenchaApp();
}
function initializeSenchaApp(){
WL.Logger.debug("Initializing Sencha Touch code");
Ext.application({
name: 'YouApp',
requires: ['Ext.Menu', 'YouApp.components.MenuButton'],
views: ['Home'],
models: ['Movie'],
controllers: ['Home'],
launch: function () {
Ext.getBody().removeCls('loading');
Ext.Viewport.add([
{ xtype: 'mainmenuview' },
]);
}
});
}
Wish it helps
It is not necessarily to create a separate app.js file, it is sufficient to use an existing main.js file.
If you want to include sencha plug-in in your application you have to set the loader path in main.js file as like this:
Ext.Loader.setPath({
'Ext.ux':'ux'
});
If you want to use the content of App.js in main.js, you have to load app.js before main.js in your HTML file, so make sure the ordering is correct. If it says that Ext is undefined, it probably is because you have the <script> tag that loads main.js before the one for App.js, so if that is the case, switch them around.
I have done application using EXtjs 4. Application contains many view screens like Login page, Dashboard. home etc, for to access project local URL is file:///E:/MyWeb/Web/index.html . once i visited this URL i will get first Login page because in viewport i have given xtype of Login view. whenever i will go different page URL wont be change it will be remains same as file:///E:/MyWeb/Web/index.html, but i can visit all the pages. some scenario if i am in middle, some problem happens in page when i reload the page it will go again Login page itself i cant be come in current page. again it will ask login and next i need to go required page. Can we change URL of the project in each page navigation? . How to achieve this one in ExtJs?. Graet appreciated. Thank you. My viewport code is below.
Code Here:
Ext.define('GulfMark.view.Viewport', {
renderTo: Ext.getBody(),
extend: 'Ext.container.Viewport',
layout: 'fit',
defaults: {
autoScroll: true
},
items: [{
xtype: 'container',
id: 'mainContainer',
layout: 'fit',
items: [{
xtype: 'loginView'
}]
}],
listeners: {
}
});
I did it making (app.js)x3. Each app.js, was charged in his index.html ( index1.html, index2.hmtl and index3.hmtl)
Every app.js, it charged with him controllers and respective view.
It's a very quick explanation, but it's easy to do.
Ext.define('MyApp.view.TopToolbar', {
extend: 'Ext.container.Container',
alias: 'widget.toptoolbar',
initComponent: function() {
Ext.applyIf(this, {
layout: 'fit',
cls : 'x-bottombar',
html : 'HTML FRAGMENT'
});
this.callParent(arguments);
}
});
Originally this component had contained a small fragment of html but now its going to be significantly increased. So I'd like to move it to an external file but I found no way in the docs to do this. Is there a way to do this? I don't want to have a big chunk of html in my js.
Use the loader configuration on the component:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader
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.