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'
}]
});
});
Related
I have a requirement where I have a number instances of a custom Grid (called PackageGrid).
This Grid has a default Toolbar with a couple of buttons. However for each instance of the Grid that I create, some additional widgets can be added to the toolbar using the insert method on the toolbar like so :
tBar.insert(0, {xtype:'button'})
My first approach was to define a custom toolbar and assign it to a variable, and then add that variable to my Grid, like so :
var tb = Ext.create('js.grid.Toolbar') //my custom toolbar
Ext.define('js.grid.PackageGrid', {
referenceToToolbar: tb,
extend: 'Ext.grid.Panel',
tbar: tb //this.toolbar
});
I hold a reference to the toolbar called referenceToToolbar. I then later grab this toolbar reference and add my widgets.
this.packageGrid = Ext.create('js.grid.PackageGrid')
var tBar = this.packageGrid.referenceToToolbar;
tBar.insert(0, {....})
The problem with this approach is that when I add widgets using tBar.insert(..) to my grid instances, ALL of my grids isntances get the same widgets... because, while the Grids are seperate instances, there is only one toolbar instance shared across all grids (tb).
I have tried playing around with the initComponent method to create an instance of the toolbar.
Basically I need ONE instance of a toolbar for ONE instance of my grid. And then be able to get a reference to that toolbar (before render time), and add some more widgets.
Can that be done?
You can pass additional toolbar item as configuration into grid. Then in grid's initComponent method you can create grid's tbar with merged items (shared and additional).
So your grid definition could be like this:
Ext.define('js.grid.PackageGrid', {
extend: 'Ext.grid.Panel',
initComponent: function() {
var me = this;
me.initTbar();
me.callParent();
},
initTbar: function() {
var me = this;
var tbarItems = [{
xtype: 'button',
text: 'Shared Button'
}];
if (me.aditionalTbarItems && me.aditionalTbarItems.length) {
tbarItems = me.aditionalTbarItems.concat(tbarItems);
}
me.tbar = tbarItems;
}
});
Then you can pass additional toolbar items in configuration when you are creating instance of your grid:
var grid1 = Ext.create('js.grid.PackageGrid', {
title: 'Grid 1',
aditionalTbarItems: [{
xtype: 'button',
text: 'Grid 1 Button'
}],
renderTo: Ext.getBody()
});
Fiddle with example: https://fiddle.sencha.com/#fiddle/70q
I use extjs 3.4.0 and i have a problem with the buttons in the method deactivate.
I create the menu with GeoExt which i put the buttons.
var mapPanel = new GeoExt.MapPanel({
border: true,
region: "center",
// we do not want all overlays, to try the OverlayLayerContainer
map: mapa,
tbar: toolbar,
zoom: 3
});
In this example I put just 2 buttons, the fist is to move and de last is for calculate length. The controls for calculate length is working correctly.
var toggleGroup = "measure controls";
var buttonMover = new Ext.Button({
iconCls: 'mover',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup
});
this is the button for length.
var buttonLong = new Ext.Button({
iconCls: 'regla',
cls: 'margenBoton',
enableToggle: true,
toggleGroup: toggleGroup,
handler: function (toggled){
if (toggled) {
longitud.activate();
} else {
longitud.deactivate();
}
}
});
here I incorporate my buttons in the panel.
mapPanel.getTopToolbar().addButton(buttonMover);
mapPanel.getTopToolbar().addButton(buttonLong);
The problem is when I choose the length button, I calculate length correctly but I want choose another button or I deactivate this button it doesn't deactivate.
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! :(
I made the sufficient investigation of this problem. But unfortunately didn't find any solution, even in stackoverflow questions, that look like this one.
I need to redraw(refresh, re-render) a panel, that contains a tabPanel with different tabs, that are rebuilding each time when I open the panel. Here is the code below to build tabs
//the first tab
categoryTpl: function(){
var categoriesTab = new Ext.Panel({
id: '_Categories',
title: 'X-Axis',
layout: 'form',
padding: 10,
labelWidth: 101,
items: [...]
})
}
Here is code to build the TabPanel
setAxesInfo: function(){
var categoryTab = this.categoryTpl();
//initialize the controls in the first tab
FC.Var.CM.initAxis(categoryTab, undefined);
delete this.axesTabPan;
this.axesTabPan = new Ext.TabPanel({
activeTab: 0,
plain: true,
enableTabScroll: true,
autoScroll: false,
defaults: { autoScroll: true },
items: [categoryTab]
});
}
This is the code to build Panel
create: function(){
this.setAxesInfo();
this.axes = new Ext.Panel({
layout: 'fit',
border: false,
items: this.axesTabPan
});
return {
id: 'axesStep',
title: 'Series Customization',
items: this.axes
}
}
So, I make changes in tab controls and then I want to rebuild(refresh, re-render) my panel I click the button, which have the next handler
refreshAxes: function() {
this.axes.removeAll();
this.setAxesInfo();
this.axes.add(this.axesTabPan);
this.axes.doLayout();
}
So, in debugger I can see, that all my controls in the tab have default initial values (they were rebuilt as I see). But in the browser I see only the previous changed values. It's notable, that if I change the focus of my panel (for example switch to another panel) and then return to this panel all data have the default values. Why I don't see the default values without loosing focus?
I am using the Ext Js 3.4 (this version is the requirement). I'll appreciate any help. Thank you.
Try doing a doLayout() on the Panel.
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();
});