In Sencha Touch, I have a view that generates a popup box from the right when a button in the bottom toolbar is clicked:
Ext.define('TheApp.view.PopupTablet',{
extend: 'Ext.form.Panel',
xtype: 'popupbox',
config:{
itemId: 'popbox',
floating: true,
centered: true,
modal: true,
layout: {
type: 'vbox'
},
id: 'popup',
showAnimation: { type: 'slide', direction: 'left'},
styleHtmlContent: true,
html: 'Please select',
items:[{
xtype: 'button',
action: 'hide',
text: 'Close',
ui: 'confirm',
docked: 'bottom',
}]
}
});
The controller code creates the popup, adds it to the view port, adds its content and then displays it:
showPopup: function(){
var popup = this.getPopup();
Ext.Viewport.add(popup);
Ext.getCmp('popup').add(siteButts);
popup.show();
},
Everything works correctly, but I'm facing an issue with adjusting the height of the popup box to expand with the content. Setting height:auto or not setting any height collapses the container.
If I define a fixed height (e.g., height: 10em), it sets the height to that value. However, since the amount of data in the content is dynamic, I need the height to stretch accordingly.
I want the entire content to be visible without a scrollbar on the popup.
Any suggestions would be greatly appreciated.