I put my carousel in container item.
In portrail mode, I set height 150, the images display fullscreen in carousel.
But when I change to landscape orientation, there are two white blank in two side of images.
I want change size carousel by setting another value of height. Can you help me solve this problem?
You need to catch the orientationchange event
(http://docs.sencha.com/touch/2.0.2/#!/api/Ext.viewport.Default-event-orientationchange) and upon catching it call a function which will resize your container.
You can try something like this:
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this);
Then in the handle function set your desired size of component:
handleOrientationChange: function(){
Ext.getCmp('idOfMyContainer').setWidth('480px'); //or setHeight() depending on the real problem
}
You could also set the width and height according to the real size of screen, which you can get by calling these methods. Note that orientation change doesn't affect the return values of these so you would need to switch it manually:
Ext.Viewport.getWindowWidth();
Ext.Viewport.getWindowHeight()
Related
I have been working on a Bottom Tab Navigator and try to make tab bar items being highlighted with a circle shape around the icon when they are selected. I tried to set the height and width inside tabBarItemStyle, however, only height changes while width does not change. Is there something else I missed? How can I set the width so that the highlighted part is in a circle shape?
Here is a demo of the tab bar I am working on.
https://snack.expo.dev/qLi7s9qAA
The issue is because the width value is being overridden by the containers flexbox property.
A quick easy fix is to use the maxWidth property instead of width in tabBarItemStyle properties.
There's a nice article here: https://mastery.games/post/the-difference-between-width-and-flex-basis/ that explains it.
When I press a button, my app displays a calendar (within a Dialog) that slides from the bottom of the screen:
I want the Calendar to occupy the whole width of the screen, but it shows some white padding on both sides and also on the top and bottom (It is white because the "Dialog" UIID has a white created image as background)
I have tried changing all the UIID related to Dialog: "Dialog", "DialogBody", "DialogTitle", etc. I set all margins and paddings to cero.
How can I get rid of that padding?
Try change both the DialogUIID and the UIID of the dialog. Also make sure your calendars margin values are set to zero. It could be that your calendar is too small. Try placing it in a table layout with 1 row and 1 column then in layout constraints set the width and height to 100%
Open up the Component Inspector tool and traverse the hierarchy. You will be able to see all the components and their UIID's within the hierarchy and you should be able to understand which one of those components contributes to the padding/margin.
I have an angularJs directive that create an ChartJs chart. I would like to resize the chart when the parent div is resized. According to documentation this is possible with:
.resize()
Use this to manually resize the canvas element.
This is run each time the browser is resized,
but you can call this method manually if you
change the size of the canvas nodes container element.
Here a plunkr: http://run.plnkr.co/KarokZXZ0hGNJpe9/
If you wanna see the files: http://plnkr.co/edit/1cx681?p=info
Try to click button, the chart does not change dimension. If you try to change window size, it's resized.
How can I obtain this without having to change window dimension?
I was having this same issue and used the Firebug extension in Firefox to see what ChartJS is doing when you resize the browser. I found that it is passing some parameters to the resize method. The following worked for me:
$scope.$apply();
chart.resize(chart.render, true);
You may not need the $scope.$apply(), but in my case I found it necessary since I am changing scope properties that cause the canvas size to change.
I have a toolbar inside a simple container. They get rendered on a window's div. When I resize the window the toolbar remains stationary. If the window gets smaller the toolbar starts disappearing (overflowing outside). If the window gets bigger the toolbar stays in its position instead of trying to remain to the far right where it started. I've tried the resize and enable overflow configs but nothing seems to work. I'm thinking that its positioning through the div might be the problem but I'm not sure how to test or fix that. Any ideas?
Some sample code:
var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>
Check this function in the EXtJs docs
onWindowResize( fn, scope, [options] )
Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers.
Example code looks like the below(I guess you have to write it in your afterRender .(You have to add this event and then fire it.))
Adding the event in the init component looks like below
this.addEvents('setInboxTileSource');
Firing the event in the afterRender looks like below
Ext.EventManager.onWindowResize(function (w, h) {
this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});
You have to listen the event and set your width and height for your toolbar.
listeners: {
BROWSER_WINDOW_RESIZE: this.handleResize,
scope: this
}
handleResize:function(){
this.setHeight(Ext.getBody().getViewSize().height - 270);
this.setWidth(Ext.getBody().getViewSize().width- 100);
}
Hope this helps you...
Toolbars should not be configured that way. If you have a window, it should be configured this way:
Ext.create('Ext.window.Window',{
title:'some title'
,width:400
,height:300
,tbar:[{
// here come toolbar items
}]
});
For more examples see http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html and other toolbar examples.
I am migrating an application from ExtJS 3.x to v4 and have been having some troubles with the TabPanel's now that the "autoHeight" property has been removed. I know that if you do not explicitly define a height for the panel it is assumed to be "auto height", but that is only true to a degree.
In ExtJS4, a tab panel with no height set will still have inline css height values set on the tab panel's containing divs, and those heights are calculated from the initial height of each tab item's content. And yes, if you update the height of any child components of the tab items, the height of the tab will be recalculated to fit it, or if the tab contains raw HTML and the tab's update() method is used to change that content, its height again, will be adjusted to fit.
Where the issue is, in my application anyway, is that I update the raw HTML content of those tab's using methods other than those in ExtJS's framework, such as jQuery.html(). Since the tab panel is not being notified of this change to the content, it does not recalculate the height value of the tab.
To get around this all I want to do is ensure that the tab panel's containing elements always are set to height:auto when rendered, re-rendered, or anything else. I'm assuming to accomplish this I would need to extend the TabPanel, but i don not know where to start as far as what methods to override, ect. Any thoughts?
This is what I ended up doing. It's definitely not ideal, pretty hacky but it seems to work ok. Maybe someone will better see what I'm try to accomplish now, and can come up with a better implementation :-)
Ext.define('Ext.tab.AutoHeightPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.autoheighttabs',
constructor: function(cnfg){
this.callParent(arguments);
this.initConfig(cnfg);
this.on('afterlayout', this.forceAutoHeight, this);
this.on('afterrender', this.forceAutoHeight, this);
this.on('resize', this.forceAutoHeight, this);
},
forceAutoHeight: function(){
this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
this.items.each(function(item, idx, len) {
if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
});
}
});
You may want to add a 'margin-bottom' value to the style config of your tab panel to prevent content from butting up against the bottom of the panel.
The catchy part is making ExtJS aware that the component is updated. You need to basically, recalculate the component layout. You can use the method doLayout( ) available with the Panel class. By calling this, you are forcefully asking to the layout to be recalculated and refreshed. I think this should help you out.