By default Ext.toast shows messages at the bottom of the screen. However, this is not very practical because toast might not be visible when virtual keyboard is shown.
How can Ext.toast be configured to pops up at the top of the screen?
You can use aligment property:
Ext.toast({
message: "Hallo Welt!",
alignment: 'tc-tc',
timeout: 2000
});
Aligment values are described here.
Related
How do I control if the hovering navigation menu appears when the data studio dashboard that I have created enters presentation mode? There are already in-dashboard controls and this menu gets in the way, more than it helps.
Unfortunately, there is no way to hide this control box. However, if they bother you, I think you do not really need presentation mode.
You can mimic the presentation mode, hiding Header, Navigation Bar and setting the window to full screen.
In File > Theme And Layout > Layout > View Mode:
Select "Initially hidden" for Header visibility;
Select "Hidden" for Navigation type;
Select "Fit to width" for Display mode;
Un-select "Has margin".
Then, just set your browser to fullscreen during visualization (F11 on Windows, or just expand the window in MacOS). This way you get the same result, without the presentation controls.
I encountered this specific issue with Material's md-dialog:
I click on any of the text boxes on the web page, which brings up
the mobile keyboard, this is on IPad 9.3.2.
after typing, I then either minimise the keyboard or leave it on
and click a button which shows a md-dialog as modal.
the modal shows up, which grays out and blocks the whole page.
but the dialog box appears outside of the screen, i.e. you cant see
it, you cant touch it, you cant close it.
now if I til the screen to change the orientation from horizontal to vertical or vise-versa, the screen resizes and the dialog is shown properly.
so as soon as i use the keyboard the immediate dialog show will be located incorrectly.
I am wondering if any one had this problem before, and if you know how to solve this issue?
Thanks a lot
I had a similar issue and resolved it by wrapping it in a timeout:
var confirm = $mdDialog.confirm()
.title('Test')
.content('This is test content')
.ariaLabel('Test')
.ok('Got it!')
.cancel('Cancel');
$timeout(
$mdDialog.show(confirm).then(function () {
// Do Something
})
, 0);
We have two inputs on login screen. They are working fine in simulator but on Android device they are changing height randomly when being focused.
What can be the reason of this?
EDIT, more details on screenshots
Loaded screen:
After gaining, losing focus on text fields:
Component tree inspector:
On android when a the Keyboard is showing the Form is getting a size changed event which cause the screen to re-layout.
Make the TextFields parent Container scrollable-Y it will cause the scroll to grow instead of resizing the components inside
I need to create a Alert in Extjs plain with a text , but when we use Ext Message Box we get a header with close option and buttons. Please help me to alert the user only with a text message and should fade off after some seconds by default.
Have a toast! It's available since ExtJS 5.
Use header: false to hide the header. The autoCloseDelay is set in milliseconds, and defaults to 3000.
Example:
Ext.toast({html: 'Some alert here.', header: false, autoCloseDelay: 5000});
Edit: For centering the toast in ExtJS 6 and 5, see this fiddle:
https://fiddle.sencha.com/#fiddle/12ua
Instead of centering a toast (since you will need to do more hacking to not break toast like the other answer), why not extend Ext.window.MessageBox and handle it yourself? It does everything you want except it shows a header. Here's a fiddle example: https://fiddle.sencha.com/#fiddle/12ue
So now all you have to do is use it like:
Ux.Msg.alert('Welcome to Sencha Fiddle!');
I have a extjs panel rendered inside a div like this:
panel = new Ext.Panel({
layout : 'fit',
renderTo: 'my_div',
monitorResize: true, // relay on browser resize
height: 500,
autoWidth: true,
items : [
centerPanel
],
plain : true
});
After the page has loaded the panel is empty, but when I resize the browser the contents appears by magic!
I think the data has not finished loading when the panel is rendered the first time.
How can I get the contents to show without resizing the browser?
I suspect the issue is that you need to explicitly cause the panel to be rendered. After creating the panel, make the following call:
panel.doLayout();
Sencha documentation says "A call to this function is required after adding a new component to an already rendered container, or possibly after changing sizing/position properties of child components."
Any reason why you're nesting a panel within a panel? Seems like centerPanel could be directly rendered to your containing div. Also, the issue is most likely how you have centerPanel configured, or how you're loading it, neither of which you're showing here. You should not need to call doLayout() manually in this case, it's probably an issue with how your components are configured.
bmoeskau is right, also my guess is you have an async server request that loads your data (store.load, ajax, etc) -you could call the layout after that store loads by regestering a callback function (see sencha docs)
tedder suggestion helped me, but in itself did not solve a similar problem I had: adding one Ext.draw.Component I got a blank panel.
The curious part is, the panel looked white, but the DOM components were all there and I could inspect them using e.g. Chrome developer tools.
I got it working by using a workaround. I added those 2 instructions after the call to this.add(component):
this.setVisible(false);
this.setVisible(true);
Hiding the panel and then making it visible again, in some obscure way, does the job.