I have a TabPanel as a main navigation view in the app. I would like to show a settings view inside the panel of the tabpanel keeping it docked bottom with no actived item, but the settings view is not defined as an item of the tabpanel because I don't want that it appears as a tab.
TabPanel is only showing a view that has been defined as an item. How can I do this?
If you want to have this settings panel stay docked no matter what, don't put it in the TabPanel. Put it in a layout - probably a vbox - that contains both the TabPanel (top) and settings (bottom).
However if you if you actually mean that you want to have it act as an item in the TabPanel, but not have the tab itself show up - you can pass a tab config and inside set hidden to true.
Related
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
I'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.
My tab bar with icons at bottom of the is not showing on all views... like I will go to the following view on button tap... there the tab bar is not showing... this is my onbuttontap function
myAccFunction: function() {
var MyUser=Ext.Viewport.add(Ext.create('Sample.view.Userinfo'));
Ext.Viewport.animateActiveItem(MyUser, this.getSlideLeftTransition());
console.log('UserinfoAction'); },
tab bar is showing when I go directly to the view using icon on the tab bar.. but when I go to the view using button tap tab bar is not showing ..
Viewport is the main view that takes usually full screen. Inside the viewport you normally have a panel with tabbars, navigation/title bar and if you want to present multiple pages there - you use cards layout. But the point would be - not to add these pages directly to the viewport, but rather add them to your main panel.
I have a viewport with a tab panel in it. I'm trying to create a standard panel dynamically and make it visible. I'm able to create the panel and isVisible() returns true after calling doLayout on the viewport but the panel is not visible on the screen. Is there any way to make it visible (i.e., to hover above the tab panel)?
If you create the panel as a child of the document body and position it absolutely it should show above your existing layout. You could also (more easily) use an Ext.Window to do this.
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