In my application there are two panels -A and B.
I am using "border" layout, the panel A is in center region and panel B is in south region which have height 200.
The "panel A" have lot of items like grid, toolbar etc. also "panel B" have some items.
My question is, How can I exchange the contents of A to B and B to A.
Note: I am using "Extjs 3.2"
Regards,
Mohammed Shafeek
Panels in center and south region of border layout have to be wrapped by container component. Then you can easily get content of each container, clear the container and add to it content from second container.
So function for switch panels should looks like this:
function switchPanels() {
southContainer = Ext.getCmp('southContainer');
centerContainer = Ext.getCmp('centerContainer');
southContainerItems = southContainer.items.getRange();
centerContainerItems = centerContainer.items.getRange();
southContainer.removeAll(false);
centerContainer.removeAll(false);
for (var i = 0; i < southContainerItems.length; i++) {
centerContainer.add(southContainerItems[i]);
};
for (var i = 0; i < centerContainerItems.length; i++) {
southContainer.add(centerContainerItems[i]);
};
centerContainer.doLayout();
southContainer.doLayout();
}
For complete live example look at this fiddle: https://fiddle.sencha.com/#fiddle/2iv
Related
I'm trying to dynamically generate 2 FlowLayoutPanels with a couple of buttons.
private void DrawButtons() {
tlpButtons.Controls.Clear();
foreach (var type in Globals.ThisAddIn.TicketTypes.OrderBy(x => x.Name)) {
tlpButtons.Controls.Add(new Label() { Text = type.Name, Dock = DockStyle.Fill });
var container = new FlowLayoutPanel() { Dock = DockStyle.Fill, AutoSize = true, AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowOnly, BackColor = Color.Yellow, FlowDirection = FlowDirection.LeftToRight };
foreach (var skill in Globals.ThisAddIn.Skills.OrderBy(x => x.Name)) {
container.Controls.Add(new Button() { Text = skill.Name });
MessageBox.Show(tlpButtons.RowCount.ToString());
}
tlpButtons.Controls.Add(container);
}
}
This is what it outputs:
Let me explain what you're seeing.
I have TableLayoutPanel tlpOuter (pink) with 1 column (100%) and 2 rows. Row 1: AutoSize, Row 2: 100%
In the first row I have another TableLayoutPanel tplButtons (orange) with 1 column (100%) and 1 row (AutoSize, GrowStyle: Rows)
Now I can't figure out why the 2nd FlowLayoutPanel (yellow) is so large. It shouldn't be. It is exactly the same as the first panel (it's in a foreach) and yet, it adds all this whitespace (yellowspace).
What I found, when debugging line-by-line, is that the second panel grows as the buttons are added (as if it thinks they get a new line instead being placed side-side if it can) while it does not do that while adding the buttons to the first panel.
UPDATE:
So I removed the docking from the flowLayoutPanels and I can now see the problem is actually the TableLayoutPanel tlpButtons!
From what I can gather, it is sizing the Table as if the controls inside had no docking. Look:
So the question remains, why does this TableLayoutPanel not account for the docking of the FLP's?
For my Angular JS grid work, I'm using ui-grid rather than ng-grid as ui-grid is meant to be the new version which is purer Angular.
I've got a grid that I'm populating with a http response, and I'm able to select a row (based on finding the record matching a $scope variable value) using the api.selection.selectRow method call.
What I need to do next is scroll the grid to that record.
There's an existing stack overflow question along the same lines that is for ng-grid and the answer to that refers to undocumented features which are not present in ui-grid so I can't use that approach.
The closest I've got is finding $scope.gridApi.grid to get a reference to the actual grid itself but looking through the properties and methods in the Chrome debugger doesn't show anything that sounds like it could work.
You can use the cellNav plugin. You should already have a reference to your row entity from the selection. The documentation is here.
gridApi.cellNav.scrollTo(grid, $scope, rowEntity, null);
I managed to hack together something that works pretty well but it's a bit dodgy and could probably be cleaner with a bit more Angular/jquery understanding.
I used the browser dom explorer to find that the scrollbars have a css class that we can detect to find them and then set the scroll properties on them to have the grid scroll (the grid and scrollbars are separate divs but their properties are bound so changing one updates the other).
It doesn't completely work for scrolling to the last row of the grid. This could be a timing issue, I've noticed when using breakpoints that the grid comes on screen a little larger and then shrinks down to it's final size. This could be messing with the scrolling values.
The first loop finds the height of the grid by adding up the rows, and the y position of the row for my data object (project), then we find the scrollbar and set it's scrollTop, trying to centre the row on screen without going out of bounds.
var grid = $scope.projectsGridApi.grid;
// var row = grid.rowHashMap.get(project.$$hashKey);
var found = false;
var y = 0;
var totalY = 0;
var rowHeight = 0;
for (var rowIdx in grid.rows)
{
var row = grid.rows[rowIdx];
if (row.entity.$$hashKey == project.$$hashKey)
{
found = true;
rowHeight = row.height;
}
if (!found)
{
y += row.height;
}
totalY += row.height;
}
// now find the scroll bar div and set it's scroll-top
// (todo: checking if we're at the end of the list - setting scrollTop > max means it doesn't work properly
var grid = $scope.projectsGridApi.grid;
// annoyingly this is nastily coded to find the scrollbar and isn't completely right
// I think the grid is a little taller when this is called, then shrinks
// which affects what the maximum is (so we might not always be able to put the selected item on screen if it is the last one).
var holderDiv = $('#projectsGridHolder');
if (holderDiv)
{
var scrollBarDivs = holderDiv.find('.ui-grid-native-scrollbar');
if (scrollBarDivs)
{
for (var scrollBarDivIdx in scrollBarDivs)
{
var scrollBarDiv = scrollBarDivs[scrollBarDivIdx];
var scrollBarDivClass = scrollBarDiv.className;
if (scrollBarDivClass)
{
if (scrollBarDivClass.indexOf('vertical') != -1)
{
var scrollHeight = scrollBarDiv.scrollHeight;
var clientHeight = scrollBarDiv.clientHeight;
if (rowHeight > 0)
{
y -= (clientHeight - rowHeight) / 2; // center on screen be scrolling slightly higher up
}
if (y < 0) y = 0;
else if (y > totalY - clientHeight) y = totalY - clientHeight;
scrollBarDiv.scrollTop = y;
}
}
}
}
}
Now I've a problem , because I want to create a number of pages that I want populate with a Grid and into the Grid. I want to create a series of Button.
How can I create a Grid into a Page?
I'm tried with following code:
SortedList<string, Page> pageList = new SortedList<string, Page>();
for (int i = 0; i < 3; i++)
{
pageList.Add(string.Format("Page{0}", i), new Page());
}
Grid LayoutRoot = new Grid(); // ???????
What I can do to insert a Grid into a Page? I want that refer to Grid for example:
pageList["Page2"].LayoutRoot;
Thanks.
I'm trying to implement in WPF tab that behaves like the one in IE9.
When you open in the last many tabs, they are getting smaller and also to buttons are showen in the left and in the right, for scrolling between the tabs.
Any help would be very appritiated.
create two main tab (main tabs are these two tab in answer) like this
<TabItem Header="«" Name="LeftTab"/>
<TabItem Header="»" Name="RightTab"/>
set the visible of them to hiden. now add all tabs you want(with c# code or xaml) but dont forget set tag for all tab you add like below
<TabItem Header="new" Name="tiNew" Tag="1"/>
<TabItem Header="edit" Name="tiEdit" Tag="2"/>
...
now when tabs count go more than normal and you cant show all in 1 page Do Under :
1.change visible of two main tab..
bool is_Left_Right_tabVisible = false;
if (tabControl1.Items.Count > 8)
{
LeftTab.Visibility = System.Windows.Visibility.Visible;
RightTab.Visibility = System.Windows.Visibility.Visible;
is_Left_Right_tabVisible = true;
}
else
{
LeftTab.Visibility = System.Windows.Visibility.Hidden;
RightTab.Visibility = System.Windows.Visibility.Hidden;
is_Left_Right_tabVisible = false;
}
2.hidden all extra tab and only show some of them (example : show two main tab And show tab with tag 1-8)
3.if user click on main tabs (left or right tab) hidden one tab and visible another tab (example: you have lefttab-1-2-3-4-righttab when user click on right hidden NO 1 and vsible No 5 And focus on No 5)
private void RightTab_MouseUp(object sender, MouseButtonEventArgs e)
{
if (is_Left_Right_tabVisible)
{
TabItem ti = sender as TabItem;
if (ti.Name == "RightTab")
{
//find right tab must set to visible
int Showtabindex = 0;
var t1 = tabControl1.Items.OfType<TabItem>().Where(x => x.Visibility == System.Windows.Visibility.Hidden);
foreach (var item in t)
{
if (((int)item.Tag) > Showtabindex)
Showtabindex = (int)item.Tag;
}
//find left tab must go invisible
int Hiddentabindex = Showtabindex;
var t2 = tabControl1.Items.OfType<TabItem>().Where(x => x.Visibility == System.Windows.Visibility.Visible);
foreach (var item in t2)
{
if (((int)item.Tag) < Hiddentabindex)
Hiddentabindex = (int)item.Tag;
}
(tabControl1.Items[Hiddentabindex] as TabItem).Visibility = System.Windows.Visibility.Hidden;
(tabControl1.Items[Showtabindex] as TabItem).Visibility = System.Windows.Visibility.Visible;
//you can create drag and drop for tabs then user can change tab TAG
}
else if (ti.Name == "LeftTab")
{
//.....
}
}
}
i know it was abit hard but when i create a good user control i feel good .
but dont forget in this usercontrol we use tabcontrol we can create a custom tab control from first and dont use this tabcontrol.
you also can create animation for tabs when those change opacity and move animation would be good check this post
Once Controls have been added to a WPF Grid, is there a way to programmatically access them by row and/or column index? Something along the lines of:
var myControl = (object)MyGrid.GetChild(int row, int column);
... where GetChild is the method I wish I had!
There isn't a built-in method for this, but you can easily do it by looking in the Children collection:
myGrid.Children
.Cast<UIElement>()
.First(e => Grid.GetRow(e) == row && Grid.GetColumn(e) == column);
This answer will help you
int rowIndex = Grid.GetRow(myButton);
RowDefinition rowDef = myGrid.RowDefinitions[rowIndex];
The Children property of the grid object will give you a collection of all the children of the Grid (from the Panel class).
As far as getting the coordinates in the grid, look at the static methods in the Grid class (GetRow() & GetColumn()).
Hope that sets you off in the right direction.
System::Windows::Controls::Grid^ myGrid = nullptr;
System::Windows::Controls::UserControl^ pUserControl = nullptr;
myGrid = m_DlgOwnedObjAdmin->GrdProperties;
if (myGrid->Children->Count > 0)
{
pUserControl = (System::Windows::Controls::UserControl^)myGrid->Children->default[0];
if (pUserControl != nullptr)
{
if (bValue == true)
pUserControl->Visibility = System::Windows::Visibility::Visible;
else
pUserControl->Visibility = System::Windows::Visibility::Collapsed;
}
}
you could just give your grid column/row a name
<Grid x:Name="MainGridBackground" Grid.Column="0"/>
and access it programmatically by calling it and using "."
MainGridBackground.Background = canvasUCInstance.rectanglePreview.Fill;