I have a tabpanel as follows-
var topTab = Ext.create('Ext.tab.Panel', {
region: 'center'
});
I am adding tab items on click of a button
topTab.add(someGrid);
this works well. Only the issue is, this grid is not getting fit into the tab item. I want to set layout = 'fit' to this tab.
I tried adding
topTab.items[0].setLayout but it is not working. Also tried giving height to the grid.
Any suggestions. (Using ExtJs 6)
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 context menu on a panel (geoext 2 map panel)
This is how I init it :
var ctxMenu;
Ext.get("mapPanel-body").on("contextmenu", function (event, element) {
event.stopEvent();
if (!ctxMenu) {
ctxMenu = Ext.create('Ext.menu.Menu', {
width:100,
height:100,
margin: '0 0 10 0',
items: [{ text: 'test', action: 'test'}]
});
}
ctxMenu.showAt(event.getXY());
return false;
});
What happens is that right click on the map opens the context menu ... but it stays open till I choose an item from the menu (left click outside it doesnt close it)
I'm using ExtJS 4.2.1
Why it behaves like this ?
May be the reason is , panel doesnot contain a default contextMenu event.
But you are defining a contextMenu by using the on on the panel.
For this issue you can define a click event for the panel by using the same on config and check whether the object contextMenu is present or not.
If it is present , then hide the contextMenu by using contextMenuObject.hide().
How do I change the tooltip for a panel located in a tab panel? Originally, I created a tooltip using the tabtip parameter of the panel constructor as the panel was added to the tabpanel.
You need to grab the DOM element that represents your tab's tab strip. You can use tabPanel.getTabEl(tabID) to get the strip element. You can then grab the .x-tab-strip-text span and set its qtip property.
// be sure to set your tab's itemId
var tabPanel = new Ext.TabPanel({
items: [{
title: 'one tab',
tabTip: 'something',
itemId: 'firstTabID',
html: 'haha wooo'
}]
});
// later...
// .getTabEl grabs the tabstrip DOM element
// Ext.get converts it to an Ext.Element
Ext.get( tabPanel.getTabEl('firstTabID') )
// find its descendent span that contains the tab's title text
.child('span.x-tab-strip-text', true)
// and set the tool tip
.qtip = 'something completely different!';
I'd never changed tab tooltips before so I dug around the Ext.TabPanel source looking at how they set it. I learned something too :)
I have a window with a grid in it, i want to open the window collapsed. but even if i give collapsed:true it dont seem to work...here is my code
var gridWindow = new Ext.Window({
title : title,
iconCls:'diagramIcon',
id :id ,
layout:'fit',
itemId:nodeId,
plain:true,
collapsible:true,
collapsed:true,
shadow:false,
constrain:true,
animCollapse:true,
closeAction:'close',
expandable:true,
items:[schemaGrid(nodeId,id)],
height: height,
width: width
})
can some one help.....
You need to set expandOnShow property as well. Add
expandOnShow: false,
to your window configurations. Alternatively you can also use the APIs. Display the grid window by:
gridWindow.show().collapse(false);
This will ensure that the window is collapsed when it is displayed.
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();
});