dfaruque / Serenity.Extra

Name of the repo says that this is an EXTRA of http://serenity.is platform
60 stars 34 forks source link

Panel decorator on version 3.3.9 causes blank screen #3

Closed wirble closed 6 years ago

wirble commented 6 years ago

I was testing out version 3.3.9 and liked the expanded .panel() feature and if coupled with the _Ext.DialogBase, for whatever reason causes a blank screen when clicking pull up the dialog. Do you know what the issue might be for me to look?

@Serenity.Decorators.registerClass()
@Serenity.Decorators.panel()
export class RequestDialog extends _Ext.DialogBase<myRow, any> {
wirble commented 6 years ago

This line in setDialogSize in DialogBase.ts files seems to cause the error when in a panel: this.element.dialog("option", "width", $content.width() + (width || 0));

I just disabled the fullContentArea() for now and seems to work fine.

Also, having the css line in the .less which set the window size causes conflict in the 3.3.9 version and using the _Ext dialog base. It seems to restrict the size to what is defined in the .less file. So I just took the settings out of the .less file.

wirble commented 6 years ago

this my as well be titled using .EXTRA with the updated 3.3.9 and typescript 2.5.3. There were more errors than I had anticipated. I think with the newer version you need to provide ///references

  1. In GridEditorBase.ts of EXT, add /// <reference path="../Bases/GridBase.ts" /> 1.1 In EditorDialogBase.ts, add /// <reference path="../Bases/DialogBase.ts" />

  2. Where ever you need to replace bases to EXT bases, you also need to add the reference also, for example: a. Common.GridEditorBase >> _Ext.GridEditorBase

    Add /// <reference path="../../_Ext/Editors/GridEditorBase.ts" />

    b. Serenity.EntityDialog >>_Ext.DialogBase Add /// <reference path="../../_Ext/Bases/DialogBase.ts" />

  3. If you want to use the newer Panel() decorator in Serenity, it will error out in EXT DialogBase.ts in setdialogsize

Unless there is a better way, just add a try catch for the element.dialog try { this.element.dialog("option", "width", $content.width() + (width || 0)); this.element.dialog("option", "height", $content.height() + (height || 105)); } catch (e) {/*catch error with panel() decorator*/ }

wirble commented 6 years ago

Also, the files in imports/servertypings for _Ext.Monts.ts and _Ext.TimeUoM.ts are complaining of duplicate enums now. I just commented them out, not sure why.

dfaruque commented 6 years ago

Thanks you. I have not used @panel decorator till now.

That why you are getting these stupid errors.

By the way, to deal with setDialogSize things you might override it in your panel dialog like this setDialogSize(width?, height?, top?, left?) { } so that it could not cause error.

Yes, in typescript 2.5 /// <reference things is required to avoid warnings/errors. Before this I am managed this by putting a underscore in Ext, that why it is _Ext

Typescript compiler compiles files sequentially (seems to me).

wirble commented 6 years ago

I like to have the main form to have the panel decorator and the detail form to be a modal window. However, the setDialogSize was calculating the modal window size wrong since it was based on the full panel window. I just ended up commenting out the entire setDialogSize and this seems to be good balance.

Why do you think _Ext.Monts.ts and _Ext.TimeUoM.ts are complaining of duplicate enums now. The new typescript have these same declaration, you think?

dfaruque commented 6 years ago

You can safely delete those duplicates. t4 should regenerate them.