In ExtJs4 Layout Examples how do they switch right panel content when user clicks on menu items? Are there any examples with code samples?
I want exactly the same feature.
They create content panel with layout 'cards', add all examples as individual panels in to it, and then make them visible when you click through them. Check the source code - it's pretty obvious.
Related
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I was wondering if anyone knows how to reorder the tabs in a tabpanel programatically. I've been able to reorder them using the drag-drop plugin, but I'd also like to allow for moving tabs using keyboard shortcuts.
Unfortunately, everything I've tried has failed:
Neither:
tabpanel.move(newindex, oldindex)
nor
tabpanel.items.remove(1)
tabpanel.items.insert(2)
has worked. Even when I try to call layout updates afterwards..
tabpanel.doComponentLayout();
tabpanel.doLayout();
tabpanel.updateLayout();
Any help would be greatly appreciated!
Thanks!
You are moving the items around, but the tabs of a tabpanel consist of two different things: An item, which is in a card layout, and a tab, which is inside a hbox tabbar which is a dockedItem at the top of the tabpanel. What you want to move is the tab, not the item:
tabpanel.down('tabbar').move(0,1);
I have a series of panels that work with tabs. I'm using aria-controls, aria-selected, role="tablist", role="tab" on the tabs and aria-labelledby, aria-hidden and role="tabpanel" on the panels - all seems good.
However, below a certain screen width I want the same elements to be collapsible, expanded and collapsed by buttons at the top. Obviously I need to hide the tabs list, and include buttons at the top of each panel which are hidden above the breakpoint. I would use aria-controls for the buttons - but there seems to be a few overlaps / clashes between the accessibility markup for the two layouts.
Is there a right way of doing this, or is it simply the case that I should ignore accessibility markup for the "mobile" version, assuming it's irrelevant to screen readers? Are there scenarios where the accessibility markup is necessary for responsive layouts?
The correct solution is to simply show the tabs as buttons (i.e. change the styling) in the small screen layout but leave the markup exactly the same. If you want to have multiple sections expandable simultaneously, then you can use aria-multiselectable (which essentially turns tabs into accordions).
Do not ignore accessibility for mobile. Mobile is as easy to make accessible as the desktop version and is becoming the primary way that users access many web sites and applications.
When I expand a collapsible panel within a layout it compresses the content of the panel next to it. I'd like instead to shift the content of the panel over so it is as if the collapsible panel is moving the content of that panel over to make room for it when it expands. I'm not looking for any animation effects, just the structural behavior of the content shifting. This demo (using jquery) illustrates the behavior I'm trying to achieve. http://srobbin.com/blog/jquery-pageslide/ Can I do this in Ext?
More info is in the ExtJs Forums: http://www.sencha.com/forum/showthread.php?43120-Ext.layout.SlideLayout-Sliding-Card-Layout-(Shift-Fx)/
I Have a Silverlight page with a header menu, a navigation frame, and a footer. In my header menu I want to put a drop down menu, but when I open the menu, it goes behind the frame.
Is there a way to put it forward? Canvas.ZIndex makes no difference at all.
For me to get this to work, the navigation frame had to be in a grid that was a child of the grid my menu was in.
Like so:
Grid "FullPageGrid"
Grid
Menu Stuff
Grid
Navigation Frame
Not sure why that works, but it does.
You can use this free opensource menu for this purpose:
www.sl4popupmenu.codeplex.com
It brings the content on top by placing in a Popup control.
If you can place the drop down menu later in the XAML, it will appear above.
So you want to have this hierarchy:
Grid
Grid
Your navigation frame
Grid
The menu