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

  1. #1

    [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...
     listeners: {
                        load: {
                            fn: SelectGoalOrg(this, records, successful, eOpts)
                        }
                    }
    complete code is as below....

    
    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
            });
    Last edited by Daniil; Apr 30, 2013 at 2:19 PM. Reason: [CLOSED]
  2. #2
    Hi @alscg,

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

    I can suggest the following solution.

    Example
    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();
    });
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @alscg,

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

    I can suggest the following solution.

    Example
    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 ...
  4. #4
    Quote Originally Posted by alscg View Post
    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
  5. #5
    Quote Originally Posted by alscg View Post
    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

    <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.
  6. #6
    Where does the error occur?
  7. #7
    Quote Originally Posted by Daniil View Post
    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..

Similar Threads

  1. Replies: 0
    Last Post: Sep 11, 2012, 5:14 PM
  2. Replies: 1
    Last Post: Jun 28, 2012, 9:39 PM
  3. Replies: 1
    Last Post: Jun 26, 2012, 1:40 PM
  4. Replies: 5
    Last Post: Jun 25, 2012, 6:19 PM
  5. [CLOSED] Pass value to event handler
    By CSG in forum 1.x Premium Help
    Replies: 1
    Last Post: Apr 08, 2009, 11:28 AM

Posting Permissions