I need a Sencha Touch Container that, once I set a width for it (fixed or in percent of the parent), automatically calculates its height to keep a given form factor, even when screen is rotated.
You can use the hbox layout on the parent and specify the flex or width of the container. This will take care of height http://try.sencha.com/touch/2.0.0/docs/Ext.layout.HBox.2/
Following #PeterKellner suggestion of leveraging the resize event, it turned out it was easier than I thought implementing such a component:
Ext.define('Fiddle.ux.AutoResizeComponent', {
extend: 'Ext.Component',
xtype: 'autoresizecomponent',
config: {
formFactor: 1
},
initialize: function() {
var me = this;
var onResize = function() {
var formFactor = me.getFormFactor();
var width = me.element.dom.offsetWidth;
me.setHeight(width/formFactor);
}
this.on('resize', onResize);
}
});
A Fiddle using it: https://fiddle.sencha.com/#fiddle/64j
Related
I'm having problems with isotope in my site. I thought I tackled them all but now there is still a problem when resizing the window. On resize of the window the whole grid is moved way down on the page. This is not fixed by re-doing the layout when the window size changes. Triggering a .isotope('layout') always moves the whole grid to the bottom of the page. My code also implements infinite scroll, that is why I have the part on the hiddenelem's children. I'm also using bootstrap btw.
The (important) part of the code:
if (typeof g_Isotopegrid === 'undefined') {
g_Isotopegrid = $('.grid').isotope({
itemSelector: '.grid-item',
stamp: '.stamp',
masonry: {
columnWidth: 255,
gutter: 30
}
});
}
// Append all the hidden items to the visible items element
hiddenElm.children().each(function () {
var aItem = $(this);
// Append the items to the visible div
aItem.appendTo(visibleElm).imagesLoaded(function() {
g_Isotopegrid.isotope('appended', aItem);
});
});
Any help is appreciated!
In Bootstrap I never set static width:
masonry: {
columnWidth: 255,
gutter: 30
}
just item's class:
masonry: {
columnWidth: '.grid-item',
gutter: 30
}
When you are using Bootstrap is better for item width use bootstrap's classes.
The problem was that we were not using the direct container of the grid items as the element to apply isotope to.
Absolutely pulling my hair out on this one. There seems to be no black and white solution offered on GitHub - which is strange, since it seems like a fairly simple concept. Perhaps I just don't get it.
Basically, I am trying to create a fluid and responsive portfolio - using Isotope to filter the items. The filtering works fine, the 4 columns are totally fluid and everything looks great when you resize the window.
HOWEVER, for mobile and tablet layouts, I simply need to adapt from a 4-column layout to a 2-column layout.
I tried this:
$(window).load(function(){
var $container = $('#thumbs');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
},
});
// initialize Isotope
$container.isotope({
// options...
resizable: false, // disable normal resizing
// set columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 },
});
// update columnWidth on window resize
$(window).smartresize(function(){
$container.isotope({
// update columnWidth to a percentage of container width
masonry: { columnWidth: $container.width() / 4 }
});
});
// My attempt at using media queries to change 'columnWidth'
$(window).resize(function() {
var width = $(window).width();
if (width < 768) {
$container.isotope( {
// update columnWidth to half of container width
masonry: { columnWidth: $container.width() / 2 }
});
}
});
});
Didn't work :(
Any help would be much appreciated.
This should work to set your number of columns. Then you just divide with columns.
var columns;
// set column number
setColumns();
// rerun function when window is resized
$(window).on('resize', function() {
setColumns();
});
// the function to decide the number of columns
function setColumns() {
if($(window).width() <= 768) {
columns = 2;
} else {
columns = 4;
}
}
I think there's a slightly nicer way where you can still use css media queries. See my answer here: https://stackoverflow.com/a/20270911/1010892
Hope that helps!!
Using Ext JS 4.0.2, I'm trying to open a window that automatically sizes itself big enough to fit its content, until it hits a height limit, at which point it stops getting bigger and shows a scroll bar.
Here's what I'm doing
Ext.create('widget.window', {
maxHeight: 300,
width: 250,
html: someReallyBigContent,
autoScroll: true,
autoShow: true
});
When the window is first rendered, it's sized big enough for the really big content--bigger than the maxHeight should allow. If I attempt to resize it, then snaps down to the maxHeight of 300px.
How do I constrain the window to its maxHeight when it's initially rendered?
I have exactly the same problem and for now I'm doing a litle dirty hack :)
this.on('afterrender', function() {
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}, this);
Depending on the content of the window, you must use the afterlayout event. Instead of using this.maxHeight, to use the whole viewport, use Ext.getBody().getViewSize().height or in vanilla JS use window.innerHeight.
This version will work even if the windows contains other components and not only huge html:
listeners: {afterlayout: function() {
var height = Ext.getBody().getViewSize().height;
if (this.getHeight() > height) {
this.setHeight(height);
}
this.center();
}}
This can be better :
bodyStyle: { maxHeight: '100px' }, autoScroll: true,
I don't see an out-of-the-box way to do this. However, you might try this approach:
Place the contents of the window into a container inside the window (i.e. make someReallyBigContent be inside a container.) On afterrender, get the height of that inner container and then proceed to set the height of the outer window based on that.
How I ended up displaying a window with an unknown amount of fields on a form (constrain = body.el):
prefForm.itemId = 'prefForm';
win = Ext.create('Ext.window.Window', {
layout : {
type : 'vbox',
align : 'center'
},
buttons : buttons,
maxHeight : constrain.dom.clientHeight - 50,
title : title,
items : prefForm,
listeners : {
afterrender : {
fn : function(win) {
var f = win.down('#prefForm');
f.doLayout();
var h = f.body.dom.scrollHeight;
if (f.getHeight() > h)
h = f.getHeight();
win.setHeight(h + 61);
win.center();
},
single : true
}
}
});
You can add this config on your window
maximizable: true
if you want you could programmatically 'click' that button :)
Now I see what you are trying to do. I think the only thing missing from your config is the height parameter. Set it to the same number as maxheight. That should do it, you won't need to call setHeight().
This is just like Ivan Novakov answer, except I prefer it when you override the onRender class for these types of classes.
This is for a couple of reasons. Removes an additional event listener, and in the case you have multiple things that need to occur at afterrender time. You can control the synchronization of these tasks.
onRender: function(ct,pos) {
//Call superclass
this.callParent(arguments);
if (this.getHeight() > this.maxHeight) {
this.setHeight(this.maxHeight);
}
this.center();
}
I had the little bit different problem. In my case ExtJS code there inside the HTML popup windows. And I had to achieve:
change the size of panel when we change the size of popup windows.
Ivan Novakov's solution worked for me.
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 20;
var height = Ext.getBody().getViewSize().height - 20;
myPanel.setSize(width, height);
});
I have a panel with a "form" layout, containing several buttons. now I want to enable this panel resize according to window resizing. How can I get this done?
thanks.
Ext.EventManager.onWindowResize(function(w, h){
panel.doComponentLayout();
});
Assuming you have a Panel named 'panel' with some automatic sizing built in (e.g. height: "100%"). Otherwise, the new width and height of the window are passed into the anonymous function passed to onWindowResize().
As wrote #deniztt you should subscribe to EventManager class onWindows Resize Event.
It can be something like this:
Ext.EventManager.onWindowResize(function () {
var width = Ext.getBody().getViewSize().width - 160;
var height = Ext.getBody().getViewSize().height - 140;
panel.setSize(width, height);
});
Where panel is reference to your panel
You can read about it here.
You can make the panel resizable by setting the 'resizable' config option, see the docs for the various options: http://dev.sencha.com/deploy/ext-4.0.0/docs/api/Ext.panel.Panel.html.
As far as how the form components interact you'll need to set anchor's if you want to use a form layout or switch to an hbox/vbox type of set-up with various flex settings.
You can set the size for window and set the child panel's autoHeight and autoWidth attributes true.
Another way is catching the resize event of the window and resize the child panel according to the new size values.
Thanks to Gegory and Joseph for the EventManager solution. I've done some minor changes to this solution, replacing the getBody() with a DIV and setting an initial width/height of my chart (or any other component):
<div id="chart" style="overflow: hidden; position:absolute; width:100%; height:90%;"></div>
....
Ext.onReady(function() {
var renderDiv = Ext.get('chart_div');
var chart = Ext.create('Ext.chart.Chart', {
renderTo: renderDiv,
width: renderDiv.getWidth(),
height: renderDiv.getHeight() - 50,
...
});
Ext.EventManager.onWindowResize(function () {
var height = renderDiv.getHeight() -50;
var width = renderDiv.getWidth();
chart.setSize(width, height);
});
});
autoWidth and autoHeight don't seem to work for me (Ext-JS 4.2.1).
I'm using the array-grid extjs example to try and fit a gridpanel into a container window. The problem is on resizing the container window, the gridpanel doesn't automatically fit the new size. As I understand it that's how it's supposed to work.
Here's the link to the example: http://www.extjs.com/deploy/dev/examples/grid/array-grid.html
What I've done is changed the following..
// Added to gridpanel config
layout: 'fit',
viewConfig: {
forceFit: true
}
// Window container
var gridWindow = new Ext.Window({
items: [
grid
]
});
// Instead of grid.render, use gridWindow.show();
gridWindow.show();
layout: 'fit',
should go into the gridWindow configuration! The layout manager arranges the children of a panel, but the grid is the child.
I'm using the following workaround:
Ext.onReady(function () {
var grid = ... //define your grid here
Ext.EventManager.onWindowResize(function () {
grid.setSize(undefined, undefined);
});
});
Extjs v4.0.7
I solved this by wrapping my gridpanel into an Ext.Panel, with a layout property set to 'fit'.
The grid panel (with a viewConfig also containing forceFit: 'true' now is resized automatically when the window is resized
I think you need to use EventManager class. Please read it in following blog
Using ExtJS 6, this is what worked for me (doesn't need a Ext.Viewport as parent container):
var grid = //...
Ext.on('resize', function(w, h){
grid.updateLayout();
});