[CLOSED] How to pass grid data(id and it's records) to event handler of store's load event?

Hi ,

I want to pass grid reference to load event of it's store.
I have tried below code ...but it is throwing error "Microsoft JScript runtime error: 'records' is undefined".

following way I am attaching event handler to store...

Code:

---

listeners: {
                    load: {
                        fn: SelectGoalOrg(this, records, successful, eOpts)
                    }
                }

---

complete code is as below....

Code:

---


Ext.create("Ext.grid.Panel", {
            store: {
                model: Ext.define("App.LevelModel" + levelID, {
                    extend: "Ext.data.Model",
                    fields: [
                        {
                            name: "Organization_Id",
                            mapping: "Organization_Id",
                            type: "int"
                        }, {
                            name: "Organization_Desc",
                            mapping: "Organization_Desc",
                            type: "string"
                        },
                        {
                            name: "Org_Level_Id",
                            mapping: "Org_Level_Id",
                            type: "string"
                        },
                        {
                            name: "Level_Number",
                            mapping: "Level_Number",
                            type: "int"
                        },
                        {
                            name: "Org_Level_Desc",
                            mapping: "Org_Level_Desc",
                            type: "string"
                        },
                        {
                            name: "Operating_Group_Id",
                            mapping: "Operating_Group_Id",
                            type: "int"
                        },
                        {
                            name: "Next_LevelID",
                            mapping: "Next_LevelID",
                            type: "int"
                        },
                        {
                            name: "Next_LevelName",
                            mapping: "Next_LevelName",
                            type: "string"
                        }
                    ],
                    idProperty: "Organization_Id"
                }),
                storeId: "LevelStore" + levelID,
                autoLoad: true,
                readParameters: function (operation) {
                    return {
                        apply: {
                            "regionCSV": region,
                            "level": levelNumber
                        }
                    };
                },
                proxy: {
                    type: "ajax",
                    reader: {
                        type: "json",
                        root: "data"
                    },
                    url: '@(Url.Action("GetOrgsWithLevelInfo", "Talent"))'
                },
                listeners: {
                          load: {
                                fn: SelectGoalOrg(this, records, successful, eOpts)
                }
            }
            },           
            id: "grdLevel_" + region + "_" + levelID,
            border: false,
            cls: "grd-existing-goals",
            height: 280,
            renderTo: "div_" + region + "_" + levelID,
            width: 210,
            columns: {
                items: [{
                    width: 160,
                    dataIndex: "Organization_Desc",
                    text: levelName
                }
                ]
            },
            emptyText: "No records found. Please select a region to see related business units",
            selModel: window.App.chkLevelSelect = Ext.create("Ext.selection.CheckboxModel", {
                proxyId: "chkOrgsSelect" + levelID,
                selType: "checkboxmodel",
                listeners: {
                    deselect: {
                        fn: function (item, record, index) {
                            if (!this.deselectLock) {
                                OrgDeselect(this, record, index);
                            }
                        }
                    },
                    select: {
                        fn: function (item, record, index) {
                            if (!this.selectLock) {
                                OrgSelect(this, record, index);
                            }
                        }
                    }
                },
                checkOnly: true
            }),
            selectionMemory: false
        });

---

Hi @alscg,

A Store doesn't have access to its associated GridPanel.

I can suggest the following solution.

Example

Code:

---

Ext.onReady(function () {
    var grid = Ext.create("Ext.grid.Panel", {
        renderTo: Ext.getBody(),
        store: {
            fields: [{
                name: "test1"   
            }, {
                name: "test2"   
            }, {
                name: "test3"   
            }],
            proxy: {
                type: "ajax",
                url: "some URL"
            }
        },
        columns: [{
            text: "Test1",
            dataIndex: "test1"
        }, {
            text: "Test2",
            dataIndex: "test2"
        }, {
            text: "Test3",
            dataIndex: "test3"
        }]
    });

    grid.getStore().on("load", function (store, records, successful) {
        console.log(this);  // "this" is a GridPanel
        console.log(arguments);
    }, grid);

    grid.getStore().load();
});

---

Quote:

---

Originally Posted by Daniil

Hi @alscg,

A Store doesn't have access to its associated GridPanel.

I can suggest the following solution.

Example

Code:

---

Ext.onReady(function () {
    var grid = Ext.create("Ext.grid.Panel", {
        renderTo: Ext.getBody(),
        store: {
            fields: [{
                name: "test1"   
            }, {
                name: "test2"   
            }, {
                name: "test3"   
            }],
            proxy: {
                type: "ajax",
                url: "some URL"
            }
        },
        columns: [{
            text: "Test1",
            dataIndex: "test1"
        }, {
            text: "Test2",
            dataIndex: "test2"
        }, {
            text: "Test3",
            dataIndex: "test3"
        }]
    });

    grid.getStore().on("load", function (store, records, successful) {
        console.log(this);  // "this" is a GridPanel
        console.log(arguments);
    }, grid);

    grid.getStore().load();
});

---

---

Danill,

I have requirement of dynamic grid creation and almost achieved that with your help in previous thread...... I am in situation where I can not change whole logic.
So please suggest way to pass Grid reference to event handler with my code.
I hope you will understand ...

Quote:

---

Originally Posted by alscg

Danill,

I have requirement of dynamic grid creation and almost achieved that with your help in previous thread...... I am in situation where I can not change whole logic.
So please suggest way to pass Grid reference to event handler with my code.
I hope you will understand ...

---

Danill,

Got the solution with your approach.....Thank you very much

Quote:

---

Originally Posted by alscg

Danill,

Got the solution with your approach.....Thank you very much

---

Danill,

Functionality is working fine....but while loading grid I am getting following error.

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'items': object is null or undefined

The full view page code is as below

Code:

---

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
    var GoalOrgs = [];
    var SelectedGoalOrgs = [];

    var GetLinkedHierarchies = function () {
        var goalId = 88;
        if (goalId != '') {
            jQuery.ajax({
                url: '@( Url.Action("GetLinkedHierarchies", "Talent"))',
                type: "POST",
                data: {
                    "goalId": goalId
                },
                dataType: "json",
                success: OnLinkedHierarchiesLoaded,
                Error: OnServerError
            });
        }
    };

    function OnLinkedHierarchiesLoaded(data) {
        if (data.Orgs != null) {
            GoalOrgs = data.Orgs.slice();

            Ext.each(GoalOrgs, function (goalOrg) {
                var levelID = goalOrg.Org_Level_Id;
                var levelName = goalOrg.Org_Level_Desc;
                var levelNumber = goalOrg.Level_Number;
                var region = goalOrg.Operating_Group_Id;

                var divId = 'div_' + region + '_' + levelID;

                if ($(divId).length > 0) {
                    $(divId).show();
                }
                else {
                    var div = document.createElement('div');
                    var divId = '#div_' + region + '_' + levelID;
                    div.id = 'div_' + region + '_' + levelID;
                    div.className = 'col';
                    $(".linked-hierarchies").append($(div));
                    if ($(divId).length > 0) {
                        LoadGrid(levelID, levelName, levelNumber, region);
                    }
                }

            });
            //IMP : Following code is being used only to show first region selected values

            var firstRegion = GoalOrgs[0].Operating_Group_Id;

            Ext.each(GoalOrgs, function (goalOrg) {
                var levelID = goalOrg.Org_Level_Id;
                var region = goalOrg.Operating_Group_Id;
                var divId = 'div_' + region + '_' + levelID;

                if ($(divId).length > 0 && region != firstRegion) {
                    $(divId).hide();
                }
            });
        }
    }

    function LoadLevelGrids(selRegion, orgLevel) {
        jQuery.ajax({
            url: '@( Url.Action("GetLevels", "Talent"))',
            type: "POST",
            data: {
                "regionCSV": selRegion,
                "level": orgLevel
            },
            dataType: "json",
            success: OnLevelsLoaded,
            Error: OnServerError
        });

    };
    function OnLevelsLoaded(data) {
        var levelID = data[0].Org_Level_Id;
        var levelName = data[0].Org_Level_Desc;
        var levelNumber = data[0].Level_Number;
        var region = data[0].Operating_Group_Id;

        var gridDivs = $(".col").not(":first");//Get all grid containers except region grid container.
        Ext.each(gridDivs, function (gridDiv) {
            var gridDivId = "#" + gridDiv.id;
            regionId = gridDiv.id.split('_')[1];
            if (regionId != region) {//If the grid is belogs to other region,Then hide it.
                $(gridDivId).hide();
            }
            else {
                if ($(gridDivId).length > 0) {
                    $(gridDivId).show();
                }
            }
        });

        if (levelID != null && levelID > 0) {
            var div = document.createElement('div');
            var divId = '#div_' + region + '_' + levelID;
            div.id = 'div_' + region + '_' + levelID;
            div.className = 'col';
            $(".linked-hierarchies").append($(div));
            if ($(divId).length > 0) {
                LoadGrid(levelID, levelName, levelNumber, region);
            }

        }
    }

    function LoadGrid(levelID, levelName, levelNumber, region) {
        var grid = Ext.create("Ext.grid.Panel", {
            store: {
                model: Ext.define("App.LevelModel" + levelID, {
                    extend: "Ext.data.Model",
                    fields: [
                        {
                            name: "Organization_Id",
                            mapping: "Organization_Id",
                            type: "int"
                        }, {
                            name: "Organization_Desc",
                            mapping: "Organization_Desc",
                            type: "string"
                        },
                        {
                            name: "Org_Level_Id",
                            mapping: "Org_Level_Id",
                            type: "string"
                        },
                        {
                            name: "Level_Number",
                            mapping: "Level_Number",
                            type: "int"
                        },
                        {
                            name: "Org_Level_Desc",
                            mapping: "Org_Level_Desc",
                            type: "string"
                        },
                        {
                            name: "Operating_Group_Id",
                            mapping: "Operating_Group_Id",
                            type: "int"
                        },
                        {
                            name: "Next_LevelID",
                            mapping: "Next_LevelID",
                            type: "int"
                        },
                        {
                            name: "Next_LevelName",
                            mapping: "Next_LevelName",
                            type: "string"
                        }
                    ],
                    idProperty: "Organization_Id"
                }),
                storeId: "LevelStore" + levelID,
                autoLoad: false,
                readParameters: function (operation) {
                    return {
                        apply: {
                            "regionCSV": region,
                            "level": levelNumber
                        }
                    };
                },
                proxy: {
                    type: "ajax",
                    reader: {
                        type: "json",
                        root: "data"
                    },
                    url: '@(Url.Action("GetOrgsWithLevelInfo", "Talent"))'
                }
            },

            id: "grdLevel_" + region + "_" + levelID,
            border: false,
            cls: "grd-existing-goals",
            height: 280,
            renderTo: "div_" + region + "_" + levelID,
            width: 210,
            columns: {
                items: [{
                    width: 160,
                    dataIndex: "Organization_Desc",
                    text: levelName
                }
                ]
            },
            emptyText: "No records found. Please select a region to see related business units",
            selModel: window.App.chkLevelSelect = Ext.create("Ext.selection.CheckboxModel", {
                proxyId: "chkOrgsSelect" + levelID,
                selType: "checkboxmodel",
                listeners: {
                    deselect: {
                        fn: function (item, record, index) {
                            if (!this.deselectLock) {
                                OrgDeselect(this, record, index);
                            }
                        }
                    },
                    select: {
                        fn: function (item, record, index) {
                            if (!this.selectLock) {
                                OrgSelect(this, record, index);
                            }
                        }
                    }
                },
                checkOnly: true
            }),
            selectionMemory: false
        });

        grid.getStore().on("load", function (store, records, successful) {
            SelectGoalOrg(this, store, records, successful);
        }, grid);

        grid.getStore().load();
    }

    var SelectGoalOrg = function (grid, store, records, successful) {
        if (successful) {
            var selRecords = [];
            var gridRegionId = grid.id.split('_')[1];
            var gridLevelId = grid.id.split('_')[2];

            for (i = 0; i < GoalOrgs.length; ++i) {

                var levelId = GoalOrgs[i].Org_Level_Id;
                var regionId = GoalOrgs[i].Operating_Group_Id;

                if (levelId == gridLevelId && regionId == gridRegionId) {
                    selRecords.push(grid.getStore().getById(GoalOrgs[i].Organization_Id))
                }
            }
            if (selRecords.length > 0) {
                var selModel = grid.getSelectionModel();
                selModel.selectLock = true;
                selModel.deselectLock = true;
                selModel.select(selRecords);
                selModel.deselectLock = false;
                selModel.selectLock = false;
            }
        }
    }

    var RegionSelect = function (selModel, record, index) {
        if (record.data.Operating_Group_Id == 0) {
            selModel.selectLock = true;
            selModel.selectAll();
            selModel.selectLock = false;
        }
        LoadLevelGrids(record.data.Operating_Group_Id, 1);
    }

    var RegionDeselect = function (selModel, record, index) {
        var gridDivs = $(".col").not(":first");//Get all grid containers except region grid container.
        Ext.each(gridDivs, function (gridDiv) {
            var gridDivId = "#" + gridDiv.id;
            regionId = gridDiv.id.split('_')[1];
            if (regionId == record.data.Operating_Group_Id) {//If the grid is belongs to the current region,Then remove it.
                $(gridDivId).remove();
            }
            else {
                $(gridDivId).show();
            }
        });
    }

    var OrgSelect = function (selModel, record, index) {
        if (record.data.Org_Level_Id == 0) {
            selModel.selectLock = true;
            selModel.selectAll();
            selModel.selectLock = false;
        }

        SaveToGlobalArray(record.data);

        var levelID = record.data.Next_LevelID;
        var levelName = record.data.Next_LevelName;
        var levelNumber = record.data.Level_Number;
        var region = record.data.Operating_Group_Id;
        levelNumber = levelNumber + 1
        if (levelID != null && levelID > 0) {
            var div = document.createElement('div');
            div.id = 'div_' + region + '_' + levelID;
            div.className = 'col';
            $(".linked-hierarchies").append($(div));
            LoadGrid(levelID, levelName, levelNumber, region);
        }
    }

    function SaveToGlobalArray(record) {
        for (var i = 0; i < SelectedGoalOrgs.length; i++) {
            if (SelectedGoalOrgs[i].Level_Number < record.Level_Number && SelectedGoalOrgs[i].Operating_Group_Id == record.Operating_Group_Id)
                SelectedGoalOrgs.splice(i, 1);
        }
        SelectedGoalOrgs.push(record);
    }

    function SetSelectedRegionIds() {
        var selRegionIds = "";
        var selectedRegions = App.grdRegion.getSelectionModel().selected.items;

        Ext.each(selectedRegions, function (region) {
            selRegionIds += region.data.Operating_Group_Id + ",";
        });

        App.hdnRegionIds.value = selRegionIds;
    }

    var LinkHierarchies = function () {
        var goalId = '@(Session["GoalID"])';
        var selectedOrgIds = "";
        Ext.each(SelectedGoalOrgs, function (org) {
            if (org.Organization_Id != 0) {
                selectedOrgIds += org.Organization_Id + ",";
            }
        });

        jQuery.ajax({
            url: '@(Url.Action("SaveLinkedHierarchies", "Talent"))',
            type: "POST",
            data: {
                "goalId": 88,
                "selHierarchyIds": selectedOrgIds
            },
            dataType: "json",
            success: ServerSideValidationResult,
            Error: OnServerError
        });
    }

    function ServerSideValidationResult(result) {
        var newComment = result.ErrorMsg;
        if (newComment != "") {
            Ext.Msg.prompt({
                title: '',
                msg: newComment,
                buttons: { ok: '@(Resource.Talent.Goal.BtnOK)' }
            });
        } else {
            window.location.reload();
        }
    }

    function OnServerError() {
        Ext.Msg.prompt({
            title: '',
            msg: '@(Resource.Talent.Goal.AjaxCallFailureMsg)',
            buttons: { ok: '@(Resource.Talent.Goal.BtnOK)' }
        });
    }
</script>
<div class="linked-hierarchies clearfix">
    @(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
    @(Html.X().Hidden().ID("hdnRegionIds"))
    @(Html.X().Hidden().ID("hdnCurrentRegionId"))
    @(Html.X().Hidden().ID("hdnPreviousRegionId"))
    @(Html.X().Hidden().ID("hdnBusinesUnitIds"))
    <div class="col">
        @((Html.X().GridPanel()
                .ID("grdRegion")
                .Cls("grd-existing-goals")
                .Border(false)
                .Height(280)
                .Width(210)
                .SelectionMemory(false)
                .Store(Html.X().Store().ID("RegionStore").Listeners(ls => ls.Load.Fn = "GetLinkedHierarchies")
                .Model(Html.X().Model().ID("RegionModel")
                              .IDProperty("Operating_Group_Id")
                              .Fields(
                                        new ModelField("Operating_Group_Id", ModelFieldType.Int),
                                        new ModelField("Operating_Group_Desc", ModelFieldType.String)
                                      )
                      )
                .DataSource(Model)
                )
                .ColumnModel(
                                      Html.X().Column().Text(Resource.Talent.LinkedHierarchies.RegionText).Width(160).DataIndex("Operating_Group_Desc")
                            )
              .SelectionModel(Html.X().CheckboxSelectionModel()
                                    .Mode(SelectionMode.Multi).ID("chkSelect")
                                    .SelectedRecordID("Operating_Group_Id")
                                    .CheckOnly(true)
                                    .Listeners(ls =>
                                                    {
                                                        ls.Select.Handler = "if (!this.selectLock) { RegionSelect(this,record,index); }";
                                                        ls.Deselect.Handler = " if (!this.deselectLock) { RegionDeselect(this,record,index);}";
                                                    }
                                              )
                            )
                )
            )
    </div>
</div>
@( Html.X().LinkButton().ID("btnSave").Text(Resource.Talent.Goal.BtnSave)
                                      .Cls("save button btn-Save-linkhierarchies").Listeners(ls => ls.Click.Fn = "LinkHierarchies"))
<link rel="stylesheet" href="@( Url.Content("~/Content/foundation.css"))" />
<link rel="stylesheet" href="@( Url.Content("~/Content/pages/LinkedHierarchies.css"))" />
<link rel="stylesheet" href="@( Url.Content("~/Content/page_support.css"))" />

---

As it is a error , I am not simplifying the code.

Where does the error occur?

Quote:

---

Originally Posted by Daniil

Where does the error occur?

---

Danill,

I have rebuild the solution and cleared the browser history...Now everything working fine. But not sure which action of mine resolved the issue and why that issue came.

We can close this thread.

Sorry for inconvenience..