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.
Related
I have designed a tool bar where buttons are there,. My requirement is initially it should display one icon and on mouse over the icon should change. For this i have given a class to the button and applied css for this and for hover property applied cssclass:hover with different image. For Example
.cssclass {
background-image: someimage.jpg
}
.cssclass:hover {
background-image: someotherimage.jpg
}
By this in all browser (chrome and IE) it is working but in Firefox the image is not changing.
Can anybody have any idea how to achieve this?
Thanks
Tapaswini
If this is related to ExtJS 4, then you should be adding a overCls like so:
Ext.create('Ext.Button', {
text: 'Click me',
cls: 'normalcls',
overCls: 'someovercls', // right here!
renderTo: Ext.getBody(),
handler: function() {
alert('You clicked the button!');
}
});
Depending on the ExtJS version, it may apply a prefix of 'x-' to the class name.
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.
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.
I would like to use an actionsheet but am unclear where to place it. I have tried adding it to a button event function but it doesn't show (the modal screen does however). I get a message about ActionSheet#show showing a component that currently doesn't have any container. Please use Ext.Viewport.add() to add this component to the viewport. Not sure how to do that - using Ext.Viewport.add() doesn't work for me - i may be because of my layout which is:
I have a viewport controller/view which is a card layout. When I click a button I have a function in the viewport controller that loads a new controller/view card in the viewport. The actionsheet is in one of these cards. The app is to big to post so hopefully it makes sense.
I have tried adding the actionsheet in my view items array but do not know how to make it show - making a reference to the xtype actionsheet doesn't return an object with a show() method it seems.
Edit: after more experiments it seems the issue is that I am placing it inside of a card - the card layout container has a relative position and the actionsheet absolute - somehow this is causing the actionsheet to go off screen. Setting card container to absolute fixes it but now I have problems with navbar positions. Suggestions?
So a bit stuck...
This is what you need to do to show your action sheet :
var actionSheet = Ext.create('Ext.ActionSheet', {
items: [
{
text: 'Delete draft',
ui : 'decline'
},
{
text: 'Save draft'
},
{
text: 'Cancel',
ui : 'confirm'
}
]
});
Ext.Viewport.add(actionSheet);
actionSheet.show();
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.