Здравствуйте!
Нужна помощь в связывании View и ViewModule. Есть такой код
define('TestModule', ['ext-base', 'terrasoft', 'sandbox', 'Contact', 'TestModuleResources'],
function (Ext, Terrasoft, sandbox, Contact, resources) {
var viewModel = null;
var renderContainer;
var getView = function () {
var container = Ext.create('Terrasoft.Container', {
id: 'container',
selectors: {
wrapEl: '#container'
},
items: [
{
className: 'Terrasoft.Container',
id: 'header-name-container',
classes: {
wrapClassName: ['header-name-container']
},
selectors: {
wrapEl: '#header-name-container'
},
items: [{
className: 'Terrasoft.Label',
id: 'header-name',
caption: 'Main Caption',
width: '100%'
}]
},
{
className: 'Terrasoft.Container',
id: 'topButtons',
selectors: {
wrapEl: '#topButtons'
},
classes: {
wrapClassName: ['container-spacing']
},
items: [
{
className: 'Terrasoft.Button',
id: 'btnAddNew',
caption: 'Add',
style: Terrasoft.controls.ButtonEnums.style.RED,
tag: 'addNew',
visible: true,
click: {
bindTo: 'onAddNewButtonClick'
}
}
]
},
{
className: 'Terrasoft.Container',
id: 'gridArea',
selectors: {
wrapEl: '#gridArea'
},
classes: {
wrapClassName: ['container-spacing']
},
items: [
{
className: 'Terrasoft.Grid',
type: 'tiled',
primaryColumnName: 'Name',
activeRow: {
bindTo: 'activeRowId'
},
captionsConfig: [
{
cols: 12,
name: '2'
}
],
columnsConfig: [
[
{
cols: 24,
key: [
{
name: {
bindTo: 'Name'
},
type: 'title'
}
]
}
]
],
isEmpty: {
bindTo: 'gridEmpty'
},
collection: {
bindTo: 'gridData'
},
activeRowAction: {
bindTo: 'onActiveRowSelect'
},
activeRowActions: [
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.BLUE,
caption: '4',
tag: 'View'
},
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.BLUE,
caption: '5',
tag: 'Edit'
},
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.GREY,
caption: '6',
tag: 'Delete'
}
]
}
]
}
]
});
return container;
}
var getViewModel = function () {
return Ext.create('Terrasoft.BaseViewModel', {
entitySchema: Ext.create("Terrasoft.BaseEntitySchema", { columns: {} }),
values: {
gridEmpty: true,
activeRowId: null,
gridData: Ext.create('Terrasoft.BaseViewModelCollection', {
rowConfig: { Name: 'Name'/*, Id: 'Id'*/ }
})
},
methods: {
onActiveRowSelect: function (tag) {
if (tag === 'Delete') {
this.onDeleteButtonClick();
} else if (tag === 'Edit') {
this.onEditButtonClick();
} else if (tag === 'View') {
this.onViewButtonClick();
}
},
onAddNewButtonClick: function () {
var newCardModuleId = sandbox.id + '_CardModule_' + this.entitySchema.name;
//renderContainer = Ext.get('centerPanel');
sandbox.subscribe('CardModuleEntityInfo', function (args) {
var entityInfo = {};
entityInfo.action = 'add';
entityInfo.cardSchemaName = 'GeneratedWebFormPage';
entityInfo.activeRow = '';
return entityInfo;
}, [newCardModuleId]);
this.cardModuleResponse = null;
var scope = this;
sandbox.subscribe('CardModuleResponse', function (response) {
scope.cardModuleResponse = response;
}, [newCardModuleId]);
var params = sandbox.publish('GetHistoryState');
sandbox.publish('PushHistoryState', { hash: params.hash.historyState });
sandbox.loadModule('CardModule', {
renderTo: renderContainer,
id: newCardModuleId,
keepAlive: true
})
},
onDeleteButtonClick: function () {
var recordId = getActiveRow(this);
if (recordId) {
var scope = this;
var cfg = {
style: Terrasoft.MessageBoxStyles.BLUE
};
scope.showConfirmationDialog(
resources.localizableStrings.DeleteConfirmation,
function getSelectedButton(returnCode) {
if (returnCode === Terrasoft.MessageBoxButtons.YES.returnCode) {
var deleteQuery = Ext.create('Terrasoft.DeleteQuery', {
rootSchemaName: 'GeneratedWebForm'
});
deleteQuery.filters.add('IdFilter',
deleteQuery.createColumnFilterWithParameter(Terrasoft.ComparisonType.EQUAL,
'Id', recordId));
deleteQuery.execute(function (response) {
scope.getData();
}, scope);
}
}, ['yes', 'no'], cfg);
}
},
onEditButtonClick: function () {
var recordId = getActiveRow(this);
sandbox.publish('PushHistoryState',
{
hash: 'GeneratedWebFormPage',
stateObj: { id: recordId }
});
},
onViewButtonClick: function () {
var recordId = getActiveRow(this);
sandbox.publish('PushHistoryState',
{
hash: 'GeneratedWebFormPage',
stateObj: { id: recordId }
});
},
onLoad: function () {
loadGridData(this);
}
}
});
}
function loadGridData(scope) {
var request = Terrasoft.AjaxProvider.request({
url: "../rest/TestService/TestServiceMethod",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'POST',
jsonData: 'plaintext',
callback: function (request, success, response) {
if (success) {
loadGridDataFromJson(response.responseText, scope);
}
},
scope: this
});
}
function loadGridDataFromJson(dataJson, scope) {
var data = Ext.JSON.decode(dataJson);
data = Ext.JSON.decode(data.TestServiceMethodResult);
var newCollection = Ext.create("Terrasoft.Collection");
Terrasoft.each(data, function (item, key) {
var model = Ext.create("Terrasoft.BaseViewModel", {
rowConfig: {
Id: {
columnPath: "Id",
dataValueType: Terrasoft.DataValueType.GUID
},
Name: {
columnPath: "Name",
dataValueType: Terrasoft.DataValueType.TEXT
}
},
values: {
Id: Terrasoft.generateGUID(),
Name: item.Name
}
});
newCollection.add(model.get("Id"), model);
}, this);
var testGridData = scope.get("gridData");
scope.set("gridEmpty", newCollection.getCount() === 0);
testGridData.loadAll(newCollection);
}
function getActiveRow(scope) {
var activeRow = scope.get('activeRowId');
if (activeRow) {
var gridData = scope.get('gridData');
return gridData.get(activeRow);
}
return null;
}
function init() {
}
function render(renderTo) {
renderContainer = renderTo;
if (viewModel) {
var config = getView();
var view = Ext.create(config.className || 'Terrasoft.Container', config);
view.bind(viewModel);
view.render(renderTo);
return;
}
var view = getView();
viewModel = getViewModel();
view.bind(viewModel);
view.render(renderTo);
}
return {
init: init,
render: render
}
});
function (Ext, Terrasoft, sandbox, Contact, resources) {
var viewModel = null;
var renderContainer;
var getView = function () {
var container = Ext.create('Terrasoft.Container', {
id: 'container',
selectors: {
wrapEl: '#container'
},
items: [
{
className: 'Terrasoft.Container',
id: 'header-name-container',
classes: {
wrapClassName: ['header-name-container']
},
selectors: {
wrapEl: '#header-name-container'
},
items: [{
className: 'Terrasoft.Label',
id: 'header-name',
caption: 'Main Caption',
width: '100%'
}]
},
{
className: 'Terrasoft.Container',
id: 'topButtons',
selectors: {
wrapEl: '#topButtons'
},
classes: {
wrapClassName: ['container-spacing']
},
items: [
{
className: 'Terrasoft.Button',
id: 'btnAddNew',
caption: 'Add',
style: Terrasoft.controls.ButtonEnums.style.RED,
tag: 'addNew',
visible: true,
click: {
bindTo: 'onAddNewButtonClick'
}
}
]
},
{
className: 'Terrasoft.Container',
id: 'gridArea',
selectors: {
wrapEl: '#gridArea'
},
classes: {
wrapClassName: ['container-spacing']
},
items: [
{
className: 'Terrasoft.Grid',
type: 'tiled',
primaryColumnName: 'Name',
activeRow: {
bindTo: 'activeRowId'
},
captionsConfig: [
{
cols: 12,
name: '2'
}
],
columnsConfig: [
[
{
cols: 24,
key: [
{
name: {
bindTo: 'Name'
},
type: 'title'
}
]
}
]
],
isEmpty: {
bindTo: 'gridEmpty'
},
collection: {
bindTo: 'gridData'
},
activeRowAction: {
bindTo: 'onActiveRowSelect'
},
activeRowActions: [
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.BLUE,
caption: '4',
tag: 'View'
},
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.BLUE,
caption: '5',
tag: 'Edit'
},
{
className: 'Terrasoft.Button',
style: Terrasoft.controls.ButtonEnums.style.GREY,
caption: '6',
tag: 'Delete'
}
]
}
]
}
]
});
return container;
}
var getViewModel = function () {
return Ext.create('Terrasoft.BaseViewModel', {
entitySchema: Ext.create("Terrasoft.BaseEntitySchema", { columns: {} }),
values: {
gridEmpty: true,
activeRowId: null,
gridData: Ext.create('Terrasoft.BaseViewModelCollection', {
rowConfig: { Name: 'Name'/*, Id: 'Id'*/ }
})
},
methods: {
onActiveRowSelect: function (tag) {
if (tag === 'Delete') {
this.onDeleteButtonClick();
} else if (tag === 'Edit') {
this.onEditButtonClick();
} else if (tag === 'View') {
this.onViewButtonClick();
}
},
onAddNewButtonClick: function () {
var newCardModuleId = sandbox.id + '_CardModule_' + this.entitySchema.name;
//renderContainer = Ext.get('centerPanel');
sandbox.subscribe('CardModuleEntityInfo', function (args) {
var entityInfo = {};
entityInfo.action = 'add';
entityInfo.cardSchemaName = 'GeneratedWebFormPage';
entityInfo.activeRow = '';
return entityInfo;
}, [newCardModuleId]);
this.cardModuleResponse = null;
var scope = this;
sandbox.subscribe('CardModuleResponse', function (response) {
scope.cardModuleResponse = response;
}, [newCardModuleId]);
var params = sandbox.publish('GetHistoryState');
sandbox.publish('PushHistoryState', { hash: params.hash.historyState });
sandbox.loadModule('CardModule', {
renderTo: renderContainer,
id: newCardModuleId,
keepAlive: true
})
},
onDeleteButtonClick: function () {
var recordId = getActiveRow(this);
if (recordId) {
var scope = this;
var cfg = {
style: Terrasoft.MessageBoxStyles.BLUE
};
scope.showConfirmationDialog(
resources.localizableStrings.DeleteConfirmation,
function getSelectedButton(returnCode) {
if (returnCode === Terrasoft.MessageBoxButtons.YES.returnCode) {
var deleteQuery = Ext.create('Terrasoft.DeleteQuery', {
rootSchemaName: 'GeneratedWebForm'
});
deleteQuery.filters.add('IdFilter',
deleteQuery.createColumnFilterWithParameter(Terrasoft.ComparisonType.EQUAL,
'Id', recordId));
deleteQuery.execute(function (response) {
scope.getData();
}, scope);
}
}, ['yes', 'no'], cfg);
}
},
onEditButtonClick: function () {
var recordId = getActiveRow(this);
sandbox.publish('PushHistoryState',
{
hash: 'GeneratedWebFormPage',
stateObj: { id: recordId }
});
},
onViewButtonClick: function () {
var recordId = getActiveRow(this);
sandbox.publish('PushHistoryState',
{
hash: 'GeneratedWebFormPage',
stateObj: { id: recordId }
});
},
onLoad: function () {
loadGridData(this);
}
}
});
}
function loadGridData(scope) {
var request = Terrasoft.AjaxProvider.request({
url: "../rest/TestService/TestServiceMethod",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: 'POST',
jsonData: 'plaintext',
callback: function (request, success, response) {
if (success) {
loadGridDataFromJson(response.responseText, scope);
}
},
scope: this
});
}
function loadGridDataFromJson(dataJson, scope) {
var data = Ext.JSON.decode(dataJson);
data = Ext.JSON.decode(data.TestServiceMethodResult);
var newCollection = Ext.create("Terrasoft.Collection");
Terrasoft.each(data, function (item, key) {
var model = Ext.create("Terrasoft.BaseViewModel", {
rowConfig: {
Id: {
columnPath: "Id",
dataValueType: Terrasoft.DataValueType.GUID
},
Name: {
columnPath: "Name",
dataValueType: Terrasoft.DataValueType.TEXT
}
},
values: {
Id: Terrasoft.generateGUID(),
Name: item.Name
}
});
newCollection.add(model.get("Id"), model);
}, this);
var testGridData = scope.get("gridData");
scope.set("gridEmpty", newCollection.getCount() === 0);
testGridData.loadAll(newCollection);
}
function getActiveRow(scope) {
var activeRow = scope.get('activeRowId');
if (activeRow) {
var gridData = scope.get('gridData');
return gridData.get(activeRow);
}
return null;
}
function init() {
}
function render(renderTo) {
renderContainer = renderTo;
if (viewModel) {
var config = getView();
var view = Ext.create(config.className || 'Terrasoft.Container', config);
view.bind(viewModel);
view.render(renderTo);
return;
}
var view = getView();
viewModel = getViewModel();
view.bind(viewModel);
view.render(renderTo);
}
return {
init: init,
render: render
}
});
и WCF-сервис, возвращающий пары Id, Name.
Сейчас при переходе в модуль данные не подгружаются:
Судя по всему, почему-то не отрабатывает метод onLoad в getViewModel(). В чем может быть ошибка?
Заранее спасибо
Нравится
1 комментарий
1 декабря 2014 15:19
Здравтсвуйте, Акмаль!
Метод onLoad и не должен сам по себе вызываться. Вам необходимо его явно вызвать в init или в render.
Показать все комментарии
Войдите или зарегистрируйтесь, что бы комментировать