Saturday, December 28, 2013

Increase and Decrease height and width of panel.

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',

config: {
layout: {
type: 'hbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
docked: 'left',
itemId: 'increase',
text: 'Increase'
},
{
xtype: 'button',
docked: 'right',
itemId: 'decrease',
text: 'Decrease'
}
]
},
{
xtype: 'panel',
flex: 1,
height: 500,
itemId: 'container',
style: 'background-color: #A200FF',
width: 500,
scrollable: 'horizontal'
}
],
listeners: [
{
fn: 'onIncreaseButtonTap',
event: 'tap',
delegate: '#increase'
},
{
fn: 'onDecreaseButtonTap',
event: 'tap',
delegate: '#decrease'
}
]
},

onIncreaseButtonTap: function(button, e, eOpts) {
console.log('on click decrease button');
var container = this.down('#container');
var widthString = container.getWidth();
var heightString = container.getHeight();
var w = parseInt(widthString.substr(0,widthString.indexOf('px')),10);
var h = parseInt(heightString.substr(0,heightString.indexOf('px')),10);

console.log('width : '+ w +' height : '+ h);
container.setHeight((h+10).toString()+'px');
container.setWidth((w+10).toString()+'px');

},

onDecreaseButtonTap: function(button, e, eOpts) {
console.log('on click decrease button');
var container = this.down('#container');
var widthString = container.getWidth();
var heightString = container.getHeight();
var w = parseInt(widthString.substr(0,widthString.indexOf('px')),10);
var h = parseInt(heightString.substr(0,heightString.indexOf('px')),10);

console.log('width : '+ w +' height : '+ h);
container.setHeight((h-10).toString()+'px');
container.setWidth((w-10).toString()+'px');

}

});