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! :(
Related
I use Ext JS. And I have a list of "panels". When user changes width of one panel, I need to change width of another panels automatically. Now when user changes one panel, another panels are not changed. Here is my code:
for (i = 0; i < resources.length; i++) {
table.add({
xtype: 'panel',
title: resources[i].name,
id: prefixResourceId + resources[i].id,
height: constHeight,
resizable:{
pinned:false,
dynamic:true,
floating:true
},
width: widthConst,
layout: 'fit'
});
}
I tryed to use this code:
listeners: {
resize: function(p) {
new Ext.Resizable(p.getEl(), {
pinned:false,
dynamic:true,
resizeElement: function() {
//this block works only when page are loaded
}
});
}
insdead of this:
resizable:{
pinned:false,
dynamic:true,
floating:true
},
But result is the same.
How can I change the width of all panels, when user changes width of one panel?
Put all the panels inside a surrounding panel, let the user change the size of this one, and all the contained panels will adapt their size automatically.
I have 3 panels. I use the vbox layout. I want to maximize the panels like dockable object when I click on the tool for min and max. How can done that be done??
Edit: jsFiddle solution to maximize a panel to a window: here
I've done this before with a border layout and it's a little tricky. You have to hide other components and then explicitly set the size of the panel you want to maximize.
With vBox it's a lot easier though. You just have to hide the other components and stuff will resize automatically.
jsFiddle solution
Ext.onReady(function(){
Ext.create('Ext.container.Viewport',{
height:590,
width:590,
padding:'25px',
layout:'vbox',
defaults:{
width:'100%',
tools: [{
type:'maximize',
handler: function(a,b,c){
var v = c.up('viewport');
var panels = v.query('panel');
Ext.Array.each(panels,function(p){
if(c.ownerCt!=p){
p.hide();
}
});
}
},{
type:'minimize',
handler: function(a,b,c){
var v = c.up('viewport');
var panels = v.query('panel');
Ext.Array.each(panels,function(p){
p.show();
});
}
}]
},
items:[{
flex:.33,
title:'1',
html:'1'
},{
title:'2',
flex:.33,
html:'2'
},{
title:'3',
flex:.33,
html:'3'
}]
});
});
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);
});
How can we recalculate the Extjs-4 Panel's Height After it's Child items like Grid (Which have auto height) takes their height.
Use autoHeight with Panel and GridPanel. Then catch the resize event of GridPanel to force Panel to layout :
var grid = new Ext.grid.GridPanel({
listeners: {
'resize': function () {
var panel = Ext.getCmp('panel');
panel.doLayout();
}
}
}),
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();
});