I have expanded the code you provided with JS Beautifier and got this:
Ext.net.ResourceMgr.registerIcon(["Add", "Delete"]);
Ext.onReady(function() {
Ext.net.append(
Ext.net.getEl('PnlCenter-body'),
["<script>",
" var Delete = function () {",
" var source = App.AccountsGridPanel;",
" var records = source.getSelectionModel().getSelection();",
" if (records.length == 0) {",
" Ext.Msg.alert('Error!', 'Please select an element.');",
" }",
" else {",
" Ext.net.DirectMethod.request({",
" url: '/Account/Delete',",
" params: {",
" selectedID: records[0].data.ID",
" }",
" });",
" }",
" };",
" var edit = function (editor, e) {",
" if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {",
" Ext.net.DirectMethod.request({",
" url: '/Account/EditAccount',",
" params: {",
" id: e.record.data.ID,",
" field: e.field,",
" newValue: e.value,",
" type: \"Account\"",
" }",
" });",
" }",
" };",
"<\/script>",
" <div id=\"App.id69efd84fca6c067_Container\"></div>"].join('')
);
Ext.create("Ext.panel.Panel", {
renderTo: "App.id69efd84fca6c067_Container",
width: 1600,
items: [{
store: {
model: Ext.ClassManager.isCreated(Ext.id()) ? Ext.id() : Ext.define(Ext.id(), {
extend: "Ext.data.Model",
fields: [{
name: "ID",
type: "int"
}, {
name: "Code"
}, {
name: "Name"
}, {
name: "Notes"
}],
idProperty: "ID"
}),
storeId: "Store",
autoLoad: true,
proxy: {
type: "ajax",
reader: {
type: "json",
rootProperty: "data"
},
url: "/Account/Read"
}
},
id: "AccountsGridPanel",
plugins: [{
ptype: "cellediting",
listeners: {
edit: {
fn: edit
}
}
}],
width: 600,
xtype: "grid",
tbar: {
xtype: "toolbar",
items: [{
id: "id92ceb98646b02067",
margin: 5,
iconCls: "#Add",
text: "Add",
directEvents: {
click: {
fn: function(item, e) {
Ext.net.directRequest({
cleanRequest: true,
url: "/Account/Add",
control: this
});
}
}
}
}, {
margin: 5,
iconCls: "#Delete",
text: "Delete",
listeners: {
click: {
fn: Delete
}
}
}]
},
columns: {
items: [{
flex: 800,
dataIndex: "Name",
editor: new Ext.grid.CellEditor(Ext.apply({
field: {
id: "id94f4f433fce40067",
xtype: "textfield",
maxLength: 100
}
}, {})),
text: "Name"
}, {
flex: 1200,
dataIndex: "Notes",
editor: new Ext.grid.CellEditor(Ext.apply({
field: {
id: "id612ff498d9a50067",
xtype: "textfield",
maxLength: 150
}
}, {})),
text: "Notes"
}]
},
multiColumnSort: false,
selModel: window.App.rowSelectionModel = Ext.create("Ext.selection.RowModel", {
proxyId: "rowSelectionModel",
selType: "rowmodel"
})
}],
layout: "hbox"
});
});
It is hard to find some syntax or runtime errors just by reading the code, but the store creation at line 43 looked a little strange. And it can be specially true as Ext.id() makes something like
Ext-35 which, when turned into a class and attempted to be referenced, may try to evaluate an expression like "Ext MINUS 35".
A good way to catch javascript generation errors is by moving the partial view in the main view (temporarily) and building it. I've just handled another issue where the way the user was generating the components' IDs was breaking the JavaScript code (ID with hyphens and starting with numbers would make some refs like
App.89af-29aa which is wrong). In your case the ID looks fine -- while your Ext.id() might be the issue!
There, I suggested (for the sake of simplicity) as a solution just to replace what breaks. In your case something like
Ext.id().replace('-','_') would do.
Regardless of that (assuming it is not the true cause of the problem), something else on the razor syntax or code behind creating the controls is probably causing JavaScript errors on this code block, but as it is dynamically created, dev tools does not get the exact failing place. If you move the partial view inside the main view you'll probably be able to have debugger to break on the exact failing line of the generated code.
Don't forget to enable debug code on your ResourceManager with
.SourceFormatting(true).ScriptMode(Debug) during the tests (if it is not already enabled in your Web.Config).
Well, let's hope I hit the jackpot on some of those guesses! I am pretty confident on the
Ext.id() issue!
