I have a Ext.panel.Panel within a Tab Panel. Tab Panel is again within a window. I have set the following configs for Ext.panel.Panel
border : false,
collapsible : true,
collapseDirection : 'left',
width : 300,
layout : {
type : 'vbox',
align : 'stretch'
},
On clicking the Toggle button in the Ext.panel.Panel, it collapses, but the toggle button disappears which doesn't allow me to expand the collapsed panel again. On resizing the window, the toggle button appears back.
Help is really appreciated.
Try the solution given in this thread, http://www.sencha.com/forum/showthread.php?175371-Panel-Disappears-When-Collapsed.
The main problem is that you have no layout declared for the panel which acts as your center region.
This also seems to be suggested by this thread http://www.sencha.com/forum/showthread.php?149446-Rendering-panel-collapsed-makes-it-disappear.
Related
I have a Window, and when i click on a button i will pop open it (as a pop up). Here's my code and it works fine.
var w= Ext.widget('mywindow');
w.show();
Now, i have a tab bar panel, where when the user clicks the button i need to open it (But, not as a Pop-up). It should occupy the whole screen (Replace the previous view). How should i do this ?
The definition of my tab panel
Ext.define('App.view.TabPanelClass', {
extend: 'Ext.tab.Panel',
alias: 'widget.persontabpanel',
.....
UPDATE
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [
{
xtype: 'panel',
items: { xtype: 'firstPanel' }
},....
You can use card layout to replace one view with another. Alternatively you can create a window with maximized:true config.
The normal way to go about this is to put the tabpanel inside of a viewport and give it a layout: 'card' config to cover any other views, a layout: 'fit' config would work better if this is the only view you have in the viewport. Windows aren't children of the ExtJS viewport so a window and a tabpanel would only be one item in the viewport.
A viewport will keep it's contents sized to match the browser window size even when it gets resized. See the docs on viewport here.
I'm using a navigation.View to hold a list, so I can easily implement a detail view which appears when someone clicks on an item. I also have a search bar docked at the top of this list view, but what I'd like to do is hide this by default and have a button within the titlebar which would allow the user to show/hide the search bar.
I've tried using the following code to achieve this:
navigationBar: {
items: [{
xtype: 'button',
align: 'right',
text: 'Search'
}]
}
but this causes the button to display on every page I push into the navigation view, whereas I want the button to only appear on the root list page. Is this even possible?
Any help is appreciated.
In this case, you had better not use Ext.NavigationView. Just use normal views which toolbars.
But if you still want to use navigation view, here maybe a hint to start with:
Add that button to your navigation bar and set config hidden: true by default.
Listen for an event which can observe when your active view is changed. This may vary depending on your app structure.
When your "special" view is activated, show that button to the navigation bar, and when it is deactivated, hide that button.
In Sencha Touch 2, the TabPanel is really great when you've got 5 or less tabs. Any more than that, and it doesn't fit on a phone in portrait mode (see this fiddle).
What are my options? Is there any way to make the last button pop up a sub-TabBar? or can I put an arrow on the right end of the TabBar that makes the bar slide over for a new one? or can I make the TabBar scrollable?
You can make the tab bar scrollable using the following config:
tabBar: {
scrollable: {
direction: 'horizontal'
}
},
Here's the updated fiddle.
I have a little problem with Dijit.Dialog.
I have some dialogs, which have a small size, and they are displayed in the center of my screen, so it's ok.
But I have also a Dialog with a height of 550px, and it's not displayed in the center of my screen but in the bottom : the browser scroll to the bottom and then displayed it.
I create the dialog simply by:
var dialogLodge = new dijit.Dialog({
id : "dialogLodge",
style : "width:700px;height:550px",
title : "Create lodge",
href : "/lodge/create.html",
preload : true,
draggable : false,
onCancel : function(){
…
},
onLoad : function(){
…
},
});
dialogLodge.startup();
So I don't know why it's not displayed at the center.
If anyone has an idea,
Thanks.
PS : I use Dojo 1.6.1 and I tested it with the 1.7 too
Creating a dialog puts a dom node in your page with css styles that hide it (display:none; visibility:hidden).
In order to make your dialog visible, you should use dialog.show().
You can use dialog.hide() to make it invisible again (and it will remain available in case you want to show it back).
I have an application where the UI components are added to a formField dynamically. As the UI controls to placed on screen is decided run-time depending on server response, sometime the screen gets filled with multiple components. As the screen elements are added, i required to scroll through the screen to select the fields place to the end of the screen. But when i scroll the form bounces, but the scroll is not happening the way expected. Now i am not able to select the UI controls placed to the end of the form.
The screen has 3 components, Title Bar, Button Dock bar, and a form field. Here is the code i have used for form field
var formBase = new Ext.form.FormPanel({
scroll: 'vertical',
xtype: 'form',
ui: 'round',
// i have added the items and it shows on UI, As things are dynamic i cant place it here
items: [{}];
});
Help me to fix the same.
Try this this should work.
Ext.apply(this, {
scroll: 'vertical',
pinHeaders: true,
dockedItems : [{}],
items : []
});
MyApp.views.MyScreenScreen.superclass.initComponent.call(this);
},
It happens because of the form height. Add height property to the object passed to the FormPanel. Something like this:
height: Ext.Viewport.getWindowHeight()-(the height of other compenents like toolbar)
Example for this would be:
height: Ext.Viewport.getWindowHeight()-50
Adding height config with some value might solve the issue.