This Ext JS package is an easy way of showing alerts like Bootstrap alerts.
Clone this repository to the packages/local folder of your workspace/application.
Modify your app.json
file and add include the package in the requirements:
"requires": [
...,
"ext-tip-toast"
...
],
This package was developed using Sencha Cmd 6.5
and Ext JS 6.2.1
classic. I guess that
this package should also work with Ext JS version 5, but has not been tested.
This package has its own SASS styling and is not depending on a Sencha theme.
The TipToast
uses a singleton for presenting the messages. Disadvantage is that it will
generate a <div>
container at the moment the first TipToast.toast
is initiated. It is therefor
in this version only possible to have your messages show up at the same position.
The default delay is 2000 ms (2 seconds). You can alter this for every toast message you send or at the launch of your program.
at launch (change default):
TipToast.setDelayOption(4000);
when showing a message:
TipToast.toast('Nice Title', 'Nice Message', 3000);
or:
TipToast.toast('Nice Title', 'Nice Message', {
delay: 3000
});
The default size of a message is 400px. You can alter this at the launch of your program.
at launch (change default):
TipToast.setSizeOption('sm'); // 300px
TipToast.setSizeOption('lg'); // 500px
TipToast.setSizeOption('default'); // 400px
The default direction of a message is sliding in from the top of the viewport. You can alter this at the launch of your program.
at launch (change default):
TipToast.setDirectionOption('top');
TipToast.setDirectionOption('bottom');
The default position of a message is at the center of the viewport. You can alter this at the launch of your program.
at launch (change default):
TipToast.setPositionOption('left');
TipToast.setPositionOption('right');
TipToast.setPositionOption('default');
By default you can close a message. When you don't want this, you can change the default at the launch of your program.
at launch (change default):
TipToast.setCloseOption(false);
when showing a message:
TipToast.toast('Nice Title', 'Nice Message', {
delay: 3000,
closeable: false
});
The cls
add a CSS
class to the message. There are some special classes that can be used
to simulate the Bootstrap alert colors:
- danger (red)
- info (blue)
- warning (yellow)
- plain (gray)
- success (green)
There are 2 ways to get a message show up with the appropriate color settings.
when showing a message:
TipToast.toast('Nice Title', 'Nice Message', {
cls: 'danger'
});
// or:
TipToast.danger('Nice Title', 'Nice Message');
All color settings like danger
or success
are also methods. An additional alternative for
danger is availabe:
TipToast.error('Bad Title', 'Something is wrong');
You can find in the folders var
and src
within the sass
folder the SASS styling rules.
In the var\all.scss
you can find the variable values and in the the src\all.scss
you can find the
actual CSS rules.
Initial commit
- Johan van de Merwe - This package development
- AlexB - Base principle coding and inspiration
This project is licensed under the MIT License - see the LICENSE.md file for details
Thanks to AlexB for the inspiration, for some of the code used in this package was used from his developments that
can be found here: extjs-tip-toast