How to add custom css animation to an element in Sencha Touch? - sencha-touch-2.1

Question

I have a panel in Sencha Touch. Inside of the panel I have a button. Now when I click on the button, I want to increase the width of the panel with custom css animations. This is my what I have tried so far.
Sencha Touch Code:
xtype:'panel'
id:'mypanel',
style:'width:300px;-webkit-transition:width 2s;transition:width 2s;'
items:
[
{
xtype:'button',
text:'Expand',
id:'expand'
}
]
Controller.js //on button click
Ext.getCmp('mypanel').addCls("expand");
Custom.css
.expand
{
width:600px;
}
Inside style of the panel, I have given some animation. But it doesnot work. Any help is appreciated.

Answer 1

You need to remove the inline style. And use 2 css classes.
Mypanel.js
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
centered: true,
cls: 'colapse', // Initialy added cls class
id: 'mypanel',
items: [
{
xtype: 'button',
itemId: 'mybutton',
text: 'MyButton'
}
],
listeners: [
{
fn: 'onMybuttonTap',
event: 'tap',
delegate: '#mybutton'
}
]
},
onMybuttonTap: function(button, e, eOpts) {
Ext.getCmp('mypanel').setCls('expand'); // resetting style on button tap
}
});
custom.js
.expand
{
width:600px;-webkit-transition:width 2s;transition:width 2s;
}
.colapse
{
width:300px;-webkit-transition:width 2s;transition:width 2s;
}
In the above code initially i added the cls "colapse" to the panel and on the button tap event i set the cls to "expand" to the panel using the following code "Ext.getCmp('mypanel').setCls('expand')".