[OPEN] [#1842] WidgetColumn

  1. #1

    [OPEN] [#1842] WidgetColumn

    Hi,
    I've some issues with gridpanel widgetcolumn:
    I'm able to render an ext.net button inside a widgetcolumn, but i have no idea how to recover the related record index.
    I need to use a controller action (so, using button directevent) to perform some business operations and I need to pass a field value as parameter.
    Reading Ext.js documentation (here: https://docs.sencha.com/extjs/7.3.1/...etWidgetRecord), I was expected to have a .getWidgetRecord() method, but I receive message "getWidgetRecord is not a function".

    Here the html where in the param value (record.Id) I need to set the value from one of the model record fields:

    <ext-widgetColumn hideable="false" align="Center" sortable="false">
                            <widget>
                                <ext-button tooltip="Some operation" iconCls="far fa-trash-alt">
                                    <directEvents>
                                        <click method="POST" actionName="BusinessOperation" success="App.grdTasks.store.reload();">
                                            <eventMask>
                                                <ext-eventMask showMask="true" msg="Running..." minDelay="500" />
                                            </eventMask>
                                            <extraParams>
                                                <ext-add key="id" value="record.Id" mode="Raw" />
                                            </extraParams>
                                        </click>
                                    </directEvents>
                                </ext-button>
                            </widget>
                        </ext-widgetColumn>

    Best regards,
    Fla
    Last edited by fabricio.murta; Nov 18, 2020 at 12:15 AM.
  2. #2
    Hello @Fla!

    Quote Originally Posted by Fla
    Reading Ext.js documentation (here: https://docs.sencha.com/extjs/7.3.1/...etWidgetRecord), I was expected to have a .getWidgetRecord() method, but I receive message "getWidgetRecord is not a function".
    I don't see in the code block you shared any reference to getWidgetRecord() call. As I see in the Ext.NET 5 example using Widget Columns, the method should be supported within any columns' component: Grid Panel > Column Model > Widget Column

    I believe this line:

    <ext-add key="id" value="record.Id" mode="Raw" />
    Should read as something like:

    <ext-add key="id" value="this.getWidgetRecord().get('id')" mode="Raw" />
    Or, in a more generic way, which would support getting the record afresh every time the button is pressed (in case, say, the field may change over time, like with an editable grid):

    <ext-add key="id" value="function() { this.getWidgetRecord().get('id'); }" mode="Raw" />
    I haven't tested the code, so there may be some issues with it. If so, please provide a runnable test case, and we'll tell you exactly what to fill in, in order to pass the record's data given the context.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    To explain better, it seems that there is no getWidgetRecord function. In fact, if i try the following:

    <ext-widgetColumn hideable="false" align="Center" sortable="false">
       <listeners>
           <afterRender handler="alert(this.getWidgetRecord();)" />
       </listeners>
       <widget>
           <ext-button tooltip="Delete" iconCls="far fa-trash-alt"></ext-button>
       </widget>
    </ext-widgetColumn>
    I have the following console error:
    Click image for larger version. 

Name:	screen.jpg 
Views:	161 
Size:	73.5 KB 
ID:	25461

    Investigating in browser debug mode, in the watch windows I obtain "method not available".
    Just for info, I created the project using your guide, downloading the ext.net templates, but I've the doubt that i need to import some scripts... :/

    Regards,
    Flaviano
  4. #4
    Hello again, @Fla!

    Yes, this was what I first expected to work, then I looked at the example I pointed in the previous post. And then, reading again the documentation entry you posted:

    getWidgetRecord is a method that decorates every widget.

    The magic word here seems to be decorates. It seems it was meant to translate in "is added to", because every widget or component within a Widget Column gets that method.

    So, you want to call it in the button's events, not the widget column's. Can you give it a try?

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabricio,
    after some investigation I solved in this way:

    <extraParams>
            <ext-add key="id" value="this.$widgetRecord.data.id" mode="Raw" />
          </extraParams>
    Debuging javascript and looking at ext.js sources docs (sigh...), I found that new properties were been added to button inside the widget. And one of these 'decorators' contains the record data (so, $widgetRecord).

    If it could be interesting I found an other containing column infos ($widgetColumn).
    Any way, I think that ext.js documentation is not so clear for this particular case.

    Regards,
    Fla
    Last edited by Fla; Nov 13, 2020 at 12:13 PM.
  6. #6
    Hello @Fla!

    Glad you could find a way that worked in you case, but beware this this.$widgetRecord seems to be a private/undocumented entity. While it is not very likely to change or be removed, there is absolutely no warranty this (assumed to be) private property will be supported across releases, be it minor or major version "bumps", without previous notice -- and it is going not to be considered a breaking change (for not being supported first place).

    Are you saying that, where this.$widgetRecord exists, there is no this.getWidgetRecord()?

    You may be getting the problem because it is being parsed before the method gets injected into the component, thus you'd need to wrap that line into a function as explained at post #2.

    Assuming that you've taken in consideration the risks on using the undocumented/private reference, I'll mark this thread as closed. But don't hesitate to post a follow-up if you need anything else regarding this issue.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    You may be getting the problem because it is being parsed before the method gets injected into the component, thus you'd need to wrap that line into a function as explained at post #2.
    This!

    I continued to investigate and found the correct solution:
    this code
    <ext-add key="id" value="function() { this.getWidgetRecord().get('id'); }" mode="Raw" />
    doesn't work because 'this' returns a reference to window.
    However after reading your last post I tryed the following one and it seems to work well:

    <script>
    var getWidgetElementValue = function (element) {
        return element.getWidgetRecord().id;
    };
    <script>
    .
    .
    .
        <ext-add key="id" value="getWidgetElementValue(this)" mode="Raw" />
    Again, thank you very much for the support.
    Regards,
    Fla
  8. #8
    Hello Flaviano! Thanks for the follow up!

    Quote Originally Posted by Fla
    this code (...) doesn't work because 'this' returns a reference to window.
    That was unexpected. this should reference the surrounding ext-button. At least as far as the code block provided in the first post is concerned.

    The last code block you shared, you didn't provide the context that surrounds the ext-add line. The this should not resolve to an instance of JavaScript Window object in that ext-add context. This is because Ext.NET is not including a piece of code required to pass the correct context in.

    Anyway, glad you could find a way that works for you. After all, it may make sense in your scenario. But it just means there's no way to inline simple functions for dynamic extra parameters and that's an issue.

    We've logged the issue as #1842 in our GitHub issues tracking page and will post a follow-up here as soon as the issue is fixed.

    Changing now the state of the issue from closed to open and assigned to issue #1842.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jul 27, 2018, 11:41 PM
  2. many ProgressBars in one WidgetColumn
    By misaqsaadat in forum 4.x Help
    Replies: 0
    Last Post: Mar 07, 2018, 2:04 PM
  3. [CLOSED] Grid WidgetColumn, Pie and Bar colors
    By ifminfomaster in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 22, 2016, 10:25 PM
  4. Replies: 3
    Last Post: Jan 27, 2016, 4:24 PM

Posting Permissions