PDA

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



alscg
Apr 30, 2013, 9:14 AM
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
});

Daniil
Apr 30, 2013, 9:37 AM
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();
});

alscg
Apr 30, 2013, 9:48 AM
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 ...

alscg
Apr 30, 2013, 10:02 AM
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

alscg
Apr 30, 2013, 12:27 PM
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.LinkedHiera rchies.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.

Daniil
Apr 30, 2013, 1:39 PM
Where does the error occur?

alscg
Apr 30, 2013, 1:44 PM
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..