[CLOSED] Rendering Issue in MVC
Hi Am dynamically building control and adding in view. Everything works fine but HighCharts inside "PC1" doesn't render below is the code.
Code:
Ext.net.ResourceMgr.load([{
url: "/ux/extensions/portal/portal-js/ext.axd?v=16881"
}, {
url: "/extnet/extnet-data-js/ext.axd?v=16881"
}, {
mode: "css",
url: "/ux/extensions/portal/css/portal-embedded-css/ext.axd?v=16881"
}], function () {
Ext.net.ResourceMgr.destroyCmp("idba87ee5e6ddd4957a77ffb5dff3e516a");
new Ext.ux.Portal({
id: "idba87ee5e6ddd4957a77ffb5dff3e516a",
xtype: "portal",
items: [{
id: "PC0",
xtype: "portalcolumn",
columnWidth: 0.5,
items: [{
id: "Portlet1",
xtype: "portlet",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.id58c23fb09cd94b4c8ba14137a0a3f795 = new MaximizeTool({}),
height: 400,
items: {
store: this.st1 = new Ext.ux.data.PagingStore({
proxyId: "st1",
autoLoad: true,
reader: new Ext.data.JsonReader({
fields: [{
name: "accno"
}, {
name: "name"
}, {
name: "branch"
}]
}),
directEventConfig: {},
proxy: new Ext.data.PagingMemoryProxy([{
"accno": "26",
"name": "Peter",
"branch": "Melbourne"
}, {
"accno": "18",
"name": "John",
"branch": "Brisbane"
}], false)
}),
id: "GvTransactions",
xtype: "netgrid",
autoScroll: true,
height: 200,
monitorResize: true,
layout: "fit",
stripeRows: true,
trackMouseOver: true,
selectionMemory: false,
cm: this.id091fcdba3d4b487c93f145b39c81cd07 = new Ext.grid.ColumnModel({
proxyId: "",
columns: [{
dataIndex: "accno",
header: "accno",
id: "accno"
}, {
dataIndex: "name",
header: "name",
id: "name"
}, {
dataIndex: "branch",
header: "branch",
id: "branch"
}]
})
},
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 1",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet1.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet1.hide();
},
qtip: "Close Gadget"
}]
}, {
id: "Portlet3",
xtype: "portlet",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.id5109807e89e3461fab22c7c472cc181d = new MaximizeTool({}),
height: 400,
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 3",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet3.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet3.hide();
},
qtip: "Close Gadget"
}]
}, {
id: "Portlet5",
xtype: "portlet",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.id6a1e903c5d61495abcecd223ae776d0e = new MaximizeTool({}),
height: 400,
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 5",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet5.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet5.hide();
},
qtip: "Close Gadget"
}]
}],
layout: "auto"
}, {
id: "PC1",
xtype: "portalcolumn",
columnWidth: 0.5,
items: [{
id: "Portlet2",
xtype: "portlet",
html: "<div id='chart_container'></div>\r\n<script type='text/javascript'>\r\nvar chart;\r\n$(document).ready(function() {\r\n\tchart = new Highcharts.Chart({\r\n\t\tchart: { renderTo:'chart_container', defaultSeriesType: 'line' }, \r\n\t\tplotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, \r\n\t\tsubtitle: { text: 'Source: WorldClimate.com' }, \r\n\t\ttitle: { text: 'Monthly Average Temperature' }, \r\n\t\ttooltip: { enabled: true, formatter: function() { return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; } }, \r\n\t\txAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, \r\n\t\tyAxis: { title: { text: 'Temperature (°C)' } }, \r\n\t\tseries: [{ data: [7, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], name: 'Tokyo' }]\r\n\t});\r\n});\r\n</script>\r\n",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.idebe4492ace134ca6bbf3b074217ab4fd = new MaximizeTool({}),
height: 400,
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 2",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet2.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet2.hide();
},
qtip: "Close Gadget"
}]
}, {
id: "Portlet4",
xtype: "portlet",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.id5cede5cc79af453e933a6e73a6900ade = new MaximizeTool({}),
height: 400,
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 4",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet4.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet4.hide();
},
qtip: "Close Gadget"
}]
}, {
id: "Portlet6",
xtype: "portlet",
defaultAnchor: "-20",
cls: "x-column-padding",
style: "position:relative;",
plugins: this.ida4d05c35260843b0a192b5668a799d58 = new MaximizeTool({}),
height: 400,
layout: "anchor",
closable: true,
frame: true,
title: "Portlet - 6",
tools: [{
id: "gear",
handler: function (event, toolEl, panel) {
Portlet6.hide();
},
qtip: "Edit Gadget"
}, {
id: "close",
handler: function (event, toolEl, panel) {
Portlet6.hide();
},
qtip: "Close Gadget"
}]
}],
layout: "auto"
}],
layoutConfig: {
fitHeight: false
},
layout: "netcolumn",
border: false,
listeners: {
beforedragover: {
fn: function (e) {
Ext.Msg.alert('BeforeDrop', String.format('Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}', e.panel.id, e.columnIndex, e.position));
}
},
drop: {
fn: function (e) {
Ext.Msg.alert('Drop', String.format('Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}', e.panel.id, e.columnIndex, e.position));
}
}
}
});
PnlDashBoard.addAndDoLayout(idba87ee5e6ddd4957a77ffb5dff3e516a);
Portlet1.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
st1.callbackRefreshHandler(response, {
serviceResponse: {
success: true,
data: {
data: [{
"accno": "26",
"name": "Peter",
"branch": "Melbourne"
}, {
"accno": "18",
"name": "John",
"branch": "Brisbane"
}],
total: 0
}
}
}, st1, o.eventType, o.action, o.extraParams);
Portlet2.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
Portlet3.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
Portlet4.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
Portlet5.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
Portlet6.on("beforehide", function (e) {
Ext.net.DirectEvent.request({
url: '/Data/TestUI',
method: 'POST',
cleanRequest: true,
extraParams: {
Id: this.id
}
});
});
});
