[CLOSED] Changed WidgetColumn to ComponentColumn and now getting no record

**stupp** · Apr 17, 2018, 11:10 AM

Hi,

I have changed my widget column to a component column because of your hint in the thread Different options per record in a splitButton widget.
It works pretty good, but I have to add a handler which deals with the record from the column.
Before I changed the column to a component column I could do something like

this.getWidgetRecord()

Is there a way to get also the record, if I use a component column?

Thanks in advance.

**fabricio.murta** · Apr 17, 2018, 7:24 PM

Hello @stupp!

The short answer is, yes, there's a way to get the record once you are in the grid cell's component.

The long answer would be also yes, of course, as the record is in most situations required when you are filling up or preparing the component during the page rendering.

But how exactly you'd get the record will depend on exactly where (in which part of the code, section, block) and when (in which event; load? some interaction with the component?).

So in order for we to give you an accurate option maybe a good option would be if you could expand on the test code provided by the forum thread you pointed above, and modifying it to add a component like the one you are using and the point where you needed to gather the record/cell data.

I hope this helps!

**stupp** · Apr 19, 2018, 10:10 AM

My sample:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" ValidateRequest="false"%>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Different component settings - Ext.NET Examples</title>
    <script type="text/javascript">
        function loadRecords() {
            var storeData = [];
            for (var i = 0; i < 6; i++) {
                var singleData = {};
                singleData["Name"] = "MÃ¼ller" + i;
                singleData["Age"] = i * 2;
                storeData.push(singleData);
            };
            App.Store1.loadData(storeData);
        };

        var setupButton = function (column, componentConfig) {
            var value = componentConfig.record.getData().Age,
                btnMenuItems = componentConfig.config[0].menu.items;

            if (value > 5) {
                btnMenuItems.push({ text: "Do something" }); // here I want to add a handler which returns the value of the selected row                
            };
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>Different component settings</h1>
        <ext:Button runat="server" Test="Load">
            <Listeners>
                <Click Handler="loadRecords();"></Click>
            </Listeners>
        </ext:Button>
        <ext:GridPanel
            runat="server"
            Title="Multiple Editors"
            Width="400">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="Name" />
                                <ext:ModelField Name="Age" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:RowNumbererColumn runat="server" />
                    <ext:Column runat="server" DataIndex="Name" Text="Name" Flex="2"></ext:Column>
                    <ext:Column runat="server" DataIndex="Age" Text="Age" Flex="2"></ext:Column>
                    <ext:ComponentColumn runat="server" Flex="1" Editor="true" DataIndex="HasIsUIReadOnlyTask">
                        <Component>
                            <ext:SplitButton runat="server" Height="18" Text="..." Handler="selectRow(getRecord(), 'task')">
                                <Menu>
                                    <ext:Menu runat="server">
                                        <Items>
                                            <ext:MenuItem runat="server" Text="Newn" Icon="Add"></ext:MenuItem>
                                            <ext:MenuItem runat="server" Text="Rename" Icon="TagBlue" Handler=""></ext:MenuItem>
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:SplitButton>
                        </Component>
                        <Listeners>
                            <%-- This is the listener I had before. This listener selects the row in which i clicked on the arrow button --%>
                            <%--<arrowclick handler="selectRow(this.getWidgetRecord());"></arrowclick>--%>
                            <BeforeBind Fn="setupButton" />
                        </Listeners>
                    </ext:ComponentColumn>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel ID="CheckboxSelectionModelTask" runat="server" Mode="Multi">
                </ext:CheckboxSelectionModel>
            </SelectionModel>
        </ext:GridPanel>
    </form>
</body>
</html>


Partial Class Test
    Inherits System.Web.UI.Page

End Class

If I click on the arrow from the splitbutton, I want to select the row, where I clicked the arrow. Or I want the MenuItem to get the record.
I commented out what I had before in the listener, before I changed the widget column to a component column.

I hope this helps.

**fabricio.murta** · Apr 21, 2018, 6:03 AM

Hello @stupp!

Thank you for the straightforward test case! That indeed helps a lot!

As one approach you can take, you can just "save" a reference to the record in the button's menu entry as it is built. You can save the reference to the whole button (so other menu entries can easily find the associated record), or the whole menu associated by that button.

Look at the basic function you could use:

var setupButton = function (column, componentConfig) {
    var value = componentConfig.record.getData().Age,
        btnMenuItems = componentConfig.config[0].menu.items;

    if (value > 5) {
        btnMenuItems.push({
            text: "Do something",
            handler: function (menuEntry) {
                Ext.toast("Age is: " + menuEntry.associatedRecord.getData().Age);
            },
            associatedRecord: componentConfig.record
        }); // here I want to add a handler which returns the value of the selected row                
    };
};

Notice I just "made up" a special field to the menu entry object named associatedRecord. You could name it after anything you'd like, as long as you don't overwrite anything that would conflict with code (if already used for something else, like "text" or "handler", for example).

Storing the record in the whole menu would be a matter of referencing: menuEntry.parentMenu (or menuEntry.getRefOwner()).
Storing to the button itself, would be: menuEntry.parentMenu.ownerCmp (or menuEntry.getRefOwner().getRefOwner().

It is generally a better idea to use the getter methods instead of the direct variables, but using the direct variables sometimes is better to read and understand what's about -- that's why I placed both above. Using the getter methods avoids changes from future versions from requiring you to update your code, as methods' contracts are usually kept by Sencha. The direct attributes' names may change without any warning if you don't have them listed in the corresponding component's documentation.

Involved here are three components: the menu entry, the menu itself, the split button.

Hope this helps!

**fabricio.murta** · Jul 28, 2018, 12:41 AM

Hello!

It's been a while since we replied your inquiry here, yet still no feedback from you. Was the answer above helpful? Do you still need help with this issue?

We'll mark this thread as closed if you don't post any follow-up in 7+ days from now, but don't worry, you'll still be able to post here even if we do so; so we can continue when if you have more to discuss about this at any time.

Thread: [CLOSED] Changed WidgetColumn to ComponentColumn and now getting no record

Thread Tools

Search Thread

Display

[CLOSED] Changed WidgetColumn to ComponentColumn and now getting no record

Similar Threads

many ProgressBars in one WidgetColumn

[CLOSED] Grid WidgetColumn, Pie and Bar colors

[CLOSED] [#1248] [3.2.1] GridPanel WidgetColumn as MultiUpload component

[CLOSED] How to get the record.data and ComponentColumn (combobox) selected value through Listeners ?

[CLOSED] I want to play index like auto play ,Next record ,Previous Record ,First record ,Last Record in gridpanel

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Changed WidgetColumn to ComponentColumn and now getting no record

[CLOSED] Changed WidgetColumn to ComponentColumn and now getting no record

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us