In Sencha, I'm able to mask a background component and bring up a dialog component nicely by calling this.view.mask() on the background component.
Then when I press "Submit" on the top dialog, I want to have a mask cover the dialog and background component all together instead of just masking the smaller dialog box. I don't want to just mask the dialog box, because even though the background is masked too, the dialog box's border is still obviously bright.
How can I mask both components all together?
On the dialog box I tried this.view.mask("Loading..."), but only the small dialog box is masked. Its border is still clearly bright so it's clear we're just putting a mask on the small dialog box rather than on the whole page.
I tried querying the background component via view=Ext.ComponentQuery.query('MyComponent')[0] and then using view.mask("Loading"), but this only adds the mask to that background component.
This is an ugly solution, but it worked for me. Tested on 7.0.0
var wnd = Ext.getCmp('window'), // just an example - Ext.getCmp() use is frowned upon :)
wndSize = wnd.getSize(),
myMask;
myMask = new Ext.LoadMask({
msg : 'Please wait...',
target : wnd,
height: wndSize.height,
width: wndSize.width
});
myMask.show().setXY(wnd.getXY());
Related
I have a basic create-react-app with Material/MUI text field and button. When I tab from the textfield to the button, it creates an animation on the button where the middle part slightly grows and shrinks. I'm trying to figure out how to get rid of that animation and just show a simple button that has focus. Toggling the options in Chrome debugger hasn't helped me track down where this animation is being created (focus, hover, etc.). In fact, anytime I change any property in the CSS panel it turns the animation off and makes it harder to track down what is causing this.
Thanks.
Since adding a global Toolbar to the forms there is a strange animation bug (?) when changing forms. At hitting a Button at FormA that will invoke FormB.show() the title has an animation the lets the new form stutter in the toolbar area from the right to the left. After googling I found this:
This is pretty much the problem I face at the toolbar, only difference is the toolbar Logo I added to the center is stuttering from the right to the left to its place. After the animation is done, the form looks just like it should.
In the main I do this:
Toolbar.setGlobalToolbar(true);
In every Form I do something like this in the constructor:
menuForm = new Form(" ", new BorderLayout());
logo = res_theme.getImage("Logo_Gema_vertikal.png");
menuForm.getToolbar().getTitleComponent().setUIID("toolbar_image");
((Label)menuForm.getToolbar().getTitleComponent()).setIcon(logo);
menuForm.getToolbar().addCommandToSideMenu(homeCommand);
menuForm.getToolbar().getMenuBar().addCommand(homeCommand);
If I leave out adding the logo to the toolbar, only the Command Icons are flying from the right to the left. What is causing this? Am I using the toolbar wrong?
From your question, it's due to using the default animation which is createSlideFadeTitle. You can solve this by changing the animation of the current form and the destination form to either createCover or createSlide:
In the current form:
currentForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
nextForm.show();
And in the destination form:
nextForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
currentForm.showBack();
I am building an app in codenameone, and I am having issues with hamburger menu and overflow menu, they keep disappearing on some pages, sometimes they are there and sometimes they are gone
See attached image, these two menus keep going and coming sometimes in the app
Is there a way out?
I am using the Toolbar API to add commands
tb = new Toolbar();
tb.getStyle().setBgImage(new RR().getR().getImage("newmenuimage.png"));
tb.setLayout(new BorderLayout());
f.setToolbar(tb);
Add a theme Constant commandBehaviour if it doesn't already exist and set it to Side and make sure your sideMenuImage has a valid image name as a value. Do the same for menuImage which is for the overflow menu.
Customise TitleArea and set its border to Empty and Under color, uncheck Derive Transparency and set it to 255 and uncheck Derive Background and set it to the color of your choice (ensure there's contrast between this color and your menu images).
How can I create a theme for a dialog box?
I was trying to change the border style of the dialog box but the border style applies 2 times for an inner element and for an outer element. I was expected that the border style applies only to the inner element.
To be clearer, as I cannot add image to my post, it seems that the dialog does not consist only from the center box which is showed while dialog is active. The dialog UI consists from a “background form” which usually is transparent and from a container which overlay over the background form. The last mentioned container contains de graphic representation of the “dialog box”.
My issue is that I can not apply my style only to the container which contains the dialog box but the style applies also to the background form.
How can I apply the border style only to the dialog box container element?
Any additional tips will be highly appreciated.
Thanks.
How are you applying the style? Are you using the theme to apply a style to the Dialog UIID as explained here.
Using setStyle or getStyle on a dialog component would be problematic and would not result in proper styling (you might get away with doing it on getDialogComponent but you should work with the theme).
Notice that to style a dialog you should use Dialog, DialogTitle & DialogBody UIID's and quite a few theme constants.
Thanks Shai,
is clear now.
I’m doing a custom dialog starting from the BlankDialog element provided in designer.
Because I started from BlankDialog I thought that overriding only UIID theme is enough.
I understood the BlankDialog structure wrongly thinking that is a simple empty form because is named "Blank…"
Is clear now that for every new UI object added, I should check if it has any other UI child to be customized together with the parent.
Thanks again.
I would like to try to create a popup using ons.screen.presentPage() with a transparent background, however once the transition is complete there is a black mask that appears behind the page. Could you please indicate the purpose of this black mask or the best way to create a popup dialog / selector?
The black mask is used to achieve the fade out effect of the exiting page.
What you can do, is to use DOM api to hide it.
ex.
// the controller of the entering page
function Page2Controller($scope){
setTimeout(function(){
$('.onsen_screen-black-mask').hide();
}, 0);
}