I know there is an Ext.Fx.Anim in Ext JS 4.0 and it is missing in Ext JS 3.4. Just wanted to know if there are any workarounds in getting some basic (say ease in) animation for a Component in Ext JS 3.4.
I'm assuming you want to do it for a component that is not in a managed layout. If that is true, you can animate the Ext.Element that wraps your content by calling Ext.Component.getEl()
var panel = new Ext.Panel({html: 'My content'});
// Or any method defined in http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Fx
panel.getEl().slideIn();
In 3.4, you have Ext.Fx class, which is applied, automatically by the framework, to Ext.Element. So, every element, by default, has the animation support. And with this, the methods that you see in Ext.Fx are also available on you element, like - highlight, fadeIn, slideIn, etc.
Related
I'm new to React and want to animate a button on hover, like I could do using jQuery. First I want to change the height. When that animation is done (which I would check for using .stop() in jQuery), I want to then animate the weight. What is the best way to do this in React?
A good solution for simple usecases is to include react-transition-group.
Examples here: http://reactcommunity.org/react-transition-group/css-transition
I trying to use this awesome tooltip library Popper.js
I want to use the above tooltip utility to render React Components into it. Right now, my understanding is that I can only give static html to the tooltip using title property and html set to true in the config object. I tried ReactDOMServer.renderToString but that is again creating a static markup with no lifecycle hooks or any of the React goodness. Is there any way I can inject React Components into the tooltip? Or can you please suggest some other library like this that supports flip behaviour on viewport boundaries?
PS: I don't want to use Popper.js or react-popper as I want the trigger functionality to work out of the box.
On tooltip initializing you can pass a boolean prop defining your title as an HTML
new Tooltip(reference, {html: true, title: "<div>This is a component</div>"})
See tooltip documentation
I ended up using react-popper package.
I have html of slider with with js and css in working condition, now i have to implement Joomla banners in that slider is it possible or right way ? if not than guide me how to do this or another method
Yes, is possible. In this case you need add your custom code in your template, and the custom code via override.
First try to add the HTML and content for example in one Custom HTML module for test:
Adding JavaScript and CSS to the page (add the css in your main css file)https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
By default the component banners has a single call at the same time, you'll have to modify the php code and include, for example a cycle to recover more banners or similar.
Here you can find more info:
Understanding Output Overrides.
Create an override.
I'm using ExtJS 4.2.1 to add customizations to a web site over which I have no design control. You could consider this to be like adding ExtJS components to another page as a mashup.
The problem is that when ExtJS starts up it adds CSS classes, such as x-body, to the <body> element of the DOM and this affects everything else on the page. I need to be able to stop it doing this while still allowing it to take effect on the ExtJS containers.
I know that I can use an IFrame to contain my ExtJS customization and isolate it from the page's DOM, but I found problems with performance with IFrames, and even rendering problems in Firefox and IE so need a different solution.
In ExtJS 4.0.2 if you set scopeResetCSS:true the magic happens, but in ExtJS 4.2.1 I can't found the option.
I guess you have a couple ugly options:
Remove the styles from ExtJS stylesheet (a long and boring work)
Use Ext.Element and removeClass function to manually remove the class from each element http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.dom.Element-method-removeCls
Upon further research, prompted by Aguardientico's answer, I found that is is possible to do this using Sass as described here however I didn't want to rebuild the ExtJS CSS so I added some code to do it at runtime as follows:
var body = Ext.getBody();
// Remove the x-body cls from the body element
body.removeCls("x-body");
// Add x-body cls to any existing top-level ExtJs divs
body.select('>div').each(function(el) {
if (el.hasCls("x-border-box")) {
el.addCls("x-body");
}
});
body.on("DOMNodeInserted", function(e, node) {
// Add x-body cls to top-level ExtJs divs as they are created
if (node.parentNode === body.dom) {
if (Ext.fly(node).hasCls("x-border-box")) {
Ext.fly(node).addCls("x-body");
}
}
});
The idea is to remove x-body from the body element and add it back to any divs created by ExtJS as immediate children of the body. Because ExtJS adds new divs as required, e.g. for pick lists, it is also necessary to watch for them being created using the DOMNodeInserted event.
I call this code in my application's launch handler, but it could alternatively be at the start of the Ext.onReady handler.
Edit:
My ExtJS application is in a container that is rendered to the body element like this:
Ext.create("Ext.container.Container", {
renderTo: Ext.getBody(),
...
});
but if you render to another DIV you will also need to add the x-body class to your custom container explicitly like this:
Ext.create("Ext.container.Container", {
renderTo: "SomeOtherDiv",
cls: "x-body",
...
});
The right option in ExtJS 6+ (classic) is Ext.scopeCss
Set this to true before onReady to prevent any styling from being added to the body element. By default a few styles such as font-family, and color are added to the body element via a "x-body" class. When this is set to true the "x-body" class is not added to the body element, but is added to the elements of root-level containers instead.
Hi I was using the mobile map demo here: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fmaps
and I was trying to add a toolbar at the bottom of the map page. It works, but then the map quickly covers it up. After looking at the DOM it looks like the toolbar gets added within the map div.
Is there a way to make it appear on top of the map rather than underneath? This code is all contained in the Application.js file.
var maps = test.page.Maps.getInstance();
var manager = new qx.ui.mobile.page.Manager(false);
manager.addDetail([
maps
]);
maps.show();
var toolbar = this.__toolbar = new qx.ui.mobile.toolbar.ToolBar();
maps.add(toolbar);
Thanks for the help!
With maps.add(toolbar) you're adding the toolbar to the map, that's why it is added to the map div. I guess you have to go through the page.Manager to add separate elements to the GUI. You might want to revise the mobile tutorial which achieves exactly that, also including a widget derived from NavigationPage like in the maps showcase.
have a look at:
https://github.com/qooxdoo/qooxdoo/blob/master/application/mobileshowcase/source/class/mobileshowcase/page/Maps.js
There are several important things in this example.
The methods "_createContent" and "_createScrollContainer()" are overridden.
A NavigationPage creates by default an iScroll container where you can put all widgets into.
But the OpenLayer div is not a qooxdoo widget, of course. It has its own scrolling logic.
That is why, you have to overwrite these methods. Much of the styling of OpenLayer can not be changed. The OpenLayer overlays all contents because its has an absolute positioning.
But there is a solution:
Use this method in initalize() method
this.addAfterNavigationBar(widget);
Assign a CSS class to your widget through
widget.addCssClass("your-class")
Change your "styles.css" in resource folder:
.your-class {
z-index: 5000;
position: absolute;
}
Greetz Christopher