I want to create somthing similar to iphone slide to unlock in sencha touch (Ext js); as i searching i found it can be done easily with jquery as mentioned here (iPhone “slide to unlock” Text in WebKit/CSS3; in this case it is using jquery draggable feature i know there is draggable component in ext js but how could i implement something like example that goes smoothly.
xtype: 'panel',
title: 'Drop a Panel Here',
listeners: { render: initializeDropTarget },
cls: 'x-dd-drop-ok'
my questions are how can i limit directions of draggable in ext js?
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.
so Im building a brand new ExtJS 5 application using Sencha CMD 5.1.2.52 with the command sencha generate app MYAPP ../MYAPP
It automatically renders to the body tag, but I would rather render it to a div with the id "#myDiv". I looked for the renderto attribute on several files (views, models, app configuration files, etc) with no luck.
So is there a way to override this behavior? Thanks!
When you build an application with Sencha command, the main container will be a ViewPort and by default every ViewPort is rendered to document.body.
You could remove the autoCreateViewport config, and add a launch object where you would create your panel, example:
Ext.application({
name: 'MyApp',
extend: 'MyApp.Application',
//autoCreateViewport: 'MyApp.view.main.Main'
launch: function() {
Ext.create('MyApp.view.main.Main',{
renderTo: yourDivHere
});
}
});
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})
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.
Asking and answering my own question thanks to a post on another topic:
I have created a cardboard in a custom Rally app. The list of items within the cardboard is longer than the screen will show, but there is no scroll bar in the window or the container. I've tried adding autoScroll:true to first level properties of the cardboard and to both the storeConfig and listConfig of the cardboard. Nothing works. WTH?
Here is the answer from Anders Martinson
You have to add autoScroll:true to the app definition:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
autoScroll: true,
//...
}
Once you do that, you're set.