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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

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

    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.
    Last edited by fabricio.murta; Oct 06, 2018 at 12:22 AM. Reason: no feedback from the user in 7+ days
  2. #2
    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!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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.
  4. #4
    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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. many ProgressBars in one WidgetColumn
    By misaqsaadat in forum 4.x Help
    Replies: 0
    Last Post: Mar 07, 2018, 2:04 PM
  2. [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
  3. Replies: 3
    Last Post: Jan 27, 2016, 4:24 PM
  4. Replies: 1
    Last Post: Apr 27, 2015, 8:53 PM
  5. Replies: 11
    Last Post: Oct 29, 2013, 5:32 PM

Posting Permissions