Unable to get reference to form on viewport

[TerryB]

Hi Guys. This is one humbling framework sometimes. Just when you think you finally understand you get one of these. MVC app, just one panel on a viewport. I'm using afterrender on the formpanel in controller to call server, which is happening fine. But my code to load server data into form can not get a reference, undefined object error like it doesn't exist.

Using console log to see what is going on, the scope is inside the DOM, after CSS rendering. panel is called "rollform", console log shows "rollform-1099" when I attempt to get ref with "panel = Ext.ComponentQuery.query('rollform')[0];" in the function called in controller with afterrender.

I've created hundreds of these type apps but all other times a grid is the initial object bound to viewport. This is first attempt with a panel. There has to be something fundamental I don't understand.

Below is code from controller. The viewport simply uses Card layout with "rollform" as it's only item. It renders, I can see panel title. But can not find correct way to get reference to form fields to load server reply. It fails trying to load first form field from server reply in success function. Says it can't read "property" setValue of null. The console log of panel variable is the DOM instance object "rollform-1010". My scope is off and I'm out of things to try.

Thanks!



Capture.PNG

[sean.lanktree]

The afterrender event passes a reference to itself so you can just accept "panel" as a parameter in getData.

[TerryB]

Hi Sean, that ends up giving me same reference, thus same error. Whatever mistake I'm making is more insidious than that. Not seen anything like this.

I have a ton of old school non MVC apps that put panel on viewport. But in that style, you create objects as variables so getting a reference is no issue. It's this MVC approach tripping me up here, this was supposed to be simple. I've never had another problem in other MVC apps getting references to panels/windows but those apps always had a grid bound to viewport. I then used Card layout to replace grid with panel when I needed to, never a reference issue. I attached the code for app, viewport and rollform, what little code there is. Got to be something really stupid here.

This is output of console.log on the passed in panel from afterrender.

g {initialConfig: {…}, id: "rollform-1010", autoGenId: true, protoEl: null, initConfig: ƒ, …}

[sean.lanktree]

I just took a look at your code. The rollform widget code seems off. Why not just buildItems and have that return your fields?
You are creating a new property named "wc251Panel" (which is an array). Then you call buildItems and have that return "wc251Panel" but then also wrap that around an array. So your items would then contain a single array element which then contains an array of fields.

[TerryB]

Ha! I just found that stupidity in some testing and was logging in here to tell you to ignore this issue, hadn't seen you replied. I realized with some testing that even though I was getting no errors, I wasn't rendering any form fields. Seeing the title faked me out.

Yeah, something in that stuff you mentioned was the problem. I had done that because the viewport is going to display columns of panels, it's a dashboard thing for one of those TV signage systems, Magic Info, so it won't have a user interface. In stripping down an old app I somehow created that nonsense and never noticed.

I told you it would be really stupid, that much I had right. Sorry to take up your time. :-(

[TerryB]

OK, at least I've learned something during this event. After I fixed the form so fields render, I still had trouble getting reference to RollForm to use down. But your trick of passing the panel from afterrender worked fine.

So I was determined to understand why. In my other apps with afterrender used, all with grid on viewport, the code called in afterrender always got reference to grid like this:

this.getMainGrid().down....

I always wondered why that was a function in controller but when I'd ref panels or windows it was either this.MainPanel.down or sometimes this.getMainPanel.down, not a function.

To make this work, the reference had to be like grid, function:

this.getRollForm().down('#wc251down').setValue(dat a.DOWN251);

That must be the trick in controller when you bind to viewport and use autocreate. That's why my console log was showing "rollform-1010" as the object. So making the function call can get that reference. Until now, I thought it was function because it was grid. I now get it's anything bound to viewport you don't directly create in controller.

Hope this helps someone else someday. Thanks again Sean for tip on passing reference from afterrender, that's what led me to understand this. If that worked, I knew had to be way to get that reference without passing it.

[sean.lanktree]

Hi Terry -

Your controller has a function named "getRollForm" because you have it defined in your "refs" (line 4).

If you have other applications where your controller calls "getMainGrid" then you likely have "ref" setup for that too.

There are many ways to get a reference to an object in Ext. Using "refs" was a preferred approach for Ext 4.X applications.

Glad you got it working.

[TerryB]

Yeah, I know Ref is the mechanism, I just meant my confusion on when you need "get" function versus just making the reference. See this line of code for example:


this.FPEShiftWindow.down('#FEEMP').setValue(this.g etOrderWindow().down('#FEEMP').getValue());

You can use Ref for popup windows (FPEShiftWindow) without a function. But any panels bound to viewport like OrderWindow (a panel assigned to Card layout in viewport, not popup window) needed get(). I didn't understand why until now, the viewport is a special beast.