I have a Panel layout with a TreePanel in one region. A user clicks on an node in the tree and a TabPanel should be displayed in another region with information, editing tools etc. for that tree node.
I have a working layout with tree panel and an on('click') event that fires. However, I don't seem to be able to get the TabPanel to be able to render in the layout.
If I allow the TabPanel to render as part of the panel rather than in the on click event it works as expected.
I'm not sure what I'm missing in terms of rendering the tab panel into a named element. Any help would be appreciated.
Below is the code in question.
Many Thanks
Stephen
var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren',
root: {
nodeType: 'async',
text: 'nowt here',
draggable: false
}
});
treePanel.on('click', function(n){
var sn = this.selModel.selNode || {}; // selNode is null on initial selection
renderPageTabs(n.id);
});
function renderPageTabs(resourceid) {
pageTabPanel.render('contentpanel');
alert('resourceid'+resourceid);
}
var pageTabPanel = new Ext.TabPanel({
activeTab: 0,
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Page Overview',
html: 'This will be the page overview detail tab'
},{
title: 'Content Editor',
html: 'This will be the page editor tab'
},{
title: 'Property Editor',
html : 'This will be the property editor tab'
},{
title: 'Workflow',
html : 'This will be the workflow tab'
}
]
})
var contentPanel = {
id : 'contentpanel',
region : 'center',
margins : '0 0 0 0',
border : false
};
// TODO perhaps the tool bar should be in a north region of this panel
var dashPanel = new Ext.Panel({
layout : 'border',
height : 500,
items : [{
layout : 'border',
id : 'site-nav',
region : 'west',
collapsible : true,
border : false,
split : true,
margins : '0 0 0 0',
width : 275,
minSize : 100,
maxSize : 500,
items : [actionPanel, treePanel]
}, contentPanel],
renderTo : 'dashboardPanel'
});
I don't think you are using the render method in the correct way.
Tab Panel: render
If you are using a Container object to house this Component, then do not use the render method.
Is your tree going to allow a tab to be opened any time a tree node is clicked? Will there be multiple tabs at one time? If so, I think maybe you just want to use .add(), instead of .render(). After you do .add(), you will also need to call .doLayout() on the container panel as well so it will show up.
You may need to alter your renderPageTabs function so that it builds the pageTabPanel object inside of it for each tab, then uses .add() to place it in the contentpanel object.
I assume pageTabPanel isn't defined at the time you trigger the handler.
Try to remove the var keyword in front of "var pageTabPanel =" to make it a global variable.
If that works, it's a scope/variable issue.
The better solution is to give the tabpanel an id and call Ext.getCmp('tabpanelid').render('contentpanel') in your renderPageTabs method.
Hope that helps.
Regards,
Steffen
Related
I have created a viewport in ExtJS 6.2.0 like so :
Ext.define('Mine.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.main',
id: 'mainView',
xtype : 'mainV', ...
With a region south collapsible panel.
I want to add a fixed Header at the top so I added as an item of the viewport this :
{
region: 'north',
//collapsed: true,
xtype: 'panel',
height: 30,
collapsible:false,
layout: 'border',
collapsed: false
// titleCollapse: true
},
But I am not getting a fixed header, instead I am getting a collapsible north window.
How to achieve this?
Thanks!
My bad i was defaulting my viewport to have item panels collapsible. So i got what i wanted by removing the collapsible true from defaults config in my viewport and setting items with property collapsible in a customized way (true or false each depending on the case)
I have a popup windows which is suppose to show an email (which is in html) in the centerPanel. That panel is in the center region of the border layout.
It absolutely has autoscroll set to true and I know that my test data is much larger than the panel. But I can't get it to scroll.
Is there, perhaps, a better way of setting this up? I've tried some other object like a label, display, textarea etc. as an item in the center panel and set that object with autoscroll : true with no success
popup = new Ext.Window({
width: 900,
height: 320,
resizable: true,
draggable: true,
id: 'popupWindow',
layout: {
type: 'border'
},
items: [
// ...
{
xtype: 'panel',
region: 'center',
id: 'centerPanel',
autoscroll: true,
margin: '0 5 0 5',
html: jsonData.email
},
// ...
]
});
It should be autoScroll, not autoscroll.
Got it!
I had to add overflowY: 'scroll' to the center panel.
Thev's answer is correct; however, it depends upon which version of Ext JS you are using (read below).
autoscroll means nothing to Ext JS, specifically. It becomes a new Javascript property entirely distinct from autoScroll due to the casing.
Watch out, though: Ext's 5.1 Documentation specifies that autoScroll is now deprecated and that scrollable (with the appropriate configuration) should be used, instead.
I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.
Here is the code in question:
var childPnl1 = {
frame: true,
height: 50,
html: 'My First Child Panel',
title: 'First children are fun'
};
var myWin = new Ext.Window({
height: 300,
width: 300,
title: 'A window with a container layout',
autoScroll: true,
items: [
childPnl1
],
tbar: [
{
text: 'Add child',
handler: function() {
var numItems = myWin.items.getCount() + 1;
myWin.add({
title: 'Child number ' + numItems,
height: 60,
frame: true,
collapsible: true,
collapsed: true,
html: 'Yay, another child!'
});
myWin.doLayout();
}}
]
});
myWin.show();
When I run it, I get the result presented in this fiddle:
http://jsfiddle.net/PHaP4/
When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.
Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?
The new public 4.0.7 release seems no to have this bug fixed yet.
Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:
[EXTJSIV-2547] - Child components not rendered.sized in initially
collapsed, uncontained Panel.
My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.
Is there a way to attach an OnClick event to a tab switch in EXTJS?
I make the grid like this:
var simple = new Ext.FormPanel({
labelWidth: '100%',
border:false,
width: '100%',
style:
{
height: '291px'
},
items: {
xtype: 'tabpanel',
activeTab: 0,
//labelWidth: 75, // label settings here cascade unless overridden
items:[{
url:'save-form.php',
title: 'Tab 1',
...
Thanks!
I added in a listener after the tabs were defined like this:
//define all tabs, and after the ] from the tab panel JSON:
listeners: {
'tabchange': function(tabPanel, tab) {
alert("tab changed");
}
}
This just alerts when the tab changed, which is sufficient for my purposes. I'm not sure though how to find out which tab is the current tab.
Hope this helps someone in the future.
There is a tabchange event that fires when the active tab changes: http://www.sencha.com/learn/Ext_FAQ_TabPanel
There is no event for tab click in TabPanel, however you can bind into click event on each tab. You can add custom event.
Following example help to you.
{
xtype : 'tabpanel',
items : [{
xtype : 'panel',
title: 'ABC'
},{
xtype : 'panel',
title : 'XYZ'
}],
listeners: {
render: function() {
this.items.each(function(panel){
// Added tabclick event for tabpanel
panel.tab.on('click', function(){
panel.addEvents('tabclick'); // addded event to panel
panel.fireEvent('tabclick', panel);
});
});
}
}
}
I have the following Ext.TabPanel:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
//layout: 'fit', // makes component disappear
viewConfig: {
forceFit: true //has no effect
},
// height: auto, //error "auto isn't recognized"
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
which looks like this:
How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?
Here's how the TabPanel is loaded into regionContent:
regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
autoScroll: true
});
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
replaceComponentContent(regionContent, modules_info_panel);
I see that the height is for this element in the dom is absolute (19px), where is that being set?
Addendum
McStretch, I tried your idea by putting layout: 'fit' in the tabs themselves but the line still is in the same place:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Section 1',
layout: 'fit',
html: 'test'
},{
title: 'Section 2',
layout: 'fit',
html: 'test'
},{
title: 'Section 3',
layout: 'fit',
html: 'test'
}]
});
Corrected:
Sorry Edward I was incorrect, you want layout: 'fit' within your regionContent Panel. The updated code changes are below.
Your initial idea of using layout: 'fit' is correct, but you have it in the wrong location. You want the following:
var regionContent = new Ext.Panel({
region : 'center',
autoScroll : true,
layout : 'fit', // added this line
items : []
});
Looks like you are within a border Layout, how do you define the panel that set the border layout ? The center region of a border layout should normally fill the space not remained by the other regions. I did a sample that looks like your layout: http://jsbin.com/ikazo3/6/edit
From the Border Layout documentation:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.
Any child items with a region of west or east must have width defined
(an integer representing the number of
pixels that the region should take
up).
Any child items with a region of north or south must have height
defined.
The regions of a BorderLayout are fixed at render time and thereafter,
its child Components may not be
removed or added. To add/remove
Components within a BorderLayout, have
them wrapped by an additional
Container which is directly managed by
the BorderLayout. If the region is to
be collapsible, the Container used
directly by the BorderLayout manager
should be a Panel. In the following
example a Container (an Ext.Panel) is
added to the west region: