The requirements are, the contents of the grid should never be truncated at all. The whole grid should be sized to meet the width of the data, possibly requiring a horizontal scroll bar on the window.
Is this possible?
Ext JS 4.2
This was my final solution:
Ext.define('App.view.patient.MyPanel', {
autoScroll : true,
columnLines : true,
extend : 'App.grid.Panel',
width : 500,
height : 500,
store : 'App.store.MyPanel',
initComponent : function() {
// [...]
// After store data is loaded, resize columns to fit contents
var store = Ext.data.StoreManager.lookup(me.store);
store.on('load', function(store, records, options) {
Ext.each(me.columns, function(column) {
// Resize to contents and get new width
column.autoSize();
var width = column.getWidth();
// The autoSize doesn't take config option "columnLines: true"
// into consideration so buffer it. Bug described here:
// http://www.sencha.com/forum/showthread.php?264068
width = width + 3;
// No need to go too crazy
width = Math.min(width, 400);
column.setWidth(width);
});
});
me.callParent(arguments);
}
});
Related
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
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!!
So I have the following window.
var myWindow = Ext.create("Ext.window.Window", {
width : 600,
title : "Window",
draggable : true,
border : false,
resizable : true,
autoScroll : true,
layout : "fit",
items : form,
modal : true
};
And this is my form:
var form= Ext.create("Ext.form.Panel", {
border : false,
frame : true,
items : items,
fbar : buttons
});
There's a lot of things that are hidden and show if some things are clicked. This causes the size of the form to change regularly. At first this is no problem, the window always resizes itself to fit the form. But if I close or resize the window, the window no longer fits the form. It is as layout : 'fit' doesn't work anymore after close/resize.
Any ideas?
Any help appreciated.
Once you resize a panel, width and height are FIXED. Every time the layout has to be recalculated it verifies if width and height are fixed or not in order to determinate if width and height should be recalculted or not.
This makes sense because you cannot have both (auto fit and custom size) at the same time. What you can do is set width and height to undefined and call doLayout() after you show new content.
When i add new buttons to panel i wants to increase the size of that panel dynamically?
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
Ext.define('myPanel', {
extend:'Ext.panel.Panel',
bodyStyle : {"background-color":"#DFE8F6","padding":"2px"},
width:100,
border:false,
viewConfig:
{
forceFit: true,
}
});
new myPanel({
id:'_panel',
renderTo:Ext.getBody()
});
new Ext.button.Button({
text:'Click Me',
renderTo:Ext.getBody(),
handler:function()
{
Ext.getCmp('_panel').add(new Ext.button.Button({text:'hello'}));
Ext.getCmp('_panel').doLayout();
}
});
});
Here the width is 100.
When i add new buttons to panel the width of the panel should be increased as per new buttons.
Here buttons' sizes will be different for different texts of the button.
Because ExtJS' Components have the functions for their width, so I think you can try:
handler:function()
{
var btn = new Ext.button.Button({text:'hello'});
var panel = Ext.getCmp('_panel');
panel.setWidth(panel.getWidth() + btn.getWidth());
panel.add(btn);
panel.doLayout();
}
Did you set maxWidth or minWidth property? For example if you set maxWidth to 100 and try to setWidth(120) dynamically it won't work.
This is what happened to me. My Sencha Architect UI designer set max width of a panel and I was trying to setWidth() more than the max value.
Wasted an hour for such a silly thing! :(
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);
});