I have hbox layout, where in the left it shows tree and on the right
it shows tabs.
But the problem is I should not use hbox, but I should use border
layout.
When I use two column layout code is breaking.
Providing my code with hbox layout.
Can you guys tell me how to make the below code work in border
layout.
https://docs.sencha.com/extjs/4.1.3/#!/api/Ext.layout.container.Border
I am trying to change border in the below part of code
var createTreeAndContentPanel = function(tree) {
var retval,
contentPanel;
According to docs, if you are using a "Border" layout, at least one of the child panel has to use region : "center".
So you need to apply region : center on your panel containing tabs, and region : west to your panel containing tree.
Finally you need to add these 2 panels inside a parent panel with a layout: border
From doc :
Any Container using the Border layout 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.
Related
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I'm stuck trying to make my treepanel scrollable in both ways.
Heres my code: https://fiddle.sencha.com/#fiddle/13cb
I could set scrollable: true in my wrapping panel, but this would not solve the horizontal scrolling problem.
Furthermore with this approach the combobox scroll up too. But I want only the treepanel to scroll horizontally and vertically. How can I achieve that?
Thanks in advance
I am not sure whether we can achieve exactly what you want. But let's try.
To get the vertical scrollbars working, you have to define a height on the treepanel. As of now, the treepanel resizes dynamically to the height of its content, since no height was defined for it. Since even the parent panel has no height defined, giving the height as percent also won't work, but e.g. height:500 would. If you require the layout to float around when the browser window is resized, have a look at the vbox or border layouts for the parent panel.
To get the horizontal scrollbars working, you have to know how grid columns work. You have not defined a columns configuration, which makes the treepanel assume that you want a single column taking up 100% of the width of the treepanel:
if (!me.columns) {
if (me.initialConfig.hideHeaders === undefined) {
me.hideHeaders = true;
}
me.addCls(me.autoWidthCls);
me.columns = [{ // define columns configuration with a single column
xtype : 'treecolumn', // the column should be a treecolumn
text : 'Name',
flex : 1, // and take up 100% of the width of the panel
dataIndex: me.displayField // and use the displayField as
}];
}
You cannot make columns take up the width required by their content automatically. But you could e.g. listen to nodeexpand and nodecollapse events and call column.autoSize().
I would like to create my page layout using ONLY programmatic syntax but I'm not able to insert a Border Container with a left, center and right Content Pane, into the top pane of the main layout (the same goes for the bottom one).
Every time I try to use a Content Pane as a parent, I break the main layout.
I know how to create this layout in a declarative way (in this code the Accordion Container is inside the right pane of the main Border Container).
But how can I create a nested Border Container with its children inside a Content Pane using only programmatic Dojo?
(Here the code is slightly different with the Accordion Container by itself with no splitter created in programmatic way)
Any help would be greatly appreciated.
Thanks in advance,
mic
You shouldn't nest a bordercontainer in a contentpane that's a child of a bordercontainer. That's kind of redundant since bordercontainer is a pane itself. If you want to nest bordercontainer can add it directly as a child of the parent container:
var main = new BorderContainer({
'design': 'headline',
'id': 'main'
});
var top = new BorderContainer({
'design': 'sidebar',
'region': 'top',
'id': 'top',
'splitter': true
});
main.addChild(top);
Here's a working example on Plunker: http://plnkr.co/edit/3JR6NI?p=preview
I am using ExtJs 4.1.1. I am using body layout, the North region of which has a top toolbar. The top toolbar has a splitButton on it's extreme right.
Problem: Sometimes when the menu item has long text the container of menu items spills out of the body and it appears truncated.
I want to ensure that the menu text and the entire menu container is always visible. How can I achieve this?
Update: Can I configure the menu to unfold leftwards instead of right? This will take care of this particular situation.
On the menu component, try adding:
listeners: {
afterrender: function(component) {
// Hide menu and then re-show so that alignment is correct.
component.hide();
component.show();
}
}
See here
I've got two formpanels I need to stack vertically. When I put both in a panel with layout 'fit', they render on top of each other. If I use a VBox, flex:1 on both splits them by percentage, when I need one form after the other. What's the right way to do this?
Do not put any layout and they will fit themselves automatically. By default, a container has AutoContainerLayout. Add vertical scrolling only to the parent container