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
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'm a bit confused by the Sencha Touch documentation. In their Create your first app tutorial, they show a bit of code to create a panel:
Ext.application({
name: 'Sencha',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome'
}
]
});
}
});
In the code, the fullscreen and items properties are at the base level of the json being passed in, but when you look at the api documentation for Ext.tab.Panel, both properties are found under the 'Configs' section and not the 'Properties' section.
I know that there are instances where I would need to put json encoded properties in a config property. Like this:
Ext.define('User', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
}
});
How do I determine what should go into the config property and what shouldn't? I'm having a hard time trying to find the explanation in the documentation.
Additional clarification to selected Answer:
In the first instance where we're using Ext.create("Ext.tab.Panel",... We're creating an instance of the Panel class. We're applying the configs directly to the instance of the Panel that will be created.
In the second instance where we're using Ext.define('User', { extend: 'Ext.data.Model', ..., we're creating a class called User by extending the class Model. The properties defined in the config property will be used to configure the Model class while any other properties outside of the config property will be used to configure the User class.
The braces are the configuration you're passing to create an instance. You're passing fullscreen & items as configurations to the tab panel. You're passing title, iconCls & html to the panel.
You only need to use the config block when defining your own classes, not instantiating them.
I am trying with EXT JS 4, Sencha Touch 2.0 and WebORB.
What I am trying to build a store in MVC of Sencha Touch through Ext dynamically.
I have called the below javascript function as below in the section in Index.html:
<script src="sencha-touch-all.js"></script>
<script src="webORB.js"></script>
<script>
var dataFetched;
var dataGet=function(){
<!-- Class Name and URL are replaced in the original program-->
this.proxy = webORB.bind("ClassName", "URL");
dataFetched=this.proxy.GetClassList(1301722);
//console.log(dataFetched);
}
</script>
<script src="app.js">
</script>
The following is my app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'SBR',
controllers: [
'Main','Blog','Comments'
],
views : [
'Home','Blog', 'Comments'
],
models : ['Comments'],
stores: ['Comments'],
launch: function(){
dataGet();
console.log(dataFetched);
Ext.create('SBR.view.Viewport');
}
});
The following is my Comment.js - Store
Ext.define('SBR.store.Comments',{
extend: 'Ext.data.Store',
config: {
model: 'SBR.model.Comments',
data: dataFetched
}
});
The following is Comment.js - Model
Ext.define('SBR.model.Comments',{
extend: 'Ext.data.Model',
config: {
//fields: ['subject','body']
fields: ['bookImageUrl','authorFirstName','authorLastName']
}
})
The following is the Comment.js - View
Ext.define('SBR.view.Comments',{
extend: 'Ext.List',
xtype: 'commentspage',
config:{
title: 'Comments',
iconCls: 'star',
//indexBar: true,
store : 'Comments',
itemTpl: '{authorLastName}',
onItemDisclosure: function(item) {
console.log('Disclose more info on' + " " + item.data.subject);
}
}
});
If I define the store with static Json Data it is working fine, but when I try to access it with WebORB it does not.
The console entries are done before it shows data to the console. Why it is not showing any data in the comment's view or my approach is entirely wrong for collecting and loading data through WebORB to the store?
Oh Yes... I got it....
I just changed the following:
I transferred the function dataget() from index.html to Comments.js-Store and called the same function inside the config of the same file like:
data: dataGet()
Thats it...it worked..
I need to use an external file with content from an XTemplate.
Basically, I want to use the an external file with no "strange" solution, like use "XTemplate.from", or put the XTemplate objects in variables. Something like this:
list.html
<div>Name: #{object.name} </div>
file.js
...
content = Ext.create('Ext.panel.Panel', {
fullscreen: true,
scroll: 'vertical',
data : planetEarth,
tpl: "index.html"
});
...
Basically, once I define a file for the tpl, this should be compiled automatically.
Any idea? Thanks!