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
Related
During some web scraping with Selenium WebDriver with Chrome, I encountered a page that has fixed regions (they do not scroll but stay fixed relative to the window). Oftentimes when I request that the web browser scroll to a particular control using Actions.MoveToElement() , the element winds up being obscured by one of the fixed regions. When Selenium clicks on an obscured element, the fixed region steals the click and my control does not get clicked.
The fixed regions have a class=SomeFixedPositionStyle. To get around this, I'd like to have Selenium inject Javascript code to go through each style on the page and modify it to set position:static if it's position:fixed. How can I do this?
I chose to not modify the class attribute of the fixed elements because the act of scrolling the page resets the class attribute to the original value that has the fixed style.
For example, take a look at http://www.ishares.com/us/products/239572/ishares-jp-morgan-usd-emerging-markets-bond-etf . As you scroll up and down, do you see the bands on the top and the bottom are fixed?
When I try to scroll to element //*[#id="holdingsTabs"]/ul/li[3] (this is the "All" link in the "Holdings" section, it winds up underneath the lower fixed region and cannot be clicked on.
You can inject a style rule into the page
var sheet = document.styleSheets[0];
sheet.insertRule("SomeFixedPositionStyle { position: static!important; }", 1);
What usually helps in situations like this is scrolling into view of an element:
driver.executeScript("arguments[0].scrollIntoView();", element);
You may also get rid of the "stickiness" by dynamically changing the "position" of the wrapper:
var wrapper = driver.findElement(webdriver.By.css('.sticky-wrapper'));
driver.executeScript("arguments[0].style.position = null;", wrapper);
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.
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 have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.
This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.
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