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.
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.
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 was wondering if it's possible to use custom animation in Sencha Touch 2. If I've done my homework correctly, then Sencha Touch by default does not provide any help with animation apart from the fade-in/out, sliders and other simple UI elements.
One would have to use CSS3 for animations, right? I wan't to use an animation (let's say something like this : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-timing-function3) in my app.
I wan't the animation to load just after the initial loading screen but I'm not sure how to do that. Can someone help me out with the code? ELI5 please,since I'm new to ST, CSS and HTML5.
In your launch function, you need to define you Ext.Anim like so :
anim = Ext.create('Ext.Anim',{
autoClear: false,
from:{'left':'0px'},
to: {'left':'100px'},
delay: 1000,
duration: 1000
});
Then you can run this animation on any component (here on a Ext.Panel) like so :
anim.run(this.getView().element);
Hope this helps
Ok #user1324579 this steps are:
Create a CSS3 class
Create one panel Sencha
On html tag put class CSS
var panel = new Ext.Panel({
id: 'yourIdPanel',
fullscreen: true,
style: 'background-color:#ffffff',
html: '<div class="animation_css_class"></div>'
})
To load you just after the initial loading screen with id panel above or,
var mainPanel = new Ext.Panel({
id:'pnlInicio',
fullscreen:true,
items : [panel],
dockedItems: []
})
I hope these helps. :)
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();