- slideIn() method
- Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect.
- slideOut() method
- Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
In this example we are going to see how to slideIn and slideOut a Panel element.
Application HTML file - index.html
<html>
<head>
<title>ExtJs slideIn() and slideOut() example</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<style type="text/css">
.x-panel-body{
background-color:#8b8378;
color:#ffffff;
}
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div id="myExample">
</div>
</body>
</html>
Application JavaScript file - app.js
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'myApp',
appFolder: 'app',
controllers: [
'MyController'
],
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
items: [
{
xtype: 'myView'
}
]
});
}
});
Application View - MyView.js
Ext.define('myApp.view.MyView' ,{
extend: 'Ext.container.Container',
alias : 'widget.myView',
height: 400,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
margin: '5 5 5 5'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Click here to see slideOut() effect',
action: 'slideInslideOut',
pressed: true,
enableToggle: true
},
{
xtype: 'panel',
height: 200,
html: 'Just some TEXT for ExtJs page Animation ...',
id: 'section'
}
]
});
me.callParent(arguments);
}
});
Application Controller - MyController.js
Ext.define('myApp.controller.MyController', {
extend : 'Ext.app.Controller',
//define the views
views : ['MyView'],
init : function() {
this.control({
'container' : {
render : this.onPanelRendered
},
'myView button[action=slideInslideOut]' : {
toggle : this.onSlideInSlideOutRequest
}
});
},
onPanelRendered : function() {
//console.log('The container was rendered');
},
onSlideInSlideOutRequest : function(button, pressed) {
//console.log('Button Click',pressed);
if(!pressed){
button.setText('Click here to see slideIn() effect');
Ext.get("section").slideOut('t', {
easing: 'easeOut',
duration: 2000,
remove: false,
useDisplay: false
});
}
else {
button.setText('Click here to see slideOut() effect');
Ext.get("section").slideIn('t', {
easing: 'easeOut',
duration: 2000
});
}
}
});
References
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.